From f73436e94f630cf95b64511efc3d6577d118b4b3 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Mon, 7 Apr 2025 11:23:32 +0800
Subject: [PATCH 01/13] fix: captcha types

---
 packages/effects/common-ui/package.json       |  8 ++--
 .../verification/Verify/VerifyPoints.vue      | 47 ++-----------------
 2 files changed, 9 insertions(+), 46 deletions(-)

diff --git a/packages/effects/common-ui/package.json b/packages/effects/common-ui/package.json
index 51984bc6e..205240d45 100644
--- a/packages/effects/common-ui/package.json
+++ b/packages/effects/common-ui/package.json
@@ -32,16 +32,16 @@
     "@vben/types": "workspace:*",
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
+    "crypto-js": "catalog:",
     "qrcode": "catalog:",
     "tippy.js": "catalog:",
     "vue": "catalog:",
     "vue-json-viewer": "catalog:",
     "vue-router": "catalog:",
-    "vue-tippy": "catalog:",
-    "crypto-js": "catalog:"
+    "vue-tippy": "catalog:"
   },
   "devDependencies": {
-    "@types/qrcode": "catalog:",
-    "@types/crypto-js": "catalog:"
+    "@types/crypto-js": "catalog:",
+    "@types/qrcode": "catalog:"
   }
 }
diff --git a/packages/effects/common-ui/src/components/captcha/verification/Verify/VerifyPoints.vue b/packages/effects/common-ui/src/components/captcha/verification/Verify/VerifyPoints.vue
index f1dc502d7..61cdd4a39 100644
--- a/packages/effects/common-ui/src/components/captcha/verification/Verify/VerifyPoints.vue
+++ b/packages/effects/common-ui/src/components/captcha/verification/Verify/VerifyPoints.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
+import type { ComponentInternalInstance } from 'vue';
+
 import type { VerificationProps } from '../types';
 
 import {
-  type ComponentInternalInstance,
   getCurrentInstance,
   nextTick,
   onMounted,
@@ -20,44 +21,6 @@ import { resetSize } from '../utils/util';
  * VerifyPoints
  * @description 点选
  */
-
-// const props = defineProps({
-//   barSize: {
-//     default() {
-//       return {
-//         height: '40px',
-//         width: '310px',
-//       };
-//     },
-//     type: Object,
-//   },
-//   captchaType: {
-//     default() {
-//       return 'VerifyPoints';
-//     },
-//     type: String,
-//   },
-//   imgSize: {
-//     default() {
-//       return {
-//         height: '155px',
-//         width: '310px',
-//       };
-//     },
-//     type: Object,
-//   },
-//   // 弹出式pop，固定fixed
-//   mode: {
-//     default: 'fixed',
-//     type: String,
-//   },
-//   // 间隔
-//   vSpace: {
-//     default: 5,
-//     type: Number,
-//   },
-// });
-
 defineOptions({
   name: 'VerifyPoints',
 });
@@ -127,7 +90,7 @@ onMounted(() => {
 const canvas = ref(null);
 
 // 获取坐标
-const getMousePos = function (obj: any, e: any) {
+const getMousePos = function (_obj: any, e: any) {
   const x = e.offsetX;
   const y = e.offsetY;
   return { x, y };
@@ -190,7 +153,7 @@ function canvasClick(e: any) {
         if (res.repCode === '0000') {
           barAreaColor.value = '#4cae4c';
           barAreaBorderColor.value = '#5cb85c';
-          text.value = $t('ui.captcha.success');
+          text.value = $t('ui.captcha.sliderSuccessText');
           bindingClick.value = false;
           if (mode.value === 'pop') {
             setTimeout(() => {
@@ -227,7 +190,7 @@ async function getPictrue() {
     backToken.value = res.data.repData.token;
     secretKey.value = res.data.repData.secretKey;
     poinTextList.value = res.data.repData.wordList;
-    text.value = `${$t('ui.captcha.point')}【${poinTextList.value.join(',')}】`;
+    text.value = `${$t('ui.captcha.clickInOrder')}【${poinTextList.value.join(',')}】`;
   } else {
     text.value = res?.data?.repMsg;
   }

From 81fe98b62eaa2cd2788af7f9102095bfb8c09a13 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Mon, 7 Apr 2025 17:31:04 +0800
Subject: [PATCH 02/13] fix: type error

---
 apps/web-antd/src/router/guard.ts | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/apps/web-antd/src/router/guard.ts b/apps/web-antd/src/router/guard.ts
index cca219426..650d110cb 100644
--- a/apps/web-antd/src/router/guard.ts
+++ b/apps/web-antd/src/router/guard.ts
@@ -1,17 +1,18 @@
 import type { Router } from 'vue-router';
 
 import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
+import { $t } from '@vben/locales';
 import { preferences } from '@vben/preferences';
 import { useAccessStore, useUserStore } from '@vben/stores';
 import { startProgress, stopProgress } from '@vben/utils';
 
+import { message } from 'ant-design-vue';
+
+import { getSimpleDictDataList } from '#/api/system/dict/data';
 import { accessRoutes, coreRouteNames } from '#/router/routes';
 import { useAuthStore, useDictStore } from '#/store';
 
 import { generateAccess } from './access';
-import { message } from 'ant-design-vue';
-import { $t } from '@vben/locales';
-import { getSimpleDictDataList } from '#/api/system/dict/data';
 
 /**
  * 通用守卫配置
@@ -101,12 +102,15 @@ function setupAccessGuard(router: Router) {
     // 当前登录用户拥有的角色标识列表
     let userInfo = userStore.userInfo;
     if (!userInfo) {
-      // addy by 芋艿：由于 yudao 是 fetchUserInfo 统一加载用户 + 权限信息，所以将 fetchMenuListAsync
+      // add by 芋艿：由于 yudao 是 fetchUserInfo 统一加载用户 + 权限信息，所以将 fetchMenuListAsync
       const loading = message.loading({
         content: `${$t('common.loadingMenu')}...`,
       });
       try {
-        userInfo = (await authStore.fetchUserInfo()).user;
+        const authPermissionInfo = await authStore.fetchUserInfo();
+        if (authPermissionInfo) {
+          userInfo = authPermissionInfo.user;
+        }
       } finally {
         loading();
       }
@@ -128,7 +132,7 @@ function setupAccessGuard(router: Router) {
     userStore.setUserRoles(userRoles);
     const redirectPath = (from.query.redirect ??
       (to.path === DEFAULT_HOME_PATH
-        ? userInfo.homePath || DEFAULT_HOME_PATH
+        ? userInfo?.homePath || DEFAULT_HOME_PATH
         : to.fullPath)) as string;
 
     return {

From 52ca67b909862fb506eec9763eb01a111a84b772 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Mon, 7 Apr 2025 17:31:38 +0800
Subject: [PATCH 03/13] fix: type error

---
 apps/web-antd/src/utils/tree.ts | 49 ++++++++++++++++++---------------
 1 file changed, 27 insertions(+), 22 deletions(-)

diff --git a/apps/web-antd/src/utils/tree.ts b/apps/web-antd/src/utils/tree.ts
index a7355e980..0e743864a 100644
--- a/apps/web-antd/src/utils/tree.ts
+++ b/apps/web-antd/src/utils/tree.ts
@@ -6,51 +6,56 @@
  * @param {*} parentId 父节点字段 默认 'parentId'
  * @param {*} children 孩子节点字段 默认 'children'
  */
-export const handleTree = (data: any[], id?: string, parentId?: string, children?: string) => {
+export const handleTree = (
+  data: any[],
+  id?: string,
+  parentId?: string,
+  children?: string,
+) => {
   if (!Array.isArray(data)) {
-    console.warn('data must be an array')
-    return []
+    console.warn('data must be an array');
+    return [];
   }
   const config = {
     id: id || 'id',
     parentId: parentId || 'parentId',
-    childrenList: children || 'children'
-  }
+    childrenList: children || 'children',
+  };
 
-  const childrenListMap = {}
-  const nodeIds = {}
-  const tree: any[] = []
+  const childrenListMap: any = {};
+  const nodeIds: any = {};
+  const tree: any[] = [];
 
   for (const d of data) {
-    const parentId = d[config.parentId]
-    if (childrenListMap[parentId] == null) {
-      childrenListMap[parentId] = []
+    const parentId = d[config.parentId];
+    if (childrenListMap[parentId] === null) {
+      childrenListMap[parentId] = [];
     }
-    nodeIds[d[config.id]] = d
-    childrenListMap[parentId].push(d)
+    nodeIds[d[config.id]] = d;
+    childrenListMap[parentId].push(d);
   }
 
   for (const d of data) {
-    const parentId = d[config.parentId]
-    if (nodeIds[parentId] == null) {
-      tree.push(d)
+    const parentId = d[config.parentId];
+    if (nodeIds[parentId] === null) {
+      tree.push(d);
     }
   }
 
   for (const t of tree) {
-    adaptToChildrenList(t)
+    adaptToChildrenList(t);
   }
 
-  function adaptToChildrenList(o) {
+  function adaptToChildrenList(o: any) {
     if (childrenListMap[o[config.id]] !== null) {
-      o[config.childrenList] = childrenListMap[o[config.id]]
+      o[config.childrenList] = childrenListMap[o[config.id]];
     }
     if (o[config.childrenList]) {
       for (const c of o[config.childrenList]) {
-        adaptToChildrenList(c)
+        adaptToChildrenList(c);
       }
     }
   }
 
-  return tree
-}
\ No newline at end of file
+  return tree;
+};

From 49632697a0eb54a6ce93b8478cdf8d5f597cbedd Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 7 Apr 2025 18:42:24 +0800
Subject: [PATCH 04/13] =?UTF-8?q?feat=EF=BC=9A=E5=A2=9E=E5=8A=A0=20job=20?=
 =?UTF-8?q?=E5=AE=9A=E6=97=B6=E4=BB=BB=E5=8A=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/infra/job-log/index.ts  |  36 +++
 apps/web-antd/src/api/infra/job/index.ts      |  68 ++++++
 apps/web-antd/src/views/infra/job/data.ts     | 222 ++++++++++++++++++
 apps/web-antd/src/views/infra/job/index.vue   | 208 ++++++++++++++++
 .../src/views/infra/job/logger/data.ts        | 143 +++++++++++
 .../src/views/infra/job/logger/index.vue      | 100 ++++++++
 .../views/infra/job/logger/modules/detail.vue |  68 ++++++
 .../src/views/infra/job/modules/detail.vue    |  77 ++++++
 .../src/views/infra/job/modules/form.vue      |  80 +++++++
 packages/@core/base/icons/src/lucide.ts       |   1 +
 packages/@core/base/shared/src/utils/date.ts  |   4 +-
 11 files changed, 1005 insertions(+), 2 deletions(-)
 create mode 100644 apps/web-antd/src/api/infra/job-log/index.ts
 create mode 100644 apps/web-antd/src/api/infra/job/index.ts
 create mode 100644 apps/web-antd/src/views/infra/job/data.ts
 create mode 100644 apps/web-antd/src/views/infra/job/index.vue
 create mode 100644 apps/web-antd/src/views/infra/job/logger/data.ts
 create mode 100644 apps/web-antd/src/views/infra/job/logger/index.vue
 create mode 100644 apps/web-antd/src/views/infra/job/logger/modules/detail.vue
 create mode 100644 apps/web-antd/src/views/infra/job/modules/detail.vue
 create mode 100644 apps/web-antd/src/views/infra/job/modules/form.vue

diff --git a/apps/web-antd/src/api/infra/job-log/index.ts b/apps/web-antd/src/api/infra/job-log/index.ts
new file mode 100644
index 000000000..f2c756d61
--- /dev/null
+++ b/apps/web-antd/src/api/infra/job-log/index.ts
@@ -0,0 +1,36 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace InfraJobLogApi {
+  /** 任务日志信息 */
+  export interface InfraJobLog {
+    id?: number;
+    jobId: number;
+    handlerName: string;
+    handlerParam: string;
+    cronExpression: string;
+    executeIndex: string;
+    beginTime: Date;
+    endTime: Date;
+    duration: string;
+    status: number;
+    createTime?: string;
+    result: string;
+  }
+}
+
+/** 查询任务日志列表 */
+export function getJobLogPage(params: PageParam) {
+  return requestClient.get<PageResult<InfraJobLogApi.InfraJobLog>>('/infra/job-log/page', { params });
+}
+
+/** 查询任务日志详情 */
+export function getJobLog(id: number) {
+  return requestClient.get<InfraJobLogApi.InfraJobLog>(`/infra/job-log/get?id=${id}`);
+}
+
+/** 导出定时任务日志 */
+export function exportJobLog(params: any) {
+  return requestClient.download('/infra/job-log/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/infra/job/index.ts b/apps/web-antd/src/api/infra/job/index.ts
new file mode 100644
index 000000000..702446921
--- /dev/null
+++ b/apps/web-antd/src/api/infra/job/index.ts
@@ -0,0 +1,68 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace InfraJobApi {
+  /** 任务信息 */
+  export interface InfraJob {
+    id?: number;
+    name: string;
+    status: number;
+    handlerName: string;
+    handlerParam: string;
+    cronExpression: string;
+    retryCount: number;
+    retryInterval: number;
+    monitorTimeout: number;
+    createTime?: Date;
+  }
+}
+
+/** 查询任务列表 */
+export function getJobPage(params: PageParam) {
+  return requestClient.get<PageResult<InfraJobApi.InfraJob>>('/infra/job/page', { params });
+}
+
+/** 查询任务详情 */
+export function getJob(id: number) {
+  return requestClient.get<InfraJobApi.InfraJob>(`/infra/job/get?id=${id}`);
+}
+
+/** 新增任务 */
+export function createJob(data: InfraJobApi.InfraJob) {
+  return requestClient.post('/infra/job/create', data);
+}
+
+/** 修改定时任务调度 */
+export function updateJob(data: InfraJobApi.InfraJob) {
+  return requestClient.put('/infra/job/update', data);
+}
+
+/** 删除定时任务调度 */
+export function deleteJob(id: number) {
+  return requestClient.delete(`/infra/job/delete?id=${id}`);
+}
+
+/** 导出定时任务调度 */
+export function exportJob(params: any) {
+  return requestClient.download('/infra/job/export-excel', { params });
+}
+
+/** 任务状态修改 */
+export function updateJobStatus(id: number, status: number) {
+  const params = {
+    id,
+    status
+  };
+  return requestClient.put('/infra/job/update-status', { params });
+}
+
+/** 定时任务立即执行一次 */
+export function runJob(id: number) {
+  return requestClient.put(`/infra/job/trigger?id=${id}`);
+}
+
+/** 获得定时任务的下 n 次执行时间 */
+export function getJobNextTimes(id: number) {
+  return requestClient.get(`/infra/job/get_next_times?id=${id}`);
+}
diff --git a/apps/web-antd/src/views/infra/job/data.ts b/apps/web-antd/src/views/infra/job/data.ts
new file mode 100644
index 000000000..af1bde63a
--- /dev/null
+++ b/apps/web-antd/src/views/infra/job/data.ts
@@ -0,0 +1,222 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraJobApi } from '#/api/infra/job';
+
+import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+import { useAccess } from '@vben/access';
+import { InfraJobStatusEnum } from '#/utils/constants';
+
+const { hasAccessByCodes } = useAccess();
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '任务名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入任务名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'handlerName',
+      label: '处理器的名字',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入处理器的名字',
+        // readonly: ({ values }) => !!values.id,
+      },
+      rules: 'required',
+      // TODO @芋艿：在修改场景下，禁止调整
+    },
+    {
+      fieldName: 'handlerParam',
+      label: '处理器的参数',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入处理器的参数',
+      },
+    },
+    {
+      fieldName: 'cronExpression',
+      label: 'CRON 表达式',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 CRON 表达式',
+      },
+      rules: 'required',
+      // TODO @芋艿：未来支持动态的 CRON 表达式选择
+    },
+    {
+      fieldName: 'retryCount',
+      label: '重试次数',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入重试次数。设置为 0 时，不进行重试',
+        min: 0,
+        class: 'w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'retryInterval',
+      label: '重试间隔',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入重试间隔，单位：毫秒。设置为 0 时，无需间隔',
+        min: 0,
+        class: 'w-full'
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'monitorTimeout',
+      label: '监控超时时间',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入监控超时时间，单位：毫秒',
+        min: 0,
+        class: 'w-full',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '任务名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入任务名称',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '任务状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_JOB_STATUS, 'number'),
+        allowClear: true,
+        placeholder: '请选择任务状态',
+      },
+    },
+    {
+      fieldName: 'handlerName',
+      label: '处理器的名字',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入处理器的名字',
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns<T = InfraJobApi.InfraJob>(
+  onActionClick: OnActionClickFn<T>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '任务编号',
+      minWidth: 80,
+    },
+    {
+      field: 'name',
+      title: '任务名称',
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '任务状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_JOB_STATUS, },
+      },
+    },
+    {
+      field: 'handlerName',
+      title: '处理器的名字',
+      minWidth: 180,
+    },
+    {
+      field: 'handlerParam',
+      title: '处理器的参数',
+      minWidth: 140,
+    },
+    {
+      field: 'cronExpression',
+      title: 'CRON 表达式',
+      minWidth: 120,
+    },
+    {
+      field: 'operation',
+      title: '操作',
+      width: 280,
+      fixed: 'right',
+      align: 'center',
+      cellRender: {
+        attrs: {
+          nameField: 'name',
+          nameTitle: '任务',
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+        options: [
+          {
+            code: 'edit',
+            show: hasAccessByCodes(['infra:job:update']),
+          },
+          {
+            code: 'update-status',
+            text: '开启',
+            show: (row: any) => hasAccessByCodes(['infra:job:update'])
+              && row.status === InfraJobStatusEnum.STOP,
+          },
+          {
+            code: 'update-status',
+            text: '暂停',
+            show: (row: any) => hasAccessByCodes(['infra:job:update'])
+              && row.status == InfraJobStatusEnum.NORMAL,
+          },
+          {
+            code: 'trigger',
+            text: '执行',
+            show: hasAccessByCodes(['infra:job:trigger']),
+          },
+          // TODO @芋艿：增加一个“更多”选项
+          {
+            code: 'view',
+            text: '详细',
+            show: hasAccessByCodes(['infra:job:query']),
+          },
+          {
+            code: 'log',
+            text: '日志',
+            show: hasAccessByCodes(['infra:job:query']),
+          },
+          {
+            code: 'delete',
+            show: hasAccessByCodes(['infra:job:delete']),
+          },
+        ],
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/infra/job/index.vue b/apps/web-antd/src/views/infra/job/index.vue
new file mode 100644
index 000000000..4299daec8
--- /dev/null
+++ b/apps/web-antd/src/views/infra/job/index.vue
@@ -0,0 +1,208 @@
+<script lang="ts" setup>
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraJobApi } from '#/api/infra/job';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { Download, Plus, History } from '@vben/icons';
+import { Button, message, Modal } from 'ant-design-vue';
+import Form from './modules/form.vue';
+import Detail from './modules/detail.vue';
+import { DocAlert } from '#/components/doc-alert';
+
+import { $t } from '#/locales';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { useRouter } from 'vue-router';
+import {InfraApiErrorLogProcessStatusEnum, InfraJobStatusEnum} from '#/utils/constants';
+import { deleteJob, exportJob, getJobPage, runJob, updateJobStatus } from '#/api/infra/job';
+import { downloadByData } from '#/utils/download';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import {updateApiErrorLogStatus} from '#/api/infra/api-error-log';
+
+const { push } = useRouter();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function onExport() {
+  const data = await exportJob(await gridApi.formApi.getValues());
+  downloadByData(data, '定时任务.xls');
+}
+
+/** 创建任务 */
+function onCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑任务 */
+function onEdit(row: InfraJobApi.InfraJob) {
+  formModalApi.setData(row).open();
+}
+
+/** 查看任务详情 */
+function onView(row: InfraJobApi.InfraJob) {
+  detailModalApi.setData({ id: row.id }).open();
+}
+
+/** 更新任务状态 */
+async function onUpdateStatus(row: InfraJobApi.InfraJob) {
+  const status = row.status === InfraJobStatusEnum.STOP ? InfraJobStatusEnum.NORMAL : InfraJobStatusEnum.STOP;
+  const statusText = status === InfraJobStatusEnum.NORMAL ? '启用' : '停用';
+  Modal.confirm({
+    title: '确认操作',
+    content: `确定${statusText} ${row.name} 吗？`,
+    onOk: async () => {
+      await updateJobStatus(row.id as number, status);
+      message.success({
+        content: $t('ui.actionMessage.operationSuccess'),
+        key: 'action_process_msg',
+      });
+      onRefresh();
+    }
+  });
+}
+
+/** 执行一次任务 */
+async function onTrigger(row: InfraJobApi.InfraJob) {
+  Modal.confirm({
+    title: '确认操作',
+    content: `确定执行一次 ${row.name} 吗？`,
+    onOk: async () => {
+      await runJob(row.id as number);
+      message.success({
+        content: $t('ui.actionMessage.operationSuccess'),
+        key: 'action_process_msg',
+      });
+    }
+  });
+}
+
+/** 跳转到任务日志 */
+function onLog(row?: InfraJobApi.InfraJob) {
+  push({
+    name: 'InfraJobLog',
+    query: row?.id ? { id: row.id } : {},
+  });
+}
+
+/** 删除任务 */
+async function onDelete(row: InfraJobApi.InfraJob) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await deleteJob(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_process_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 表格操作按钮的回调函数 */
+function onActionClick({
+  code,
+  row,
+}: OnActionClickParams<InfraJobApi.InfraJob>) {
+  switch (code) {
+    case 'edit': {
+      onEdit(row);
+      break;
+    }
+    case 'update-status': {
+      onUpdateStatus(row);
+      break;
+    }
+    case 'delete': {
+      onDelete(row);
+      break;
+    }
+    case 'trigger': {
+      onTrigger(row);
+      break;
+    }
+    case 'view': {
+      onView(row);
+      break;
+    }
+    case 'log': {
+      onLog(row);
+      break;
+    }
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(onActionClick),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getJobPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<InfraJobApi.InfraJob>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <DocAlert title="定时任务" url="https://doc.iocoder.cn/job/" />
+    <DocAlert title="异步任务" url="https://doc.iocoder.cn/async-task/" />
+    <DocAlert title="消息队列" url="https://doc.iocoder.cn/message-queue/" />
+
+    <FormModal @success="onRefresh" />
+    <DetailModal />
+    <Grid table-title="定时任务列表">
+      <template #toolbar-tools>
+        <Button type="primary" @click="onCreate" v-access:code="['infra:job:create']">
+          <Plus class="size-5" />
+          {{ $t('ui.actionTitle.create', ['任务']) }}
+        </Button>
+        <Button type="primary" class="ml-2" @click="onExport" v-access:code="['infra:job:export']">
+          <Download class="size-5" />
+          {{ $t('ui.actionTitle.export') }}
+        </Button>
+        <Button type="primary" class="ml-2" @click="onLog(undefined)" v-access:code="['infra:job:query']">
+          <History class="size-5" />
+          执行日志
+        </Button>
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/infra/job/logger/data.ts b/apps/web-antd/src/views/infra/job/logger/data.ts
new file mode 100644
index 000000000..d8c7f92ac
--- /dev/null
+++ b/apps/web-antd/src/views/infra/job/logger/data.ts
@@ -0,0 +1,143 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraJobLogApi } from '#/api/infra/job-log';
+
+import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+import { useAccess } from '@vben/access';
+import dayjs from 'dayjs';
+import { formatDateTime } from '@vben/utils';
+
+const { hasAccessByCodes } = useAccess();
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'handlerName',
+      label: '处理器的名字',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入处理器的名字',
+      },
+    },
+    {
+      fieldName: 'beginTime',
+      label: '开始执行时间',
+      component: 'DatePicker',
+      componentProps: {
+        allowClear: true,
+        placeholder: '选择开始执行时间',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        showTime: {
+          format: 'HH:mm:ss',
+          defaultValue: dayjs('00:00:00', 'HH:mm:ss'),
+        },
+      },
+    },
+    {
+      fieldName: 'endTime',
+      label: '结束执行时间',
+      component: 'DatePicker',
+      componentProps: {
+        allowClear: true,
+        placeholder: '选择结束执行时间',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        showTime: {
+          format: 'HH:mm:ss',
+          defaultValue: dayjs('23:59:59', 'HH:mm:ss'),
+        },
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '任务状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_JOB_LOG_STATUS, 'number'),
+        allowClear: true,
+        placeholder: '请选择任务状态',
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns<T = InfraJobLogApi.InfraJobLog>(
+  onActionClick: OnActionClickFn<T>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '日志编号',
+      minWidth: 80,
+    },
+    {
+      field: 'jobId',
+      title: '任务编号',
+      minWidth: 80,
+    },
+    {
+      field: 'handlerName',
+      title: '处理器的名字',
+      minWidth: 180,
+    },
+    {
+      field: 'handlerParam',
+      title: '处理器的参数',
+      minWidth: 140,
+    },
+    {
+      field: 'executeIndex',
+      title: '第几次执行',
+      minWidth: 100,
+    },
+    {
+      field: 'beginTime',
+      title: '执行时间',
+      minWidth: 280,
+      formatter: ({ row }) => {
+        return `${formatDateTime(row.beginTime)} ~ ${formatDateTime(row.endTime)}`;
+      },
+    },
+    {
+      field: 'duration',
+      title: '执行时长',
+      minWidth: 120,
+      formatter: ({ row }) => {
+        return `${row.duration} 毫秒`;
+      },
+    },
+    {
+      field: 'status',
+      title: '任务状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_JOB_LOG_STATUS },
+      },
+    },
+    {
+      field: 'operation',
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      align: 'center',
+      cellRender: {
+        attrs: {
+          nameField: 'id',
+          nameTitle: '日志',
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+        options: [
+          {
+            code: 'detail',
+            text: '详细',
+            show: hasAccessByCodes(['infra:job:query']),
+          },
+        ],
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/infra/job/logger/index.vue b/apps/web-antd/src/views/infra/job/logger/index.vue
new file mode 100644
index 000000000..4b1698bf9
--- /dev/null
+++ b/apps/web-antd/src/views/infra/job/logger/index.vue
@@ -0,0 +1,100 @@
+<script lang="ts" setup>
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraJobLogApi } from '#/api/infra/job-log';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { Download } from '@vben/icons';
+import { Button } from 'ant-design-vue';
+import Detail from './modules/detail.vue';
+import { DocAlert } from '#/components/doc-alert';
+
+import { $t } from '#/locales';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { useRoute } from 'vue-router';
+import { exportJobLog, getJobLogPage } from '#/api/infra/job-log';
+import { downloadByData } from '#/utils/download';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+const { query } = useRoute();
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 导出表格 */
+async function onExport() {
+  const data = await exportJobLog(await gridApi.formApi.getValues());
+  downloadByData(data, '任务日志.xls');
+}
+
+/** 查看日志详情 */
+function onDetail(row: InfraJobLogApi.InfraJobLog) {
+  detailModalApi.setData({ id: row.id }).open();
+}
+
+/** 表格操作按钮的回调函数 */
+function onActionClick({
+  code,
+  row,
+}: OnActionClickParams<InfraJobLogApi.InfraJobLog>) {
+  switch (code) {
+    case 'detail': {
+      onDetail(row);
+      break;
+    }
+  }
+}
+
+// 获取表单schema并设置默认jobId
+const formSchema = useGridFormSchema();
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: formSchema,
+  },
+  gridOptions: {
+    columns: useGridColumns(onActionClick),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getJobLogPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            jobId: query.id,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<InfraJobLogApi.InfraJobLog>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <DocAlert title="定时任务" url="https://doc.iocoder.cn/job/" />
+    <DocAlert title="异步任务" url="https://doc.iocoder.cn/async-task/" />
+    <DocAlert title="消息队列" url="https://doc.iocoder.cn/message-queue/" />
+
+    <DetailModal />
+    <Grid table-title="任务日志列表">
+      <template #toolbar-tools>
+        <Button type="primary" class="ml-2" @click="onExport" v-access:code="['infra:job:export']">
+          <Download class="size-5" />
+          {{ $t('ui.actionTitle.export') }}
+        </Button>
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/infra/job/logger/modules/detail.vue b/apps/web-antd/src/views/infra/job/logger/modules/detail.vue
new file mode 100644
index 000000000..7caa255be
--- /dev/null
+++ b/apps/web-antd/src/views/infra/job/logger/modules/detail.vue
@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import type { InfraJobLogApi } from '#/api/infra/job-log';
+
+import { Descriptions } from 'ant-design-vue';
+import { DictTag } from '#/components/dict-tag';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '#/utils/dict';
+import { formatDateTime } from '@vben/utils';
+import { getJobLog } from '#/api/infra/job-log';
+import { ref } from 'vue';
+
+const formData = ref<InfraJobLogApi.InfraJobLog>();
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ id: number }>();
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getJobLog(data.id);
+    } finally {
+      modalApi.lock(false);
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="日志详情" class="w-1/2" :show-cancel-button="false" :show-confirm-button="false">
+    <Descriptions :column="1" bordered size="middle" class="mx-4" :label-style="{ width: '140px' }">
+      <Descriptions.Item label="日志编号">
+        {{ formData?.id }}
+      </Descriptions.Item>
+      <Descriptions.Item label="任务编号">
+        {{ formData?.jobId }}
+      </Descriptions.Item>
+      <Descriptions.Item label="处理器的名字">
+        {{ formData?.handlerName }}
+      </Descriptions.Item>
+      <Descriptions.Item label="处理器的参数">
+        {{ formData?.handlerParam }}
+      </Descriptions.Item>
+      <Descriptions.Item label="第几次执行">
+        {{ formData?.executeIndex }}
+      </Descriptions.Item>
+      <Descriptions.Item label="执行时间">
+        {{ formData?.beginTime ? formatDateTime(formData.beginTime) : '' }} ~
+        {{ formData?.endTime ? formatDateTime(formData.endTime) : '' }}
+      </Descriptions.Item>
+      <Descriptions.Item label="执行时长">
+        {{ formData?.duration ? formData.duration + ' 毫秒' : '' }}
+      </Descriptions.Item>
+      <Descriptions.Item label="任务状态">
+        <DictTag :type="DICT_TYPE.INFRA_JOB_LOG_STATUS" :value="formData?.status" />
+      </Descriptions.Item>
+      <Descriptions.Item label="执行结果">
+        {{ formData?.result }}
+      </Descriptions.Item>
+    </Descriptions>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/infra/job/modules/detail.vue b/apps/web-antd/src/views/infra/job/modules/detail.vue
new file mode 100644
index 000000000..3823664e2
--- /dev/null
+++ b/apps/web-antd/src/views/infra/job/modules/detail.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import type { InfraJobApi } from '#/api/infra/job';
+
+import { Descriptions, Timeline } from 'ant-design-vue';
+import { DictTag } from '#/components/dict-tag';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '#/utils/dict';
+import { formatDateTime } from '@vben/utils';
+import { getJob, getJobNextTimes } from '#/api/infra/job';
+import { ref } from 'vue';
+
+const formData = ref<InfraJobApi.InfraJob>(); // 任务详情
+const nextTimes = ref<Date[]>([]); // 下一次执行时间
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ id: number }>();
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getJob(data.id);
+      // 获取下一次执行时间
+      nextTimes.value = await getJobNextTimes(data.id);
+    } finally {
+      modalApi.lock(false);
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="任务详情" class="w-1/2" :show-cancel-button="false" :show-confirm-button="false">
+    <Descriptions :column="1" bordered size="middle" class="mx-4" :label-style="{ width: '140px' }">
+      <Descriptions.Item label="任务编号">
+        {{ formData?.id }}
+      </Descriptions.Item>
+      <Descriptions.Item label="任务名称">
+        {{ formData?.name }}
+      </Descriptions.Item>
+      <Descriptions.Item label="任务状态">
+        <DictTag :type="DICT_TYPE.INFRA_JOB_STATUS" :value="formData?.status" />
+      </Descriptions.Item>
+      <Descriptions.Item label="处理器的名字">
+        {{ formData?.handlerName }}
+      </Descriptions.Item>
+      <Descriptions.Item label="处理器的参数">
+        {{ formData?.handlerParam }}
+      </Descriptions.Item>
+      <Descriptions.Item label="Cron 表达式">
+        {{ formData?.cronExpression }}
+      </Descriptions.Item>
+      <Descriptions.Item label="重试次数">
+        {{ formData?.retryCount }}
+      </Descriptions.Item>
+      <Descriptions.Item label="重试间隔">
+        {{ formData?.retryInterval ? formData.retryInterval + ' 毫秒' : '无间隔' }}
+      </Descriptions.Item>
+      <Descriptions.Item label="监控超时时间">
+        {{ formData?.monitorTimeout && formData.monitorTimeout > 0 ? formData.monitorTimeout + ' 毫秒' : '未开启' }}
+      </Descriptions.Item>
+      <Descriptions.Item label="后续执行时间">
+        <Timeline class="h-[180px]">
+          <Timeline.Item v-for="(nextTime, index) in nextTimes" :key="index" color="blue">
+            第 {{ index + 1 }} 次：{{ formatDateTime(nextTime.toString()) }}
+          </Timeline.Item>
+        </Timeline>
+      </Descriptions.Item>
+    </Descriptions>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/infra/job/modules/form.vue b/apps/web-antd/src/views/infra/job/modules/form.vue
new file mode 100644
index 000000000..c9f72e1ec
--- /dev/null
+++ b/apps/web-antd/src/views/infra/job/modules/form.vue
@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+import type { InfraJobApi } from '#/api/infra/job';
+
+import { useVbenModal } from '@vben/common-ui';
+import { message } from 'ant-design-vue';
+
+import { $t } from '#/locales';
+import { computed, ref } from 'vue';
+import { useVbenForm } from '#/adapter/form';
+import { createJob, getJob, updateJob } from '#/api/infra/job';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<InfraJobApi.InfraJob>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['任务'])
+    : $t('ui.actionTitle.create', ['任务']);
+});
+
+const [Form, formApi] = useVbenForm({
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+  commonConfig: {
+    labelWidth: 140
+  }
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as InfraJobApi.InfraJob;
+    try {
+      await (formData.value?.id
+        ? updateJob(data)
+        : createJob(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success({
+        content: $t('ui.actionMessage.operationSuccess'),
+        key: 'action_process_msg',
+      });
+    } finally {
+      modalApi.lock(false);
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<InfraJobApi.InfraJob>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getJob(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.lock(false);
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template> 
diff --git a/packages/@core/base/icons/src/lucide.ts b/packages/@core/base/icons/src/lucide.ts
index 81225ba4b..a2e6da46a 100644
--- a/packages/@core/base/icons/src/lucide.ts
+++ b/packages/@core/base/icons/src/lucide.ts
@@ -67,4 +67,5 @@ export {
   X,
   Download,
   Upload,
+  History,
 } from 'lucide-vue-next';
diff --git a/packages/@core/base/shared/src/utils/date.ts b/packages/@core/base/shared/src/utils/date.ts
index 3736b9ad5..17e5848f3 100644
--- a/packages/@core/base/shared/src/utils/date.ts
+++ b/packages/@core/base/shared/src/utils/date.ts
@@ -1,6 +1,6 @@
 import dayjs from 'dayjs';
 
-export function formatDate(time: number | string, format = 'YYYY-MM-DD') {
+export function formatDate(time: number | string | Date, format = 'YYYY-MM-DD') {
   try {
     const date = dayjs(time);
     if (!date.isValid()) {
@@ -13,7 +13,7 @@ export function formatDate(time: number | string, format = 'YYYY-MM-DD') {
   }
 }
 
-export function formatDateTime(time: number | string) {
+export function formatDateTime(time: number | string | Date) {
   return formatDate(time, 'YYYY-MM-DD HH:mm:ss');
 }
 

From 6a76844bde6f6b14bd08459324cdaca25d5a6b73 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 7 Apr 2025 19:27:50 +0800
Subject: [PATCH 05/13] =?UTF-8?q?feat=EF=BC=9A=E5=AE=8C=E5=96=84=20file=20?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/views/infra/file/data.ts    | 17 +++-
 apps/web-antd/src/views/infra/file/index.vue  |  6 +-
 .../src/views/infra/file/modules/form.vue     | 81 ++++++-------------
 .../src/views/infra/fileConfig/data.ts        |  2 +-
 4 files changed, 45 insertions(+), 61 deletions(-)

diff --git a/apps/web-antd/src/views/infra/file/data.ts b/apps/web-antd/src/views/infra/file/data.ts
index cff729781..1f78d606c 100644
--- a/apps/web-antd/src/views/infra/file/data.ts
+++ b/apps/web-antd/src/views/infra/file/data.ts
@@ -1,4 +1,4 @@
-import { type VbenFormSchema, z } from '#/adapter/form';
+import { type VbenFormSchema } from '#/adapter/form';
 import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { InfraFileApi } from '#/api/infra/file';
 
@@ -7,6 +7,21 @@ import { getRangePickerDefaultProps } from '#/utils/date';
 
 const { hasAccessByCodes } = useAccess();
 
+/** 表单的字段 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'file',
+      label: '文件上传',
+      component: 'Upload',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请选择要上传的文件',
+      },
+    }
+  ];
+}
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
diff --git a/apps/web-antd/src/views/infra/file/index.vue b/apps/web-antd/src/views/infra/file/index.vue
index 8491ce700..aef029f58 100644
--- a/apps/web-antd/src/views/infra/file/index.vue
+++ b/apps/web-antd/src/views/infra/file/index.vue
@@ -4,7 +4,7 @@ import type { InfraFileApi } from '#/api/infra/file';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 import { Button, message, Image } from 'ant-design-vue';
-import { Plus } from '@vben/icons';
+import { Upload } from '@vben/icons';
 import Form from './modules/form.vue';
 
 import { $t } from '#/locales';
@@ -123,8 +123,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <Grid table-title="文件列表">
       <template #toolbar-tools>
         <Button type="primary" @click="onUpload">
-          <Plus class="size-5" />
-          {{ $t('ui.actionTitle.upload', ['文件']) }}
+          <Upload class="size-5" />
+          上传图片
         </Button>
       </template>
       <template #file-content="{ row }">
diff --git a/apps/web-antd/src/views/infra/file/modules/form.vue b/apps/web-antd/src/views/infra/file/modules/form.vue
index 78d9ca6b9..1b850c7b7 100644
--- a/apps/web-antd/src/views/infra/file/modules/form.vue
+++ b/apps/web-antd/src/views/infra/file/modules/form.vue
@@ -1,96 +1,65 @@
 <script lang="ts" setup>
-import type { InfraFileApi } from '#/api/infra/file';
+import type { FileType } from 'ant-design-vue/es/upload/interface';
 
 import { useVbenModal } from '@vben/common-ui';
 import { message } from 'ant-design-vue';
+import { Upload, Button } from 'ant-design-vue';
 
-import { computed, ref } from 'vue';
+import { $t } from '#/locales';
 import { useVbenForm } from '#/adapter/form';
 import { uploadFile } from '#/api/infra/file';
-import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
-const fileList = ref<any[]>([]);
-const uploadData = ref({ path: '' });
 
-// 表单内容
-const formSchema = [
-  {
-    fieldName: 'file',
-    component: 'Upload',
-    label: '文件上传',
-    componentProps: {
-      fileList: fileList.value,
-      name: 'file',
-      maxCount: 1,
-      accept: '.jpg,.png,.gif,.pdf,.doc,.docx,.xls,.xlsx',
-      beforeUpload: (file: File) => {
-        uploadData.value.path = file.name;
-        return false; // 阻止自动上传
-      },
-      onChange: ({ fileList }: any) => {
-        fileList.value = fileList;
-      },
-    },
-    rules: 'required',
-  },
-];
-
-// 表单实例
 const [Form, formApi] = useVbenForm({
   layout: 'horizontal',
-  schema: formSchema,
+  schema: useFormSchema(),
   showDefaultActions: false,
 });
 
-// 模态框实例
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
-    if (fileList.value.length === 0) {
-      message.error('请上传文件');
-      return;
-    }
-
     modalApi.lock();
     // 提交表单
+    const data = await formApi.getValues();
     try {
-      const formData = new FormData();
-      formData.append('file', fileList.value[0].originFileObj);
-      formData.append('path', uploadData.value.path);
-
-      await uploadFile(formData);
-
+      await uploadFile(data);
       // 关闭并提示
       await modalApi.close();
       emit('success');
       message.success({
-        content: $t('ui.actionMessage.uploadSuccess'),
+        content: $t('ui.actionMessage.operationSuccess'),
         key: 'action_process_msg',
       });
     } finally {
       modalApi.lock(false);
-      fileList.value = [];
     }
-  },
-  async onOpenChange(isOpen: boolean) {
-    if (!isOpen) {
-      return;
-    }
-    // 重置表单
-    fileList.value = [];
-    uploadData.value = { path: '' };
-  },
+  }
 });
 
-const getTitle = computed(() => $t('ui.actionTitle.upload', ['文件']));
+/** 上传前 */
+function beforeUpload(file: FileType) {
+  formApi.setFieldValue('file', file);
+  return false;
+}
 </script>
 
 <template>
-  <Modal :title="getTitle">
-    <Form class="mx-4" />
+  <Modal title="上传图片">
+    <Form class="mx-4">
+      <template #file>
+        <div class="w-full">
+          <Upload :max-count="1" accept=".jpg,.png,.gif,.webp" :beforeUpload="beforeUpload">
+            <Button type="primary"> 选择图片 </Button>
+          </Upload>
+        </div>
+      </template>
+    </Form>
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/infra/fileConfig/data.ts b/apps/web-antd/src/views/infra/fileConfig/data.ts
index 35131835c..0dd41a075 100644
--- a/apps/web-antd/src/views/infra/fileConfig/data.ts
+++ b/apps/web-antd/src/views/infra/fileConfig/data.ts
@@ -1,4 +1,4 @@
-import { type VbenFormSchema, z } from '#/adapter/form';
+import type { VbenFormSchema } from '#/adapter/form';
 import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { InfraFileConfigApi } from '#/api/infra/file-config';
 

From 64331fb4ac18730088a08bf5d2c713f71c5c68e0 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 7 Apr 2025 19:43:41 +0800
Subject: [PATCH 06/13] =?UTF-8?q?feat=EF=BC=9A=E4=BC=98=E5=8C=96=20file=20?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=EF=BC=8C=E6=94=AF=E6=8C=81=E6=8B=96=E6=8B=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/views/infra/file/data.ts    |  2 +-
 .../src/views/infra/file/modules/form.vue     | 26 +++++++++++++++----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/apps/web-antd/src/views/infra/file/data.ts b/apps/web-antd/src/views/infra/file/data.ts
index 1f78d606c..7308cb29f 100644
--- a/apps/web-antd/src/views/infra/file/data.ts
+++ b/apps/web-antd/src/views/infra/file/data.ts
@@ -14,10 +14,10 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'file',
       label: '文件上传',
       component: 'Upload',
-      rules: 'required',
       componentProps: {
         placeholder: '请选择要上传的文件',
       },
+      rules: 'required',
     }
   ];
 }
diff --git a/apps/web-antd/src/views/infra/file/modules/form.vue b/apps/web-antd/src/views/infra/file/modules/form.vue
index 1b850c7b7..10dc58857 100644
--- a/apps/web-antd/src/views/infra/file/modules/form.vue
+++ b/apps/web-antd/src/views/infra/file/modules/form.vue
@@ -3,7 +3,7 @@ import type { FileType } from 'ant-design-vue/es/upload/interface';
 
 import { useVbenModal } from '@vben/common-ui';
 import { message } from 'ant-design-vue';
-import { Upload, Button } from 'ant-design-vue';
+import { Upload } from 'ant-design-vue';
 
 import { $t } from '#/locales';
 import { useVbenForm } from '#/adapter/form';
@@ -15,8 +15,11 @@ const emit = defineEmits(['success']);
 
 const [Form, formApi] = useVbenForm({
   layout: 'horizontal',
-  schema: useFormSchema(),
+  schema: useFormSchema().map(item => ({ ...item, label: '' })), // 去除label
   showDefaultActions: false,
+  commonConfig: {
+    hideLabel: true,
+  }
 });
 
 const [Modal, modalApi] = useVbenModal({
@@ -55,9 +58,22 @@ function beforeUpload(file: FileType) {
     <Form class="mx-4">
       <template #file>
         <div class="w-full">
-          <Upload :max-count="1" accept=".jpg,.png,.gif,.webp" :beforeUpload="beforeUpload">
-            <Button type="primary"> 选择图片 </Button>
-          </Upload>
+          <!-- 上传区域 -->
+          <Upload.Dragger
+            name="file"
+            :max-count="1"
+            accept=".jpg,.png,.gif,.webp"
+            :beforeUpload="beforeUpload"
+            list-type="picture-card"
+          >
+            <p class="ant-upload-drag-icon">
+              <span class="icon-[ant-design--inbox-outlined] text-2xl"></span>
+            </p>
+            <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
+            <p class="ant-upload-hint">
+              支持 .jpg、.png、.gif、.webp 格式图片文件
+            </p>
+          </Upload.Dragger>
         </div>
       </template>
     </Form>

From 30a3157e7bc8364a07414178126762a8fe148cf4 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 7 Apr 2025 19:48:28 +0800
Subject: [PATCH 07/13] =?UTF-8?q?refactor=EF=BC=9A=E6=9F=A5=E7=9C=8B=20vie?=
 =?UTF-8?q?w=EF=BC=8C=E7=BB=9F=E4=B8=80=E6=88=90=E8=AF=A6=E6=83=85=20detai?=
 =?UTF-8?q?l?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/router/routes/modules/infra.ts         | 18 ++++++++++++++++++
 .../src/views/infra/apiAccessLog/data.ts       |  2 +-
 .../src/views/infra/apiAccessLog/index.vue     |  6 +++---
 .../src/views/infra/apiErrorLog/data.ts        |  2 +-
 .../src/views/infra/apiErrorLog/index.vue      |  8 ++++----
 apps/web-antd/src/views/infra/job/data.ts      |  2 +-
 apps/web-antd/src/views/infra/job/index.vue    |  6 +++---
 .../web-antd/src/views/system/loginlog/data.ts |  2 +-
 .../src/views/system/loginlog/index.vue        |  6 +++---
 .../web-antd/src/views/system/mail/log/data.ts |  2 +-
 .../src/views/system/mail/log/index.vue        |  6 +++---
 .../src/views/system/notify/message/data.ts    |  4 ++--
 .../src/views/system/notify/message/index.vue  |  6 +++---
 .../src/views/system/notify/my/data.ts         |  4 ++--
 .../src/views/system/notify/my/index.vue       |  6 +++---
 .../src/views/system/operatelog/data.ts        |  2 +-
 .../src/views/system/operatelog/index.vue      |  6 +++---
 apps/web-antd/src/views/system/sms/log/data.ts |  4 ++--
 .../src/views/system/sms/log/index.vue         |  6 +++---
 .../src/views/system/social/user/data.ts       |  2 +-
 .../src/views/system/social/user/index.vue     |  6 +++---
 21 files changed, 62 insertions(+), 44 deletions(-)
 create mode 100644 apps/web-antd/src/router/routes/modules/infra.ts

diff --git a/apps/web-antd/src/router/routes/modules/infra.ts b/apps/web-antd/src/router/routes/modules/infra.ts
new file mode 100644
index 000000000..510bf8878
--- /dev/null
+++ b/apps/web-antd/src/router/routes/modules/infra.ts
@@ -0,0 +1,18 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/infra/job/job-log',
+    component: () => import('#/views/infra/job/logger/index.vue'),
+    name: 'InfraJobLog',
+    meta: {
+      title: '调度日志',
+      icon: 'ant-design:history-outlined',
+      activePath: '/infra/job',
+      keepAlive: false,
+      hideInMenu: true,
+    }
+  }
+];
+
+export default routes;
diff --git a/apps/web-antd/src/views/infra/apiAccessLog/data.ts b/apps/web-antd/src/views/infra/apiAccessLog/data.ts
index a4879e1e5..21c6bd43d 100644
--- a/apps/web-antd/src/views/infra/apiAccessLog/data.ts
+++ b/apps/web-antd/src/views/infra/apiAccessLog/data.ts
@@ -164,7 +164,7 @@ export function useGridColumns<T = InfraApiAccessLogApi.SystemApiAccessLog>(
         name: 'CellOperation',
         options: [
           {
-            code: 'view',
+            code: 'detail',
             text: '详情',
             show: hasAccessByCodes(['infra:api-access-log:query']),
           },
diff --git a/apps/web-antd/src/views/infra/apiAccessLog/index.vue b/apps/web-antd/src/views/infra/apiAccessLog/index.vue
index 6c3c11c18..ea6846962 100644
--- a/apps/web-antd/src/views/infra/apiAccessLog/index.vue
+++ b/apps/web-antd/src/views/infra/apiAccessLog/index.vue
@@ -32,7 +32,7 @@ async function onExport() {
 }
 
 /** 查看 API 访问日志详情 */
-function onView(row: InfraApiAccessLogApi.SystemApiAccessLog) {
+function onDetail(row: InfraApiAccessLogApi.SystemApiAccessLog) {
   detailModalApi.setData(row).open();
 }
 
@@ -42,8 +42,8 @@ function onActionClick({
   row,
 }: OnActionClickParams<InfraApiAccessLogApi.SystemApiAccessLog>) {
   switch (code) {
-    case 'view': {
-      onView(row);
+    case 'detail': {
+      onDetail(row);
       break;
     }
   }
diff --git a/apps/web-antd/src/views/infra/apiErrorLog/data.ts b/apps/web-antd/src/views/infra/apiErrorLog/data.ts
index 62460520c..af766c81a 100644
--- a/apps/web-antd/src/views/infra/apiErrorLog/data.ts
+++ b/apps/web-antd/src/views/infra/apiErrorLog/data.ts
@@ -137,7 +137,7 @@ export function useGridColumns<T = InfraApiErrorLogApi.SystemApiErrorLog>(
         name: 'CellOperation',
         options: [
           {
-            code: 'view',
+            code: 'detail',
             text: '详情',
             show: hasAccessByCodes(['infra:api-error-log:query']),
           },
diff --git a/apps/web-antd/src/views/infra/apiErrorLog/index.vue b/apps/web-antd/src/views/infra/apiErrorLog/index.vue
index ea390b4c1..9d960275f 100644
--- a/apps/web-antd/src/views/infra/apiErrorLog/index.vue
+++ b/apps/web-antd/src/views/infra/apiErrorLog/index.vue
@@ -33,7 +33,7 @@ async function onExport() {
 }
 
 /** 查看 API 错误日志详情 */
-function onView(row: InfraApiErrorLogApi.SystemApiErrorLog) {
+function onDetail(row: InfraApiErrorLogApi.SystemApiErrorLog) {
   detailModalApi.setData(row).open();
 }
 
@@ -49,7 +49,7 @@ async function onProcess(id: number, processStatus: number) {
         content: $t('ui.actionMessage.operationSuccess'),
         key: 'action_process_msg',
       });
-      await onRefresh();
+      onRefresh();
     }
   });
 }
@@ -60,8 +60,8 @@ function onActionClick({
   row,
 }: OnActionClickParams<InfraApiErrorLogApi.SystemApiErrorLog>) {
   switch (code) {
-    case 'view': {
-      onView(row);
+    case 'detail': {
+      onDetail(row);
       break;
     }
     case 'done': {
diff --git a/apps/web-antd/src/views/infra/job/data.ts b/apps/web-antd/src/views/infra/job/data.ts
index af1bde63a..8047b3b60 100644
--- a/apps/web-antd/src/views/infra/job/data.ts
+++ b/apps/web-antd/src/views/infra/job/data.ts
@@ -202,7 +202,7 @@ export function useGridColumns<T = InfraJobApi.InfraJob>(
           },
           // TODO @芋艿：增加一个“更多”选项
           {
-            code: 'view',
+            code: 'detail',
             text: '详细',
             show: hasAccessByCodes(['infra:job:query']),
           },
diff --git a/apps/web-antd/src/views/infra/job/index.vue b/apps/web-antd/src/views/infra/job/index.vue
index 4299daec8..3f812e5a9 100644
--- a/apps/web-antd/src/views/infra/job/index.vue
+++ b/apps/web-antd/src/views/infra/job/index.vue
@@ -53,7 +53,7 @@ function onEdit(row: InfraJobApi.InfraJob) {
 }
 
 /** 查看任务详情 */
-function onView(row: InfraJobApi.InfraJob) {
+function onDetail(row: InfraJobApi.InfraJob) {
   detailModalApi.setData({ id: row.id }).open();
 }
 
@@ -139,8 +139,8 @@ function onActionClick({
       onTrigger(row);
       break;
     }
-    case 'view': {
-      onView(row);
+    case 'detail': {
+      onDetail(row);
       break;
     }
     case 'log': {
diff --git a/apps/web-antd/src/views/system/loginlog/data.ts b/apps/web-antd/src/views/system/loginlog/data.ts
index 24599b8fe..1019e4597 100644
--- a/apps/web-antd/src/views/system/loginlog/data.ts
+++ b/apps/web-antd/src/views/system/loginlog/data.ts
@@ -105,7 +105,7 @@ export function useGridColumns<T = SystemLoginLogApi.SystemLoginLog>(
         name: 'CellOperation',
         options: [
           {
-            code: 'view',
+            code: 'detail',
             text: '详情',
             show: hasAccessByCodes(['system:login-log:query']),
           },
diff --git a/apps/web-antd/src/views/system/loginlog/index.vue b/apps/web-antd/src/views/system/loginlog/index.vue
index 4cd37bc44..abb2be6f2 100644
--- a/apps/web-antd/src/views/system/loginlog/index.vue
+++ b/apps/web-antd/src/views/system/loginlog/index.vue
@@ -32,7 +32,7 @@ async function onExport() {
 }
 
 /** 查看登录日志详情 */
-function onView(row: SystemLoginLogApi.SystemLoginLog) {
+function onDetail(row: SystemLoginLogApi.SystemLoginLog) {
   detailModalApi.setData(row).open();
 }
 
@@ -42,8 +42,8 @@ function onActionClick({
   row,
 }: OnActionClickParams<SystemLoginLogApi.SystemLoginLog>) {
   switch (code) {
-    case 'view': {
-      onView(row);
+    case 'detail': {
+      onDetail(row);
       break;
     }
   }
diff --git a/apps/web-antd/src/views/system/mail/log/data.ts b/apps/web-antd/src/views/system/mail/log/data.ts
index 9e0520647..63a124352 100644
--- a/apps/web-antd/src/views/system/mail/log/data.ts
+++ b/apps/web-antd/src/views/system/mail/log/data.ts
@@ -139,7 +139,7 @@ export function useGridColumns<T = SystemMailLogApi.SystemMailLog>(
         name: 'CellOperation',
         options: [
           {
-            code: 'view',
+            code: 'detail',
             text: '查看',
             show: hasAccessByCodes(['system:mail-log:query']),
           }
diff --git a/apps/web-antd/src/views/system/mail/log/index.vue b/apps/web-antd/src/views/system/mail/log/index.vue
index 28e9aebd9..51f683f7d 100644
--- a/apps/web-antd/src/views/system/mail/log/index.vue
+++ b/apps/web-antd/src/views/system/mail/log/index.vue
@@ -22,7 +22,7 @@ function onRefresh() {
 }
 
 /** 查看邮件日志 */
-function onView(row: SystemMailLogApi.SystemMailLog) {
+function onDetail(row: SystemMailLogApi.SystemMailLog) {
   detailModalApi.setData(row).open();
 }
 
@@ -32,8 +32,8 @@ function onActionClick({
   row,
 }: OnActionClickParams<SystemMailLogApi.SystemMailLog>) {
   switch (code) {
-    case 'view': {
-      onView(row);
+    case 'detail': {
+      onDetail(row);
       break;
     }
   }
diff --git a/apps/web-antd/src/views/system/notify/message/data.ts b/apps/web-antd/src/views/system/notify/message/data.ts
index 187bfc869..640f4761d 100644
--- a/apps/web-antd/src/views/system/notify/message/data.ts
+++ b/apps/web-antd/src/views/system/notify/message/data.ts
@@ -154,8 +154,8 @@ export function useGridColumns<T = SystemNotifyMessageApi.SystemNotifyMessage>(
         name: 'CellOperation',
         options: [
           {
-            code: 'view',
-            text: '查看',
+            code: 'detail',
+            text: '详情',
             show: hasAccessByCodes(['system:notify-message:query']),
           },
         ],
diff --git a/apps/web-antd/src/views/system/notify/message/index.vue b/apps/web-antd/src/views/system/notify/message/index.vue
index ea60a1919..568f2e8e9 100644
--- a/apps/web-antd/src/views/system/notify/message/index.vue
+++ b/apps/web-antd/src/views/system/notify/message/index.vue
@@ -22,7 +22,7 @@ function onRefresh() {
 }
 
 /** 查看站内信详情 */
-function onView(row: SystemNotifyMessageApi.SystemNotifyMessage) {
+function onDetail(row: SystemNotifyMessageApi.SystemNotifyMessage) {
   detailModalApi.setData(row).open();
 }
 
@@ -32,8 +32,8 @@ function onActionClick({
   row,
 }: OnActionClickParams<SystemNotifyMessageApi.SystemNotifyMessage>) {
   switch (code) {
-    case 'view': {
-      onView(row);
+    case 'detail': {
+      onDetail(row);
       break;
     }
   }
diff --git a/apps/web-antd/src/views/system/notify/my/data.ts b/apps/web-antd/src/views/system/notify/my/data.ts
index aeb10d0f1..9172b35fd 100644
--- a/apps/web-antd/src/views/system/notify/my/data.ts
+++ b/apps/web-antd/src/views/system/notify/my/data.ts
@@ -93,8 +93,8 @@ export function useGridColumns<T = SystemNotifyMessageApi.SystemNotifyMessage>(
         name: 'CellOperation',
         options: [
           {
-            code: 'view',
-            text: '查看',
+            code: 'detail',
+            text: '详情',
             show: hasAccessByCodes(['system:notify-message:query']),
           },
         ],
diff --git a/apps/web-antd/src/views/system/notify/my/index.vue b/apps/web-antd/src/views/system/notify/my/index.vue
index 8b1f1c9ee..2ffb9955c 100644
--- a/apps/web-antd/src/views/system/notify/my/index.vue
+++ b/apps/web-antd/src/views/system/notify/my/index.vue
@@ -32,7 +32,7 @@ function onRefresh() {
 }
 
 /** 查看站内信详情 */
-function onView(row: SystemNotifyMessageApi.SystemNotifyMessage) {
+function onDetail(row: SystemNotifyMessageApi.SystemNotifyMessage) {
   // 标记已读
   if (!row.readStatus) {
     handleReadOne(row.id);
@@ -102,8 +102,8 @@ function onActionClick({
   row,
 }: OnActionClickParams<SystemNotifyMessageApi.SystemNotifyMessage>) {
   switch (code) {
-    case 'view': {
-      onView(row);
+    case 'detail': {
+      onDetail(row);
       break;
     }
   }
diff --git a/apps/web-antd/src/views/system/operatelog/data.ts b/apps/web-antd/src/views/system/operatelog/data.ts
index c5712e753..f314f9d54 100644
--- a/apps/web-antd/src/views/system/operatelog/data.ts
+++ b/apps/web-antd/src/views/system/operatelog/data.ts
@@ -134,7 +134,7 @@ export function useGridColumns<T = SystemOperateLogApi.SystemOperateLog>(
         name: 'CellOperation',
         options: [
           {
-            code: 'view',
+            code: 'detail',
             text: '详情',
             show: hasAccessByCodes(['system:operate-log:query']),
           },
diff --git a/apps/web-antd/src/views/system/operatelog/index.vue b/apps/web-antd/src/views/system/operatelog/index.vue
index 80dc5cfe7..6d28793e3 100644
--- a/apps/web-antd/src/views/system/operatelog/index.vue
+++ b/apps/web-antd/src/views/system/operatelog/index.vue
@@ -32,7 +32,7 @@ async function onExport() {
 }
 
 /** 查看操作日志详情 */
-function onView(row: SystemOperateLogApi.SystemOperateLog) {
+function onDetail(row: SystemOperateLogApi.SystemOperateLog) {
   detailModalApi.setData(row).open();
 }
 
@@ -42,8 +42,8 @@ function onActionClick({
   row,
 }: OnActionClickParams<SystemOperateLogApi.SystemOperateLog>) {
   switch (code) {
-    case 'view': {
-      onView(row);
+    case 'detail': {
+      onDetail(row);
       break;
     }
   }
diff --git a/apps/web-antd/src/views/system/sms/log/data.ts b/apps/web-antd/src/views/system/sms/log/data.ts
index 6bbab713c..0ab18ce34 100644
--- a/apps/web-antd/src/views/system/sms/log/data.ts
+++ b/apps/web-antd/src/views/system/sms/log/data.ts
@@ -177,8 +177,8 @@ export function useGridColumns<T = SystemSmsLogApi.SystemSmsLog>(
         name: 'CellOperation',
         options: [
           {
-            code: 'view',
-            text: '查看',
+            code: 'detail',
+            text: '详情',
             show: hasAccessByCodes(['system:sms-log:query']),
           },
         ],
diff --git a/apps/web-antd/src/views/system/sms/log/index.vue b/apps/web-antd/src/views/system/sms/log/index.vue
index 3380fe567..f41fff610 100644
--- a/apps/web-antd/src/views/system/sms/log/index.vue
+++ b/apps/web-antd/src/views/system/sms/log/index.vue
@@ -32,7 +32,7 @@ async function onExport() {
 }
 
 /** 查看短信日志详情 */
-function onView(row: SystemSmsLogApi.SystemSmsLog) {
+function onDetail(row: SystemSmsLogApi.SystemSmsLog) {
   detailModalApi.setData(row).open();
 }
 
@@ -42,8 +42,8 @@ function onActionClick({
   row,
 }: OnActionClickParams<SystemSmsLogApi.SystemSmsLog>) {
   switch (code) {
-    case 'view': {
-      onView(row);
+    case 'detail': {
+      onDetail(row);
       break;
     }
   }
diff --git a/apps/web-antd/src/views/system/social/user/data.ts b/apps/web-antd/src/views/system/social/user/data.ts
index 9e7b4e3c9..ddaeef05d 100644
--- a/apps/web-antd/src/views/system/social/user/data.ts
+++ b/apps/web-antd/src/views/system/social/user/data.ts
@@ -110,7 +110,7 @@ export function useGridColumns<T = SystemSocialUserApi.SystemSocialUser>(
         name: 'CellOperation',
         options: [
           {
-            code: 'view',
+            code: 'detail',
             text: '详情',
             show: hasAccessByCodes(['system:social-user:query']),
           },
diff --git a/apps/web-antd/src/views/system/social/user/index.vue b/apps/web-antd/src/views/system/social/user/index.vue
index 8d8a5ba87..247bf0276 100644
--- a/apps/web-antd/src/views/system/social/user/index.vue
+++ b/apps/web-antd/src/views/system/social/user/index.vue
@@ -21,7 +21,7 @@ function onRefresh() {
 }
 
 /** 查看详情 */
-function onView(row: SystemSocialUserApi.SystemSocialUser) {
+function onDetail(row: SystemSocialUserApi.SystemSocialUser) {
   detailModalApi.setData(row).open();
 }
 
@@ -31,8 +31,8 @@ function onActionClick({
   row,
 }: OnActionClickParams<SystemSocialUserApi.SystemSocialUser>) {
   switch (code) {
-    case 'view': {
-      onView(row);
+    case 'detail': {
+      onDetail(row);
       break;
     }
   }

From 144a2f1dc9bd1c6d0e6c93746377bbb12649b6eb Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 7 Apr 2025 22:00:14 +0800
Subject: [PATCH 08/13] =?UTF-8?q?feat=EF=BC=9A=E5=A2=9E=E5=8A=A0=20redis?=
 =?UTF-8?q?=20=E7=9B=91=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/infra/redis/index.ts    | 188 ++++++++++++++++++
 apps/web-antd/src/views/infra/job/index.vue   |   3 +-
 apps/web-antd/src/views/infra/redis/index.vue |  49 +++++
 .../views/infra/redis/modules/commands.vue    |  98 +++++++++
 .../src/views/infra/redis/modules/info.vue    |  51 +++++
 .../src/views/infra/redis/modules/memory.vue  | 132 ++++++++++++
 .../web-antd/src/views/infra/server/index.vue |   2 +-
 .../effects/plugins/src/echarts/echarts.ts    |   5 +-
 8 files changed, 524 insertions(+), 4 deletions(-)
 create mode 100644 apps/web-antd/src/api/infra/redis/index.ts
 create mode 100644 apps/web-antd/src/views/infra/redis/index.vue
 create mode 100644 apps/web-antd/src/views/infra/redis/modules/commands.vue
 create mode 100644 apps/web-antd/src/views/infra/redis/modules/info.vue
 create mode 100644 apps/web-antd/src/views/infra/redis/modules/memory.vue

diff --git a/apps/web-antd/src/api/infra/redis/index.ts b/apps/web-antd/src/api/infra/redis/index.ts
new file mode 100644
index 000000000..6a2202833
--- /dev/null
+++ b/apps/web-antd/src/api/infra/redis/index.ts
@@ -0,0 +1,188 @@
+import { requestClient } from '#/api/request';
+
+export namespace InfraRedisApi {
+  /** Redis 监控信息 */
+  export interface InfraRedisMonitorInfo {
+    info: InfraRedisInfo;
+    dbSize: number;
+    commandStats: InfraRedisCommandStats[];
+  }
+
+  /** Redis 信息 */
+  export interface InfraRedisInfo {
+    io_threaded_reads_processed: string;
+    tracking_clients: string;
+    uptime_in_seconds: string;
+    cluster_connections: string;
+    current_cow_size: string;
+    maxmemory_human: string;
+    aof_last_cow_size: string;
+    master_replid2: string;
+    mem_replication_backlog: string;
+    aof_rewrite_scheduled: string;
+    total_net_input_bytes: string;
+    rss_overhead_ratio: string;
+    hz: string;
+    current_cow_size_age: string;
+    redis_build_id: string;
+    errorstat_BUSYGROUP: string;
+    aof_last_bgrewrite_status: string;
+    multiplexing_api: string;
+    client_recent_max_output_buffer: string;
+    allocator_resident: string;
+    mem_fragmentation_bytes: string;
+    aof_current_size: string;
+    repl_backlog_first_byte_offset: string;
+    tracking_total_prefixes: string;
+    redis_mode: string;
+    redis_git_dirty: string;
+    aof_delayed_fsync: string;
+    allocator_rss_bytes: string;
+    repl_backlog_histlen: string;
+    io_threads_active: string;
+    rss_overhead_bytes: string;
+    total_system_memory: string;
+    loading: string;
+    evicted_keys: string;
+    maxclients: string;
+    cluster_enabled: string;
+    redis_version: string;
+    repl_backlog_active: string;
+    mem_aof_buffer: string;
+    allocator_frag_bytes: string;
+    io_threaded_writes_processed: string;
+    instantaneous_ops_per_sec: string;
+    used_memory_human: string;
+    total_error_replies: string;
+    role: string;
+    maxmemory: string;
+    used_memory_lua: string;
+    rdb_current_bgsave_time_sec: string;
+    used_memory_startup: string;
+    used_cpu_sys_main_thread: string;
+    lazyfree_pending_objects: string;
+    aof_pending_bio_fsync: string;
+    used_memory_dataset_perc: string;
+    allocator_frag_ratio: string;
+    arch_bits: string;
+    used_cpu_user_main_thread: string;
+    mem_clients_normal: string;
+    expired_time_cap_reached_count: string;
+    unexpected_error_replies: string;
+    mem_fragmentation_ratio: string;
+    aof_last_rewrite_time_sec: string;
+    master_replid: string;
+    aof_rewrite_in_progress: string;
+    lru_clock: string;
+    maxmemory_policy: string;
+    run_id: string;
+    latest_fork_usec: string;
+    tracking_total_items: string;
+    total_commands_processed: string;
+    expired_keys: string;
+    errorstat_ERR: string;
+    used_memory: string;
+    module_fork_in_progress: string;
+    errorstat_WRONGPASS: string;
+    aof_buffer_length: string;
+    dump_payload_sanitizations: string;
+    mem_clients_slaves: string;
+    keyspace_misses: string;
+    server_time_usec: string;
+    executable: string;
+    lazyfreed_objects: string;
+    db0: string;
+    used_memory_peak_human: string;
+    keyspace_hits: string;
+    rdb_last_cow_size: string;
+    aof_pending_rewrite: string;
+    used_memory_overhead: string;
+    active_defrag_hits: string;
+    tcp_port: string;
+    uptime_in_days: string;
+    used_memory_peak_perc: string;
+    current_save_keys_processed: string;
+    blocked_clients: string;
+    total_reads_processed: string;
+    expire_cycle_cpu_milliseconds: string;
+    sync_partial_err: string;
+    used_memory_scripts_human: string;
+    aof_current_rewrite_time_sec: string;
+    aof_enabled: string;
+    process_supervised: string;
+    master_repl_offset: string;
+    used_memory_dataset: string;
+    used_cpu_user: string;
+    rdb_last_bgsave_status: string;
+    tracking_total_keys: string;
+    atomicvar_api: string;
+    allocator_rss_ratio: string;
+    client_recent_max_input_buffer: string;
+    clients_in_timeout_table: string;
+    aof_last_write_status: string;
+    mem_allocator: string;
+    used_memory_scripts: string;
+    used_memory_peak: string;
+    process_id: string;
+    master_failover_state: string;
+    errorstat_NOAUTH: string;
+    used_cpu_sys: string;
+    repl_backlog_size: string;
+    connected_slaves: string;
+    current_save_keys_total: string;
+    gcc_version: string;
+    total_system_memory_human: string;
+    sync_full: string;
+    connected_clients: string;
+    module_fork_last_cow_size: string;
+    total_writes_processed: string;
+    allocator_active: string;
+    total_net_output_bytes: string;
+    pubsub_channels: string;
+    current_fork_perc: string;
+    active_defrag_key_hits: string;
+    rdb_changes_since_last_save: string;
+    instantaneous_input_kbps: string;
+    used_memory_rss_human: string;
+    configured_hz: string;
+    expired_stale_perc: string;
+    active_defrag_misses: string;
+    used_cpu_sys_children: string;
+    number_of_cached_scripts: string;
+    sync_partial_ok: string;
+    used_memory_lua_human: string;
+    rdb_last_save_time: string;
+    pubsub_patterns: string;
+    slave_expires_tracked_keys: string;
+    redis_git_sha1: string;
+    used_memory_rss: string;
+    rdb_last_bgsave_time_sec: string;
+    os: string;
+    mem_not_counted_for_evict: string;
+    active_defrag_running: string;
+    rejected_connections: string;
+    aof_rewrite_buffer_length: string;
+    total_forks: string;
+    active_defrag_key_misses: string;
+    allocator_allocated: string;
+    aof_base_size: string;
+    instantaneous_output_kbps: string;
+    second_repl_offset: string;
+    rdb_bgsave_in_progress: string;
+    used_cpu_user_children: string;
+    total_connections_received: string;
+    migrate_cached_sockets: string;
+  }
+
+  /** Redis 命令统计 */
+  export interface InfraRedisCommandStats {
+    command: string;
+    calls: number;
+    usec: number;
+  }
+}
+
+/** 获取 Redis 监控信息 */
+export function getRedisMonitorInfo() {
+  return requestClient.get<InfraRedisApi.InfraRedisMonitorInfo>('/infra/redis/get-monitor-info');
+}
diff --git a/apps/web-antd/src/views/infra/job/index.vue b/apps/web-antd/src/views/infra/job/index.vue
index 3f812e5a9..4aa5fe49b 100644
--- a/apps/web-antd/src/views/infra/job/index.vue
+++ b/apps/web-antd/src/views/infra/job/index.vue
@@ -12,12 +12,11 @@ import { DocAlert } from '#/components/doc-alert';
 import { $t } from '#/locales';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { useRouter } from 'vue-router';
-import {InfraApiErrorLogProcessStatusEnum, InfraJobStatusEnum} from '#/utils/constants';
+import { InfraJobStatusEnum} from '#/utils/constants';
 import { deleteJob, exportJob, getJobPage, runJob, updateJobStatus } from '#/api/infra/job';
 import { downloadByData } from '#/utils/download';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import {updateApiErrorLogStatus} from '#/api/infra/api-error-log';
 
 const { push } = useRouter();
 
diff --git a/apps/web-antd/src/views/infra/redis/index.vue b/apps/web-antd/src/views/infra/redis/index.vue
new file mode 100644
index 000000000..e69aaf355
--- /dev/null
+++ b/apps/web-antd/src/views/infra/redis/index.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import type { InfraRedisApi } from '#/api/infra/redis';
+
+import { Card } from 'ant-design-vue';
+import { Page } from '@vben/common-ui';
+import Memory from './modules/memory.vue';
+import Commands from './modules/commands.vue';
+import Info from './modules/info.vue';
+import { DocAlert } from '#/components/doc-alert';
+
+import { onMounted, ref } from 'vue';
+import { getRedisMonitorInfo } from '#/api/infra/redis';
+
+const redisData = ref<InfraRedisApi.InfraRedisMonitorInfo>();
+
+/** 统一加载 Redis 数据 */
+const loadRedisData = async () => {
+  try {
+    redisData.value = await getRedisMonitorInfo();
+  } catch (error) {
+    console.error('加载 Redis 数据失败', error);
+  }
+};
+
+onMounted(() => {
+  loadRedisData();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <DocAlert title="Redis 缓存" url="https://doc.iocoder.cn/redis-cache/" />
+    <DocAlert title="本地缓存" url="https://doc.iocoder.cn/local-cache/" />
+
+    <Card class="mt-5" title="Redis 概览">
+      <Info :redis-data="redisData" />
+    </Card>
+
+    <div class="mt-5 grid grid-cols-1 md:grid-cols-2 gap-4">
+      <Card title="内存使用">
+        <Memory :redis-data="redisData" />
+      </Card>
+
+      <Card title="命令统计">
+        <Commands :redis-data="redisData" />
+      </Card>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/infra/redis/modules/commands.vue b/apps/web-antd/src/views/infra/redis/modules/commands.vue
new file mode 100644
index 000000000..4d1be24ee
--- /dev/null
+++ b/apps/web-antd/src/views/infra/redis/modules/commands.vue
@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+import type { InfraRedisApi } from '#/api/infra/redis';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import { onMounted, ref, watch } from 'vue';
+
+const props = defineProps<{
+  redisData?: InfraRedisApi.InfraRedisMonitorInfo;
+}>();
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+/** 渲染命令统计图表 */
+const renderCommandStats = () => {
+  if (!props.redisData?.commandStats) {
+    return;
+  }
+
+  // 处理数据
+  const commandStats = [] as any[];
+  const nameList = [] as string[];
+  props.redisData.commandStats.forEach((row) => {
+    commandStats.push({
+      name: row.command,
+      value: row.calls
+    });
+    nameList.push(row.command);
+  });
+
+  // 渲染图表
+  renderEcharts({
+    title: {
+      text: '命令统计',
+      left: 'center'
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b} : {c} ({d}%)'
+    },
+    legend: {
+      type: 'scroll',
+      orient: 'vertical',
+      right: 30,
+      top: 10,
+      bottom: 20,
+      data: nameList,
+      textStyle: {
+        color: '#a1a1a1'
+      }
+    },
+    series: [
+      {
+        name: '命令',
+        type: 'pie',
+        radius: [20, 120],
+        center: ['40%', '60%'],
+        data: commandStats,
+        roseType: 'radius',
+        label: {
+          show: true
+        },
+        emphasis: {
+          label: {
+            show: true
+          },
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }
+    ]
+  });
+};
+
+/** 监听数据变化，重新渲染图表 */
+watch(() => props.redisData, (newVal) => {
+  if (newVal) {
+    renderCommandStats();
+  }
+}, { deep: true });
+
+onMounted(() => {
+  if (props.redisData) {
+    renderCommandStats();
+  }
+});
+</script>
+
+<template>
+  <div>
+    <EchartsUI ref="chartRef" height="420px" />
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/infra/redis/modules/info.vue b/apps/web-antd/src/views/infra/redis/modules/info.vue
new file mode 100644
index 000000000..9273907c3
--- /dev/null
+++ b/apps/web-antd/src/views/infra/redis/modules/info.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { type InfraRedisApi } from '#/api/infra/redis';
+
+import { Descriptions } from 'ant-design-vue';
+
+defineProps<{
+  redisData?: InfraRedisApi.InfraRedisMonitorInfo;
+}>();
+</script>
+
+<template>
+  <Descriptions :column="6" bordered size="middle" :label-style="{ width: '138px' }">
+    <Descriptions.Item label="Redis 版本">
+      {{ redisData?.info?.redis_version }}
+    </Descriptions.Item>
+    <Descriptions.Item label="运行模式">
+      {{ redisData?.info?.redis_mode == 'standalone' ? '单机' : '集群' }}
+    </Descriptions.Item>
+    <Descriptions.Item label="端口">
+      {{ redisData?.info?.tcp_port }}
+    </Descriptions.Item>
+    <Descriptions.Item label="客户端数">
+      {{ redisData?.info?.connected_clients }}
+    </Descriptions.Item>
+    <Descriptions.Item label="运行时间(天)">
+      {{ redisData?.info?.uptime_in_days }}
+    </Descriptions.Item>
+    <Descriptions.Item label="使用内存">
+      {{ redisData?.info?.used_memory_human }}
+    </Descriptions.Item>
+    <Descriptions.Item label="使用 CPU">
+      {{ redisData?.info ? parseFloat(redisData?.info?.used_cpu_user_children).toFixed(2) : '' }}
+    </Descriptions.Item>
+    <Descriptions.Item label="内存配置">
+      {{ redisData?.info?.maxmemory_human }}
+    </Descriptions.Item>
+    <Descriptions.Item label="AOF 是否开启">
+      {{ redisData?.info?.aof_enabled == '0' ? '否' : '是' }}
+    </Descriptions.Item>
+    <Descriptions.Item label="RDB 是否成功">
+      {{ redisData?.info?.rdb_last_bgsave_status }}
+    </Descriptions.Item>
+    <Descriptions.Item label="Key 数量">
+      {{ redisData?.dbSize }}
+    </Descriptions.Item>
+    <Descriptions.Item label="网络入口/出口">
+      {{ redisData?.info?.instantaneous_input_kbps }}kps /
+      {{ redisData?.info?.instantaneous_output_kbps }}kps
+    </Descriptions.Item>
+  </Descriptions>
+</template>
diff --git a/apps/web-antd/src/views/infra/redis/modules/memory.vue b/apps/web-antd/src/views/infra/redis/modules/memory.vue
new file mode 100644
index 000000000..1abe667af
--- /dev/null
+++ b/apps/web-antd/src/views/infra/redis/modules/memory.vue
@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+import type { InfraRedisApi } from '#/api/infra/redis';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import { onMounted, ref, watch } from 'vue';
+
+const props = defineProps<{
+  redisData?: InfraRedisApi.InfraRedisMonitorInfo;
+}>();
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+/** 解析内存值，移除单位，转为数字 */
+const parseMemoryValue = (memStr: string | undefined): number => {
+  if (!memStr) {
+    return 0;
+  }
+  try {
+    // 从字符串中提取数字部分，例如 "1.2M" 中的 1.2
+    const str = String(memStr); // 显式转换为字符串类型
+    const match = str.match(/^([\d.]+)/);
+    return match ? parseFloat(match[1] as string) : 0;
+  } catch (e) {
+    return 0;
+  }
+};
+
+/** 渲染内存使用图表 */
+const renderMemoryChart = () => {
+  if (!props.redisData?.info) {
+    return;
+  }
+
+  // 处理数据
+  const usedMemory = props.redisData.info.used_memory_human || '0';
+  const memoryValue = parseMemoryValue(usedMemory);
+
+  // 渲染图表
+  renderEcharts({
+    title: {
+      text: '内存使用情况',
+      left: 'center',
+    },
+    tooltip: {
+      formatter: '{b} <br/>{a} : ' + usedMemory
+    },
+    series: [
+      {
+        name: '峰值',
+        type: 'gauge',
+        min: 0,
+        max: 100,
+        splitNumber: 10,
+        color: '#F5C74E',
+        radius: '85%',
+        center: ['50%', '50%'],
+        startAngle: 225,
+        endAngle: -45,
+        axisLine: {
+          lineStyle: {
+            color: [
+              [0.2, '#7FFF00'],
+              [0.8, '#00FFFF'],
+              [1, '#FF0000']
+            ],
+            width: 10
+          }
+        },
+        axisTick: {
+          length: 5,
+          lineStyle: {
+            color: '#76D9D7'
+          }
+        },
+        splitLine: {
+          length: 20,
+          lineStyle: {
+            color: '#76D9D7'
+          }
+        },
+        axisLabel: {
+          color: '#76D9D7',
+          distance: 15,
+          fontSize: 15
+        },
+        pointer: {
+          width: 7,
+          show: true
+        },
+        detail: {
+          show: true,
+          offsetCenter: [0, '50%'],
+          color: 'auto',
+          fontSize: 30,
+          formatter: usedMemory
+        },
+        progress: {
+          show: true
+        },
+        data: [
+          {
+            value: memoryValue,
+            name: '内存消耗'
+          }
+        ]
+      }
+    ]
+  });
+};
+
+/** 监听数据变化，重新渲染图表 */
+watch(() => props.redisData, (newVal) => {
+  if (newVal) {
+    renderMemoryChart();
+  }
+}, { deep: true });
+
+onMounted(() => {
+  if (props.redisData) {
+    renderMemoryChart();
+  }
+});
+</script>
+
+<template>
+  <div>
+    <EchartsUI ref="chartRef" height="420px" />
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/infra/server/index.vue b/apps/web-antd/src/views/infra/server/index.vue
index 2ed97bd8c..42bd8140d 100644
--- a/apps/web-antd/src/views/infra/server/index.vue
+++ b/apps/web-antd/src/views/infra/server/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Page } from '@vben/common-ui'
-import { DocAlert } from '#/components/doc-alert'
 import { IFrame } from '#/components/iframe'
+import { DocAlert } from '#/components/doc-alert'
 
 import { ref, onMounted } from 'vue'
 import { getConfigKey } from '#/api/infra/config'
diff --git a/packages/effects/plugins/src/echarts/echarts.ts b/packages/effects/plugins/src/echarts/echarts.ts
index 85323a429..300e9e5fa 100644
--- a/packages/effects/plugins/src/echarts/echarts.ts
+++ b/packages/effects/plugins/src/echarts/echarts.ts
@@ -2,6 +2,7 @@ import type {
   // 系列类型的定义后缀都为 SeriesOption
   BarSeriesOption,
   LineSeriesOption,
+  GaugeSeriesOption,
 } from 'echarts/charts';
 import type {
   DatasetComponentOption,
@@ -12,7 +13,7 @@ import type {
 } from 'echarts/components';
 import type { ComposeOption } from 'echarts/core';
 
-import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
+import { BarChart, LineChart, PieChart, RadarChart, GaugeChart } from 'echarts/charts';
 import {
   // 数据集组件
   DatasetComponent,
@@ -34,6 +35,7 @@ export type ECOption = ComposeOption<
   | DatasetComponentOption
   | GridComponentOption
   | LineSeriesOption
+  | GaugeSeriesOption
   | TitleComponentOption
   | TooltipComponentOption
 >;
@@ -49,6 +51,7 @@ echarts.use([
   TransformComponent,
   BarChart,
   LineChart,
+  GaugeChart,
   LabelLayout,
   UniversalTransition,
   CanvasRenderer,

From 17f947016d13b2a4a5a4b9b0bde7319300f5d6f8 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 7 Apr 2025 22:34:37 +0800
Subject: [PATCH 09/13] =?UTF-8?q?feat=EF=BC=9A=E5=A2=9E=E5=8A=A0=20websock?=
 =?UTF-8?q?et=20=E6=A1=88=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/infra/webSocket/index.vue       | 269 ++++++++++++++++++
 1 file changed, 269 insertions(+)
 create mode 100644 apps/web-antd/src/views/infra/webSocket/index.vue

diff --git a/apps/web-antd/src/views/infra/webSocket/index.vue b/apps/web-antd/src/views/infra/webSocket/index.vue
new file mode 100644
index 000000000..0dab64689
--- /dev/null
+++ b/apps/web-antd/src/views/infra/webSocket/index.vue
@@ -0,0 +1,269 @@
+<script lang="ts" setup>
+import type { SystemUserApi } from '#/api/system/user'
+
+import { message } from 'ant-design-vue'
+import { Card, Tag, Divider, Input, Button, Select, Avatar, Empty, Badge } from 'ant-design-vue'
+import { Page } from '@vben/common-ui'
+import { DocAlert } from '#/components/doc-alert'
+
+import { formatDate } from '@vben/utils'
+import { useWebSocket } from '@vueuse/core'
+import { getSimpleUserList } from '#/api/system/user'
+import { ref, computed, watchEffect, onMounted } from 'vue'
+import { useAccessStore } from '@vben/stores'
+
+const accessStore = useAccessStore()
+const refreshToken = accessStore.refreshToken as string
+
+const server = ref(
+  (import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') +
+    '?token=' +
+    refreshToken // 使用 refreshToken，而不使用 accessToken 方法的原因：WebSocket 无法方便的刷新访问令牌
+) // WebSocket 服务地址
+const getIsOpen = computed(() => status.value === 'OPEN') // WebSocket 连接是否打开
+const getTagColor = computed(() => (getIsOpen.value ? 'success' : 'red')) // WebSocket 连接的展示颜色
+const getStatusText = computed(() => (getIsOpen.value ? '已连接' : '未连接')) // 连接状态文本
+
+/** 发起 WebSocket 连接 */
+const { status, data, send, close, open } = useWebSocket(server.value, {
+  autoReconnect: true,
+  heartbeat: true
+})
+
+/** 监听接收到的数据 */
+const messageList = ref([] as { time: number; text: string; type?: string; userId?: string }[]) // 消息列表
+const messageReverseList = computed(() => messageList.value.slice().reverse())
+watchEffect(() => {
+  if (!data.value) {
+    return
+  }
+  try {
+    // 1. 收到心跳
+    if (data.value === 'pong') {
+      // state.recordList.push({
+      //   text: '【心跳】',
+      //   time: new Date().getTime()
+      // })
+      return
+    }
+
+    // 2.1 解析 type 消息类型
+    const jsonMessage = JSON.parse(data.value)
+    const type = jsonMessage.type
+    const content = JSON.parse(jsonMessage.content)
+    if (!type) {
+      message.error('未知的消息类型：' + data.value)
+      return
+    }
+    // 2.2 消息类型：demo-message-receive
+    if (type === 'demo-message-receive') {
+      const single = content.single
+      messageList.value.push({
+        text: content.text,
+        time: new Date().getTime(),
+        type: single ? 'single' : 'group',
+        userId: content.fromUserId
+      })
+      return
+    }
+    // 2.3 消息类型：notice-push
+    if (type === 'notice-push') {
+      messageList.value.push({
+        text: content.title,
+        time: new Date().getTime(),
+        type: 'system'
+      })
+      return
+    }
+    message.error('未处理消息：' + data.value)
+  } catch (error) {
+    message.error('处理消息发生异常：' + data.value)
+    console.error(error)
+  }
+})
+
+/** 发送消息 */
+const sendText = ref('') // 发送内容
+const sendUserId = ref('') // 发送人
+const handlerSend = () => {
+  if (!sendText.value.trim()) {
+    message.warning('消息内容不能为空')
+    return
+  }
+  
+  // 1.1 先 JSON 化 message 消息内容
+  const messageContent = JSON.stringify({
+    text: sendText.value,
+    toUserId: sendUserId.value
+  })
+  // 1.2 再 JSON 化整个消息
+  const jsonMessage = JSON.stringify({
+    type: 'demo-message-send',
+    content: messageContent
+  })
+  // 2. 最后发送消息
+  send(jsonMessage)
+  sendText.value = ''
+}
+
+/** 切换 websocket 连接状态 */
+const toggleConnectStatus = () => {
+  if (getIsOpen.value) {
+    close()
+  } else {
+    open()
+  }
+}
+
+/** 获取消息类型的徽标颜色 */
+const getMessageBadgeColor = (type?: string) => {
+  switch (type) {
+    case 'single': return 'blue'
+    case 'group': return 'green'
+    case 'system': return 'red'
+    default: return 'default'
+  }
+}
+
+/** 获取消息类型的文本 */
+const getMessageTypeText = (type?: string) => {
+  switch (type) {
+    case 'single': return '单发'
+    case 'group': return '群发'
+    case 'system': return '系统'
+    default: return '未知'
+  }
+}
+
+/** 初始化 **/
+const userList = ref<SystemUserApi.SystemUser[]>([]) // 用户列表
+onMounted(async () => {
+  userList.value = await getSimpleUserList()
+})
+</script>
+
+<template>
+  <Page>
+    <DocAlert title="WebSocket 实时通信" url="https://doc.iocoder.cn/websocket/" />
+
+    <div class="flex flex-col md:flex-row gap-4 mt-4">
+      <!-- 左侧：建立连接、发送消息 -->
+      <Card :bordered="false" class="w-full md:w-1/2">
+        <template #title>
+          <div class="flex items-center">
+            <Badge :status="getIsOpen ? 'success' : 'error'" />
+            <span class="ml-2 text-lg font-medium">连接管理</span>
+          </div>
+        </template>
+        <div class="flex items-center mb-4 bg-gray-50 p-3 rounded-lg">
+          <span class="mr-4 font-medium">连接状态:</span>
+          <Tag :color="getTagColor" class="px-3 py-1">{{ getStatusText }}</Tag>
+        </div>
+        <div class="flex space-x-2 mb-6">
+          <Input 
+            v-model:value="server" 
+            disabled
+            class="rounded-md"
+            size="large">
+            <template #addonBefore>
+              <span class="text-gray-600">服务地址</span>
+            </template>
+          </Input>
+          <Button
+            :type="getIsOpen ? 'default' : 'primary'"
+            :danger="getIsOpen"
+            size="large"
+            class="flex-shrink-0"
+            @click="toggleConnectStatus"
+          >
+            {{ getIsOpen ? '关闭连接' : '开启连接' }}
+          </Button>
+        </div>
+        
+        <Divider>
+          <span class="text-gray-500">消息发送</span>
+        </Divider>
+
+        <Select 
+          v-model:value="sendUserId" 
+          class="w-full mb-3" 
+          size="large"
+          placeholder="请选择接收人"
+          :disabled="!getIsOpen">
+          <Select.Option key="" value="" label="所有人">
+            <div class="flex items-center">
+              <Avatar size="small" class="mr-2">全</Avatar>
+              <span>所有人</span>
+            </div>
+          </Select.Option>
+          <Select.Option
+            v-for="user in userList"
+            :key="user.id"
+            :value="user.id"
+            :label="user.nickname"
+          >
+            <div class="flex items-center">
+              <Avatar size="small" class="mr-2">{{ user.nickname.slice(0, 1) }}</Avatar>
+              <span>{{ user.nickname }}</span>
+            </div>
+          </Select.Option>
+        </Select>
+        
+        <Input.TextArea
+          v-model:value="sendText"
+          :auto-size="{ minRows: 3, maxRows: 6 }"
+          :disabled="!getIsOpen"
+          class="rounded-lg border-1 border-gray-300"
+          allowClear
+          placeholder="请输入你要发送的消息..."
+        />
+        
+        <Button 
+          :disabled="!getIsOpen" 
+          block 
+          class="mt-4" 
+          type="primary" 
+          size="large"
+          @click="handlerSend">
+          <template #icon>
+            <span class="i-ant-design:send-outlined mr-1" />
+          </template>
+          发送消息
+        </Button>
+      </Card>
+      
+      <!-- 右侧：消息记录 -->
+      <Card :bordered="false" class="w-full md:w-1/2">
+        <template #title>
+          <div class="flex items-center">
+            <span class="i-ant-design:message-outlined mr-2 text-lg" />
+            <span class="text-lg font-medium">消息记录</span>
+            <Tag v-if="messageList.length > 0" class="ml-2">{{ messageList.length }} 条</Tag>
+          </div>
+        </template>
+        <div class="h-96 overflow-auto p-2 bg-gray-50 rounded-lg">
+          <Empty v-if="messageList.length === 0" description="暂无消息记录" />
+          <div v-else class="space-y-3">
+            <div 
+              v-for="msg in messageReverseList" 
+              :key="msg.time" 
+              class="p-3 bg-white rounded-lg shadow-sm"
+            >
+              <div class="flex items-center justify-between mb-1">
+                <div class="flex items-center">
+                  <Badge :color="getMessageBadgeColor(msg.type)" />
+                  <span class="ml-1 text-gray-600 font-medium">{{ getMessageTypeText(msg.type) }}</span>
+                  <span v-if="msg.userId" class="ml-2 text-gray-500">用户 ID: {{ msg.userId }}</span>
+                </div>
+                <span class="text-xs text-gray-400">{{ formatDate(msg.time) }}</span>
+              </div>
+              <div class="mt-2 text-gray-800 break-words">
+                {{ msg.text }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  </Page>
+</template>

From 5b60c93e4e721ce10d43cf0d83811b60b8615e7a Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 7 Apr 2025 22:47:30 +0800
Subject: [PATCH 10/13] =?UTF-8?q?fix:=20tree.ts=20=E6=8A=A5=E9=94=99?=
 =?UTF-8?q?=EF=BC=8C=E5=9C=A8=20dept-tree.vue=20=E6=97=A0=E6=B3=95?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/utils/tree.ts               | 73 +++++++++++--------
 .../views/system/user/modules/dept-tree.vue   |  6 +-
 2 files changed, 44 insertions(+), 35 deletions(-)

diff --git a/apps/web-antd/src/utils/tree.ts b/apps/web-antd/src/utils/tree.ts
index 0e743864a..8797cdad4 100644
--- a/apps/web-antd/src/utils/tree.ts
+++ b/apps/web-antd/src/utils/tree.ts
@@ -1,61 +1,70 @@
-// TODO @芋艿：1）代码优化；2）是不是抽到公共的？
+// todo @芋艿：公用逻辑
+interface TreeNode {
+  [key: string]: any;
+  children?: TreeNode[];
+}
+
 /**
  * 构造树型结构数据
+ *
  * @param {*} data 数据源
  * @param {*} id id字段 默认 'id'
  * @param {*} parentId 父节点字段 默认 'parentId'
  * @param {*} children 孩子节点字段 默认 'children'
  */
 export const handleTree = (
-  data: any[],
-  id?: string,
-  parentId?: string,
-  children?: string,
-) => {
+  data: TreeNode[],
+  id: string = 'id',
+  parentId: string = 'parentId',
+  children: string = 'children'
+): TreeNode[] => {
   if (!Array.isArray(data)) {
     console.warn('data must be an array');
     return [];
   }
   const config = {
-    id: id || 'id',
-    parentId: parentId || 'parentId',
-    childrenList: children || 'children',
+    id,
+    parentId,
+    childrenList: children
   };
+  const childrenListMap: Record<string | number, TreeNode[]> = {};
+  const nodeIds: Record<string | number, TreeNode> = {};
+  const tree: TreeNode[] = [];
 
-  const childrenListMap: any = {};
-  const nodeIds: any = {};
-  const tree: any[] = [];
-
+  // 1. 数据预处理
+  // 1.1 第一次遍历，生成 childrenListMap 和 nodeIds 映射
   for (const d of data) {
-    const parentId = d[config.parentId];
-    if (childrenListMap[parentId] === null) {
-      childrenListMap[parentId] = [];
+    const pId = d[config.parentId];
+    if (childrenListMap[pId] === undefined) {
+      childrenListMap[pId] = [];
     }
     nodeIds[d[config.id]] = d;
-    childrenListMap[parentId].push(d);
+    childrenListMap[pId].push(d);
   }
-
+  // 1.2 第二次遍历，找出根节点
   for (const d of data) {
-    const parentId = d[config.parentId];
-    if (nodeIds[parentId] === null) {
+    const pId = d[config.parentId];
+    if (nodeIds[pId] === undefined) {
       tree.push(d);
     }
   }
 
-  for (const t of tree) {
-    adaptToChildrenList(t);
-  }
-
-  function adaptToChildrenList(o: any) {
-    if (childrenListMap[o[config.id]] !== null) {
-      o[config.childrenList] = childrenListMap[o[config.id]];
-    }
-    if (o[config.childrenList]) {
-      for (const c of o[config.childrenList]) {
-        adaptToChildrenList(c);
+  // 2. 构建树结：递归构建子节点
+  const adaptToChildrenList = (node: TreeNode): void => {
+    const nodeId = node[config.id];
+    if (childrenListMap[nodeId]) {
+      node[config.childrenList] = childrenListMap[nodeId];
+      // 递归处理子节点
+      for (const child of node[config.childrenList]) {
+        adaptToChildrenList(child);
       }
     }
+  };
+
+  // 3. 从根节点开始构建完整树
+  for (const rootNode of tree) {
+    adaptToChildrenList(rootNode);
   }
 
   return tree;
-};
+}
diff --git a/apps/web-antd/src/views/system/user/modules/dept-tree.vue b/apps/web-antd/src/views/system/user/modules/dept-tree.vue
index bcfe0daef..5698c473e 100644
--- a/apps/web-antd/src/views/system/user/modules/dept-tree.vue
+++ b/apps/web-antd/src/views/system/user/modules/dept-tree.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import type { SystemDeptApi } from '#/api/system/dept';
+import { type SystemDeptApi} from '#/api/system/dept';
 
 import { Tree, Input, Spin } from 'ant-design-vue';
 
 import { ref, onMounted } from 'vue';
 import { Search } from '@vben/icons';
-import { getDeptList } from '#/api/system/dept';
+import { getSimpleDeptList } from '#/api/system/dept';
 import { handleTree } from '#/utils/tree';
 
 const emit = defineEmits(['select']);
@@ -36,7 +36,7 @@ const handleSelect = (_selectedKeys: any[], info: any) => {
 onMounted(async () => {
   try {
     loading.value = true;
-    const data = await getDeptList();
+    const data = await getSimpleDeptList();
     deptList.value = data;
     deptTree.value = handleTree(data);
   } catch (error) {

From fa8e7bdc12e880554010d5092ef596844df112df Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 8 Apr 2025 09:38:02 +0800
Subject: [PATCH 11/13] =?UTF-8?q?feat=EF=BC=9A=E5=A2=9E=E5=8A=A0=20code-lo?=
 =?UTF-8?q?gin=20=E6=89=8B=E6=9C=BA=E9=AA=8C=E8=AF=81=E7=A0=81=E7=9A=84?=
 =?UTF-8?q?=E6=8E=A5=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/core/auth.ts            |  14 ++-
 apps/web-antd/src/store/auth.ts               |   8 +-
 .../views/_core/authentication/code-login.vue | 115 +++++++++++++++++-
 .../src/views/_core/authentication/login.vue  |  10 +-
 4 files changed, 133 insertions(+), 14 deletions(-)

diff --git a/apps/web-antd/src/api/core/auth.ts b/apps/web-antd/src/api/core/auth.ts
index 4071577dd..576446b45 100644
--- a/apps/web-antd/src/api/core/auth.ts
+++ b/apps/web-antd/src/api/core/auth.ts
@@ -24,13 +24,13 @@ export namespace AuthApi {
   }
 
   /** 手机验证码获取接口参数 */
-  export interface SmsCodeVO {
+  export interface SmsCodeParams {
     mobile: string;
     scene: number;
   }
 
   /** 手机验证码登录接口参数 */
-  export interface SmsLoginVO {
+  export interface SmsLoginParams {
     mobile: string;
     code: string;
   }
@@ -83,4 +83,14 @@ export async function getCaptcha(data: any) {
 /** 校验验证码 */
 export async function checkCaptcha(data: any) {
   return baseRequestClient.post('/system/captcha/check', data);
+}
+
+/** 获取登录验证码 */
+export const sendSmsCode = (data: AuthApi.SmsCodeParams) => {
+  return requestClient.post('/system/auth/send-sms-code', data )
+}
+
+/** 短信验证码登录 */
+export const smsLogin = (data: AuthApi.SmsLoginParams) => {
+  return requestClient.post('/system/auth/sms-login', data)
 }
\ No newline at end of file
diff --git a/apps/web-antd/src/store/auth.ts b/apps/web-antd/src/store/auth.ts
index e4abf9c0a..543b77ed1 100644
--- a/apps/web-antd/src/store/auth.ts
+++ b/apps/web-antd/src/store/auth.ts
@@ -9,7 +9,7 @@ import { resetAllStores, useAccessStore, useUserStore } from '@vben/stores';
 import { notification } from 'ant-design-vue';
 import { defineStore } from 'pinia';
 
-import { getAuthPermissionInfoApi, loginApi, logoutApi} from '#/api';
+import { type AuthApi, getAuthPermissionInfoApi, loginApi, logoutApi, smsLogin } from '#/api';
 import { $t } from '#/locales';
 
 export const useAuthStore = defineStore('auth', () => {
@@ -22,9 +22,12 @@ export const useAuthStore = defineStore('auth', () => {
   /**
    * 异步处理登录操作
    * Asynchronously handle the login process
+   * @param type 登录类型
    * @param params 登录表单数据
+   * @param onSuccess 登录成功后的回调函数
    */
   async function authLogin(
+    type: 'mobile' | 'username',
     params: Recordable<any>,
     onSuccess?: () => Promise<void> | void,
   ) {
@@ -32,7 +35,8 @@ export const useAuthStore = defineStore('auth', () => {
     let userInfo: null | UserInfo = null;
     try {
       loginLoading.value = true;
-      const { accessToken, refreshToken } = await loginApi(params);
+      const { accessToken, refreshToken } = type === 'mobile' ? await smsLogin(params as AuthApi.SmsLoginParams)
+        : await loginApi(params);
 
       // 如果成功获取到 accessToken
       if (accessToken) {
diff --git a/apps/web-antd/src/views/_core/authentication/code-login.vue b/apps/web-antd/src/views/_core/authentication/code-login.vue
index acfd1fd78..d3225ee1c 100644
--- a/apps/web-antd/src/views/_core/authentication/code-login.vue
+++ b/apps/web-antd/src/views/_core/authentication/code-login.vue
@@ -2,24 +2,102 @@
 import type { VbenFormSchema } from '@vben/common-ui';
 import type { Recordable } from '@vben/types';
 
-import { computed, ref } from 'vue';
+import { computed, ref, onMounted } from 'vue';
 
 import { AuthenticationCodeLogin, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
+import { type AuthApi, sendSmsCode } from '#/api';
+import { useAppConfig } from '@vben/hooks';
+import { message } from 'ant-design-vue';
+
+import { getTenantSimpleList, getTenantByWebsite } from '#/api/core/auth';
+import { useAccessStore } from '@vben/stores';
+import { useAuthStore } from '#/store';
+const { tenantEnable } = useAppConfig(import.meta.env, import.meta.env.PROD);
 
 defineOptions({ name: 'CodeLogin' });
 
+const authStore = useAuthStore();
+const accessStore = useAccessStore();
+
 const loading = ref(false);
-const CODE_LENGTH = 6;
+const CODE_LENGTH = 4;
+
+const loginRef = ref();
+
+/** 获取租户列表，并默认选中 */
+const tenantList = ref<AuthApi.TenantResult[]>([]); // 租户列表
+const fetchTenantList = async () => {
+  if (!tenantEnable) {
+    return;
+  }
+  try {
+    // 获取租户列表、域名对应租户
+    const websiteTenantPromise = getTenantByWebsite(window.location.hostname);
+    tenantList.value = await getTenantSimpleList();
+
+    // 选中租户：域名 > store 中的租户 > 首个租户
+    let tenantId: number | null = null;
+    const websiteTenant = await websiteTenantPromise;
+    if (websiteTenant?.id) {
+      tenantId = websiteTenant.id;
+    }
+    // 如果没有从域名获取到租户，尝试从 store 中获取
+    if (!tenantId && accessStore.tenantId) {
+      tenantId = accessStore.tenantId;
+    }
+    // 如果还是没有租户，使用列表中的第一个
+    if (!tenantId && tenantList.value?.[0]?.id) {
+      tenantId = tenantList.value[0].id;
+    }
+
+    // 设置选中的租户编号
+    accessStore.setTenantId(tenantId);
+    loginRef.value.getFormApi().setFieldValue('tenantId', tenantId);
+  } catch (error) {
+    console.error('获取租户列表失败:', error);
+  }
+};
+
+/** 组件挂载时获取租户信息 */
+onMounted(() => {
+  fetchTenantList();
+});
 
 const formSchema = computed((): VbenFormSchema[] => {
   return [
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        options: tenantList.value.map((item) => ({
+          label: item.name,
+          value: item.id,
+        })),
+        placeholder: $t('authentication.tenantTip'),
+      },
+      fieldName: 'tenantId',
+      label: $t('authentication.tenant'),
+      rules: z
+        .number()
+        .nullable()
+        .refine((val) => val != null && val > 0, $t('authentication.tenantTip'))
+        .default(null),
+      dependencies: {
+        triggerFields: ['tenantId'],
+        if: tenantEnable,
+        trigger(values) {
+          if (values.tenantId) {
+            accessStore.setTenantId(values.tenantId);
+          }
+        },
+      },
+    },
     {
       component: 'VbenInput',
       componentProps: {
         placeholder: $t('authentication.mobile'),
       },
-      fieldName: 'phoneNumber',
+      fieldName: 'mobile',
       label: $t('authentication.mobile'),
       rules: z
         .string()
@@ -40,6 +118,29 @@ const formSchema = computed((): VbenFormSchema[] => {
           return text;
         },
         placeholder: $t('authentication.code'),
+        handleSendCode: async () => {
+          loading.value = true;
+          try {
+            const formApi = loginRef.value?.getFormApi();
+            if (!formApi) {
+              throw new Error('表单未准备好');
+            }
+            // 验证手机号
+            await formApi.validateField('mobile');
+            const isMobileValid = await formApi.isFieldValid('mobile');
+            if (!isMobileValid) {
+              throw new Error('请输入有效的手机号码');
+            }
+
+            // 发送验证码
+            const { mobile } = await formApi.getValues();
+            const scene = 21; // 场景：短信验证码登录
+            await sendSmsCode({ mobile, scene });
+            message.success('验证码发送成功');
+          } finally {
+            loading.value = false;
+          }
+        }
       },
       fieldName: 'code',
       label: $t('authentication.code'),
@@ -55,13 +156,17 @@ const formSchema = computed((): VbenFormSchema[] => {
  * @param values 登录表单数据
  */
 async function handleLogin(values: Recordable<any>) {
-  // eslint-disable-next-line no-console
-  console.log(values);
+  try {
+    await authStore.authLogin('mobile', values);
+  } catch (error) {
+    console.error('Error in handleLogin:', error);
+  }
 }
 </script>
 
 <template>
   <AuthenticationCodeLogin
+    ref="loginRef"
     :form-schema="formSchema"
     :loading="loading"
     @submit="handleLogin"
diff --git a/apps/web-antd/src/views/_core/authentication/login.vue b/apps/web-antd/src/views/_core/authentication/login.vue
index b0f15b6a0..34a88eec2 100644
--- a/apps/web-antd/src/views/_core/authentication/login.vue
+++ b/apps/web-antd/src/views/_core/authentication/login.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import type { VbenFormSchema } from '@vben/common-ui';
-import {type AuthApi, checkCaptcha, getCaptcha } from '#/api/core/auth';
+import { type AuthApi, checkCaptcha, getCaptcha } from '#/api/core/auth';
 
-import { computed, markRaw, onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 
 import { AuthenticationLogin, Verification, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
@@ -23,9 +23,9 @@ const loginRef = ref();
 const verifyRef = ref();
 
 const captchaType = 'blockPuzzle'; // 验证码类型：'blockPuzzle' | 'clickWord'
-const tenantList = ref<AuthApi.TenantResult[]>([]); // 租户列表
 
 /** 获取租户列表，并默认选中 */
+const tenantList = ref<AuthApi.TenantResult[]>([]); // 租户列表
 const fetchTenantList = async () => {
   if (!tenantEnable) {
     return;
@@ -67,13 +67,13 @@ const handleLogin = async (values: any) => {
   }
 
   // 无验证码，直接登录
-  await authStore.authLogin(values);
+  await authStore.authLogin('username', values);
 }
 
 /** 验证码通过，执行登录 */
 const handleVerifySuccess = async ({ captchaVerification }: any) => {
   try {
-    await authStore.authLogin({
+    await authStore.authLogin('username', {
       ...(await loginRef.value.getFormApi().getValues()),
       captchaVerification,
     });

From 446cb6cbbfeac2a794e6282782d88e6094921ea4 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 8 Apr 2025 13:10:36 +0800
Subject: [PATCH 12/13] =?UTF-8?q?feat=EF=BC=9A=E5=A2=9E=E5=8A=A0=20registe?=
 =?UTF-8?q?r=20=E8=B4=A6=E5=8F=B7=E6=B3=A8=E5=86=8C=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/core/auth.ts            |  12 ++
 apps/web-antd/src/store/auth.ts               |   5 +-
 .../views/_core/authentication/register.vue   | 145 ++++++++++++++++--
 .../src/langs/en-US/authentication.json       |   2 +
 .../src/langs/zh-CN/authentication.json       |   2 +
 5 files changed, 151 insertions(+), 15 deletions(-)

diff --git a/apps/web-antd/src/api/core/auth.ts b/apps/web-antd/src/api/core/auth.ts
index 576446b45..b9e6fd86a 100644
--- a/apps/web-antd/src/api/core/auth.ts
+++ b/apps/web-antd/src/api/core/auth.ts
@@ -35,6 +35,13 @@ export namespace AuthApi {
     code: string;
   }
 
+  /** 注册接口参数 */
+  export interface RegisterParams {
+    tenantName: string
+    username: string
+    password: string
+    captchaVerification: string
+  }
 }
 
 /** 登录 */
@@ -93,4 +100,9 @@ export const sendSmsCode = (data: AuthApi.SmsCodeParams) => {
 /** 短信验证码登录 */
 export const smsLogin = (data: AuthApi.SmsLoginParams) => {
   return requestClient.post('/system/auth/sms-login', data)
+}
+
+/** 注册 */
+export const register = (data: AuthApi.RegisterParams) => {
+  return requestClient.post('/system/auth/register', data)
 }
\ No newline at end of file
diff --git a/apps/web-antd/src/store/auth.ts b/apps/web-antd/src/store/auth.ts
index 543b77ed1..a66737a27 100644
--- a/apps/web-antd/src/store/auth.ts
+++ b/apps/web-antd/src/store/auth.ts
@@ -9,7 +9,7 @@ import { resetAllStores, useAccessStore, useUserStore } from '@vben/stores';
 import { notification } from 'ant-design-vue';
 import { defineStore } from 'pinia';
 
-import { type AuthApi, getAuthPermissionInfoApi, loginApi, logoutApi, smsLogin } from '#/api';
+import { type AuthApi, getAuthPermissionInfoApi, loginApi, logoutApi, smsLogin, register } from '#/api';
 import { $t } from '#/locales';
 
 export const useAuthStore = defineStore('auth', () => {
@@ -27,7 +27,7 @@ export const useAuthStore = defineStore('auth', () => {
    * @param onSuccess 登录成功后的回调函数
    */
   async function authLogin(
-    type: 'mobile' | 'username',
+    type: 'mobile' | 'username' | 'register',
     params: Recordable<any>,
     onSuccess?: () => Promise<void> | void,
   ) {
@@ -36,6 +36,7 @@ export const useAuthStore = defineStore('auth', () => {
     try {
       loginLoading.value = true;
       const { accessToken, refreshToken } = type === 'mobile' ? await smsLogin(params as AuthApi.SmsLoginParams)
+        : type === 'register' ? await register(params as AuthApi.RegisterParams)
         : await loginApi(params);
 
       // 如果成功获取到 accessToken
diff --git a/apps/web-antd/src/views/_core/authentication/register.vue b/apps/web-antd/src/views/_core/authentication/register.vue
index b1a5de726..f255f499f 100644
--- a/apps/web-antd/src/views/_core/authentication/register.vue
+++ b/apps/web-antd/src/views/_core/authentication/register.vue
@@ -1,18 +1,120 @@
 <script lang="ts" setup>
 import type { VbenFormSchema } from '@vben/common-ui';
-import type { Recordable } from '@vben/types';
+import { type AuthApi, checkCaptcha, getCaptcha } from '#/api/core/auth';
 
-import { computed, h, ref } from 'vue';
+import { computed, h, onMounted, ref } from 'vue';
 
-import { AuthenticationRegister, z } from '@vben/common-ui';
+import { AuthenticationRegister, Verification, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
+import { useAppConfig } from '@vben/hooks';
+
+import { useAccessStore } from '@vben/stores';
+import { useAuthStore } from '#/store';
+import { getTenantSimpleList, getTenantByWebsite } from '#/api/core/auth';
+
+const { tenantEnable, captchaEnable } = useAppConfig(import.meta.env, import.meta.env.PROD);
 
 defineOptions({ name: 'Register' });
 
 const loading = ref(false);
+const registerRef = ref();
+const verifyRef = ref();
+const accessStore = useAccessStore();
+const authStore = useAuthStore();
+
+const captchaType = 'blockPuzzle'; // 验证码类型：'blockPuzzle' | 'clickWord'
+
+/** 获取租户列表，并默认选中 */
+const tenantList = ref<AuthApi.TenantResult[]>([]); // 租户列表
+const fetchTenantList = async () => {
+  if (!tenantEnable) {
+    return;
+  }
+  try {
+    // 获取租户列表、域名对应租户
+    const websiteTenantPromise = getTenantByWebsite(window.location.hostname);
+    tenantList.value = await getTenantSimpleList();
+
+    // 选中租户：域名 > store 中的租户 > 首个租户
+    let tenantId: number | null = null;
+    const websiteTenant = await websiteTenantPromise;
+    if (websiteTenant?.id) {
+      tenantId = websiteTenant.id;
+    }
+    // 如果没有从域名获取到租户，尝试从 store 中获取
+    if (!tenantId && accessStore.tenantId) {
+      tenantId = accessStore.tenantId;
+    }
+    // 如果还是没有租户，使用列表中的第一个
+    if (!tenantId && tenantList.value?.[0]?.id) {
+      tenantId = tenantList.value[0].id;
+    }
+
+    // 设置选中的租户编号
+    accessStore.setTenantId(tenantId);
+    registerRef.value.getFormApi().setFieldValue('tenantId', tenantId);
+  } catch (error) {
+    console.error('获取租户列表失败:', error);
+  }
+};
+
+/** 执行注册 */
+const handleRegister = async (values: any) => {
+  // 如果开启验证码，则先验证验证码
+  if (captchaEnable) {
+    verifyRef.value.show();
+    return;
+  }
+
+  // 无验证码，直接登录
+  await authStore.authLogin('register', values);
+};
+
+/** 验证码通过，执行注册 */
+const handleVerifySuccess = async ({ captchaVerification }: any) => {
+  try {
+    await authStore.authLogin('register', {
+      ...(await registerRef.value.getFormApi().getValues()),
+      captchaVerification,
+    });
+  } catch (error) {
+    console.error('Error in handleRegister:', error);
+  }
+};
+
+/** 组件挂载时获取租户信息 */
+onMounted(() => {
+  fetchTenantList();
+});
 
 const formSchema = computed((): VbenFormSchema[] => {
   return [
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        options: tenantList.value.map((item) => ({
+          label: item.name,
+          value: item.id,
+        })),
+        placeholder: $t('authentication.tenantTip'),
+      },
+      fieldName: 'tenantId',
+      label: $t('authentication.tenant'),
+      rules: z
+        .number()
+        .nullable()
+        .refine((val) => val != null && val > 0, $t('authentication.tenantTip'))
+        .default(null),
+      dependencies: {
+        triggerFields: ['tenantId'],
+        if: tenantEnable,
+        trigger(values) {
+          if (values.tenantId) {
+            accessStore.setTenantId(values.tenantId);
+          }
+        },
+      },
+    },
     {
       component: 'VbenInput',
       componentProps: {
@@ -22,6 +124,15 @@ const formSchema = computed((): VbenFormSchema[] => {
       label: $t('authentication.username'),
       rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
     },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.nicknameTip'),
+      },
+      fieldName: 'nickname',
+      label: $t('authentication.nickname'),
+      rules: z.string().min(1, { message: $t('authentication.nicknameTip') }),
+    },
     {
       component: 'VbenInputPassword',
       componentProps: {
@@ -80,17 +191,25 @@ const formSchema = computed((): VbenFormSchema[] => {
     },
   ];
 });
-
-function handleSubmit(value: Recordable<any>) {
-  // eslint-disable-next-line no-console
-  console.log('register submit:', value);
-}
 </script>
 
 <template>
-  <AuthenticationRegister
-    :form-schema="formSchema"
-    :loading="loading"
-    @submit="handleSubmit"
-  />
+  <div>
+    <AuthenticationRegister
+      ref="registerRef"
+      :form-schema="formSchema"
+      :loading="loading"
+      @submit="handleRegister"
+    />
+    <Verification
+      ref="verifyRef"
+      v-if="captchaEnable"
+      :captcha-type="captchaType"
+      :check-captcha-api="checkCaptcha"
+      :get-captcha-api="getCaptcha"
+      :img-size="{ width: '400px', height: '200px' }"
+      mode="pop"
+      @on-success="handleVerifySuccess"
+    />
+  </div>
 </template>
diff --git a/packages/locales/src/langs/en-US/authentication.json b/packages/locales/src/langs/en-US/authentication.json
index 2a14aa819..319589600 100644
--- a/packages/locales/src/langs/en-US/authentication.json
+++ b/packages/locales/src/langs/en-US/authentication.json
@@ -8,10 +8,12 @@
   "selectAccount": "Quick Select Account",
   "username": "Username",
   "password": "Password",
+  "nickname": "Nickname",
   "tenant": "Tenant",
   "usernameTip": "Please enter username",
   "passwordErrorTip": "Password is incorrect",
   "passwordTip": "Please enter password",
+  "nicknameTip": "Please enter nickname",
   "tenantTip": "Please select tenant",
   "verifyRequiredTip": "Please complete the verification first",
   "rememberMe": "Remember Me",
diff --git a/packages/locales/src/langs/zh-CN/authentication.json b/packages/locales/src/langs/zh-CN/authentication.json
index fd705106a..8d7e7e77b 100644
--- a/packages/locales/src/langs/zh-CN/authentication.json
+++ b/packages/locales/src/langs/zh-CN/authentication.json
@@ -8,9 +8,11 @@
   "selectAccount": "快速选择账号",
   "username": "账号",
   "password": "密码",
+  "nickname": "昵称",
   "tenant": "租户",
   "usernameTip": "请输入用户名",
   "passwordTip": "请输入密码",
+  "nicknameTip": "请输入昵称",
   "tenantTip": "请选择租户",
   "verifyRequiredTip": "请先完成验证",
   "passwordErrorTip": "密码错误",

From 2c105a21aa209626f9550616d8e8dee35f6a7a61 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 8 Apr 2025 22:04:56 +0800
Subject: [PATCH 13/13] =?UTF-8?q?feat=EF=BC=9A=E5=A2=9E=E5=8A=A0=20forget-?=
 =?UTF-8?q?password.vue=20=E9=87=8D=E7=BD=AE=E5=AF=86=E7=A0=81=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/core/auth.ts            |  14 +-
 .../_core/authentication/forget-password.vue  | 190 +++++++++++++++++-
 .../src/ui/authentication/forget-password.vue |   2 +-
 .../src/langs/en-US/authentication.json       |   3 +-
 .../src/langs/zh-CN/authentication.json       |   3 +-
 5 files changed, 199 insertions(+), 13 deletions(-)

diff --git a/apps/web-antd/src/api/core/auth.ts b/apps/web-antd/src/api/core/auth.ts
index b9e6fd86a..488c25e8b 100644
--- a/apps/web-antd/src/api/core/auth.ts
+++ b/apps/web-antd/src/api/core/auth.ts
@@ -37,11 +37,18 @@ export namespace AuthApi {
 
   /** 注册接口参数 */
   export interface RegisterParams {
-    tenantName: string
     username: string
     password: string
     captchaVerification: string
   }
+
+  /** 重置密码接口参数 */
+  export interface ResetPasswordParams {
+    password: string;
+    mobile: string;
+    code: string;
+  }
+
 }
 
 /** 登录 */
@@ -105,4 +112,9 @@ export const smsLogin = (data: AuthApi.SmsLoginParams) => {
 /** 注册 */
 export const register = (data: AuthApi.RegisterParams) => {
   return requestClient.post('/system/auth/register', data)
+}
+
+/** 通过短信重置密码 */
+export const smsResetPassword = (data: AuthApi.ResetPasswordParams) => {
+  return requestClient.post('/system/auth/reset-password', data)
 }
\ No newline at end of file
diff --git a/apps/web-antd/src/views/_core/authentication/forget-password.vue b/apps/web-antd/src/views/_core/authentication/forget-password.vue
index fef0d4279..d853a52a7 100644
--- a/apps/web-antd/src/views/_core/authentication/forget-password.vue
+++ b/apps/web-antd/src/views/_core/authentication/forget-password.vue
@@ -2,40 +2,212 @@
 import type { VbenFormSchema } from '@vben/common-ui';
 import type { Recordable } from '@vben/types';
 
-import { computed, ref } from 'vue';
+import { computed, ref, onMounted, h } from 'vue';
 
 import { AuthenticationForgetPassword, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
+import { type AuthApi, sendSmsCode, smsResetPassword } from '#/api';
+import { useAppConfig } from '@vben/hooks';
+import { message } from 'ant-design-vue';
+import { useRouter } from 'vue-router';
+
+import { getTenantSimpleList, getTenantByWebsite } from '#/api/core/auth';
+import { useAccessStore } from '@vben/stores';
 
 defineOptions({ name: 'ForgetPassword' });
 
+const { tenantEnable } = useAppConfig(import.meta.env, import.meta.env.PROD);
+const accessStore = useAccessStore();
+const router = useRouter();
+
 const loading = ref(false);
+const CODE_LENGTH = 4;
+const forgetPasswordRef = ref();
+
+/** 获取租户列表，并默认选中 */
+const tenantList = ref<AuthApi.TenantResult[]>([]); // 租户列表
+const fetchTenantList = async () => {
+  if (!tenantEnable) {
+    return;
+  }
+  try {
+    // 获取租户列表、域名对应租户
+    const websiteTenantPromise = getTenantByWebsite(window.location.hostname);
+    tenantList.value = await getTenantSimpleList();
+
+    // 选中租户：域名 > store 中的租户 > 首个租户
+    let tenantId: number | null = null;
+    const websiteTenant = await websiteTenantPromise;
+    if (websiteTenant?.id) {
+      tenantId = websiteTenant.id;
+    }
+    // 如果没有从域名获取到租户，尝试从 store 中获取
+    if (!tenantId && accessStore.tenantId) {
+      tenantId = accessStore.tenantId;
+    }
+    // 如果还是没有租户，使用列表中的第一个
+    if (!tenantId && tenantList.value?.[0]?.id) {
+      tenantId = tenantList.value[0].id;
+    }
+
+    // 设置选中的租户编号
+    accessStore.setTenantId(tenantId);
+    forgetPasswordRef.value.getFormApi().setFieldValue('tenantId', tenantId);
+  } catch (error) {
+    console.error('获取租户列表失败:', error);
+  }
+};
+
+/** 组件挂载时获取租户信息 */
+onMounted(() => {
+  fetchTenantList();
+});
 
 const formSchema = computed((): VbenFormSchema[] => {
   return [
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        options: tenantList.value.map((item) => ({
+          label: item.name,
+          value: item.id,
+        })),
+        placeholder: $t('authentication.tenantTip'),
+      },
+      fieldName: 'tenantId',
+      label: $t('authentication.tenant'),
+      rules: z
+        .number()
+        .nullable()
+        .refine((val) => val != null && val > 0, $t('authentication.tenantTip'))
+        .default(null),
+      dependencies: {
+        triggerFields: ['tenantId'],
+        if: tenantEnable,
+        trigger(values) {
+          if (values.tenantId) {
+            accessStore.setTenantId(values.tenantId);
+          }
+        },
+      },
+    },
     {
       component: 'VbenInput',
       componentProps: {
-        placeholder: 'example@example.com',
+        placeholder: $t('authentication.mobile'),
       },
-      fieldName: 'email',
-      label: $t('authentication.email'),
+      fieldName: 'mobile',
+      label: $t('authentication.mobile'),
       rules: z
         .string()
-        .min(1, { message: $t('authentication.emailTip') })
-        .email($t('authentication.emailValidErrorTip')),
+        .min(1, { message: $t('authentication.mobileTip') })
+        .refine((v) => /^\d{11}$/.test(v), {
+          message: $t('authentication.mobileErrortip'),
+        }),
+    },
+    {
+      component: 'VbenPinInput',
+      componentProps: {
+        codeLength: CODE_LENGTH,
+        createText: (countdown: number) => {
+          const text =
+            countdown > 0
+              ? $t('authentication.sendText', [countdown])
+              : $t('authentication.sendCode');
+          return text;
+        },
+        placeholder: $t('authentication.code'),
+        handleSendCode: async () => {
+          loading.value = true;
+          try {
+            const formApi = forgetPasswordRef.value?.getFormApi();
+            if (!formApi) {
+              throw new Error('表单未准备好');
+            }
+            // 验证手机号
+            await formApi.validateField('mobile');
+            const isMobileValid = await formApi.isFieldValid('mobile');
+            if (!isMobileValid) {
+              throw new Error('请输入有效的手机号码');
+            }
+
+            // 发送验证码
+            const { mobile } = await formApi.getValues();
+            const scene = 23; // 场景：重置密码
+            await sendSmsCode({ mobile, scene });
+            message.success('验证码发送成功');
+          } finally {
+            loading.value = false;
+          }
+        }
+      },
+      fieldName: 'code',
+      label: $t('authentication.code'),
+      rules: z.string().length(CODE_LENGTH, {
+        message: $t('authentication.codeTip', [CODE_LENGTH]),
+      }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        passwordStrength: true,
+        placeholder: $t('authentication.password'),
+      },
+      fieldName: 'password',
+      label: $t('authentication.password'),
+      renderComponentContent() {
+        return {
+          strengthText: () => $t('authentication.passwordStrength'),
+        };
+      },
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        placeholder: $t('authentication.confirmPassword'),
+      },
+      dependencies: {
+        rules(values) {
+          const { password } = values;
+          return z
+            .string({ required_error: $t('authentication.passwordTip') })
+            .min(1, { message: $t('authentication.passwordTip') })
+            .refine((value) => value === password, {
+              message: $t('authentication.confirmPasswordTip'),
+            });
+        },
+        triggerFields: ['password'],
+      },
+      fieldName: 'confirmPassword',
+      label: $t('authentication.confirmPassword'),
     },
   ];
 });
 
-function handleSubmit(value: Recordable<any>) {
-  // eslint-disable-next-line no-console
-  console.log('reset email:', value);
+/**
+ * 处理重置密码操作
+ * @param values 表单数据
+ */
+async function handleSubmit(values: Recordable<any>) {
+  loading.value = true;
+  try {
+    const { mobile, code, password } = values;
+    await smsResetPassword({ mobile, code, password });
+    message.success($t('authentication.resetPasswordSuccess'));
+    // 重置成功后跳转到首页
+    router.push('/');
+  } catch (error) {
+    console.error('重置密码失败:', error);
+  } finally {
+    loading.value = false;
+  }
 }
 </script>
 
 <template>
   <AuthenticationForgetPassword
+    ref="forgetPasswordRef"
     :form-schema="formSchema"
     :loading="loading"
     @submit="handleSubmit"
diff --git a/packages/effects/common-ui/src/ui/authentication/forget-password.vue b/packages/effects/common-ui/src/ui/authentication/forget-password.vue
index 9c82df49c..74befbdd1 100644
--- a/packages/effects/common-ui/src/ui/authentication/forget-password.vue
+++ b/packages/effects/common-ui/src/ui/authentication/forget-password.vue
@@ -105,7 +105,7 @@ defineExpose({
         @click="handleSubmit"
       >
         <slot name="submitButtonText">
-          {{ submitButtonText || $t('authentication.sendResetLink') }}
+          {{ submitButtonText || $t('authentication.resetPassword') }}
         </slot>
       </VbenButton>
       <VbenButton class="mt-4 w-full" variant="outline" @click="goToLogin()">
diff --git a/packages/locales/src/langs/en-US/authentication.json b/packages/locales/src/langs/en-US/authentication.json
index 319589600..6ea4c7897 100644
--- a/packages/locales/src/langs/en-US/authentication.json
+++ b/packages/locales/src/langs/en-US/authentication.json
@@ -33,9 +33,10 @@
   "passwordStrength": "Use 8 or more characters with a mix of letters, numbers & symbols",
   "forgetPassword": "Forget Password?",
   "forgetPasswordSubtitle": "Enter your email and we'll send you instructions to reset your password",
+  "resetPasswordSuccess": "Reset password success",
   "emailTip": "Please enter email",
   "emailValidErrorTip": "The email format you entered is incorrect",
-  "sendResetLink": "Send Reset Link",
+  "resetPassword": "Reset Password",
   "email": "Email",
   "qrcodeSubtitle": "Scan the QR code with your phone to login",
   "qrcodePrompt": "Click 'Confirm' after scanning to complete login",
diff --git a/packages/locales/src/langs/zh-CN/authentication.json b/packages/locales/src/langs/zh-CN/authentication.json
index 8d7e7e77b..588f2e8be 100644
--- a/packages/locales/src/langs/zh-CN/authentication.json
+++ b/packages/locales/src/langs/zh-CN/authentication.json
@@ -33,9 +33,10 @@
   "passwordStrength": "使用 8 个或更多字符，混合字母、数字和符号",
   "forgetPassword": "忘记密码?",
   "forgetPasswordSubtitle": "输入您的电子邮件，我们将向您发送重置密码的连接",
+  "resetPasswordSuccess": "重置密码成功",
   "emailTip": "请输入邮箱",
   "emailValidErrorTip": "你输入的邮箱格式不正确",
-  "sendResetLink": "发送重置链接",
+  "resetPassword": "重置密码",
   "email": "邮箱",
   "qrcodeSubtitle": "请用手机扫描二维码登录",
   "qrcodePrompt": "扫码后点击 '确认'，即可完成登录",