diff --git a/ui/.env b/ui/.env
new file mode 100644
index 0000000..d1ff296
--- /dev/null
+++ b/ui/.env
@@ -0,0 +1,11 @@
+# port
+VITE_PORT = 8001
+
+# spa-title
+VITE_GLOB_APP_TITLE = GoFrame+NaiveUI版
+
+# spa shortname
+VITE_GLOB_APP_SHORT_NAME = EasyGoAdmin
+
+# 生产环境 开启mock
+VITE_GLOB_PROD_MOCK = true
diff --git a/ui/components.d.ts b/ui/components.d.ts
new file mode 100644
index 0000000..eaa6983
--- /dev/null
+++ b/ui/components.d.ts
@@ -0,0 +1,119 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    Application: typeof import('./src/components/Application/Application.vue')['default']
+    AppSearch: typeof import('./src/components/Application/search/AppSearch.vue')['default']
+    Authority: typeof import('./src/components/Authority/src/Authority.vue')['default']
+    BasicForm: typeof import('./src/components/Form/src/BasicForm.vue')['default']
+    BasicModal: typeof import('./src/components/Modal/src/basicModal.vue')['default']
+    BasicSelect: typeof import('./src/components/Select/src/BasicSelect.vue')['default']
+    BasicUpload: typeof import('./src/components/Upload/src/BasicUpload.vue')['default']
+    ChinaArea: typeof import('./src/components/ChinaArea/index.vue')['default']
+    ColumnSetting: typeof import('./src/components/Table/src/components/settings/ColumnSetting.vue')['default']
+    CountTo: typeof import('./src/components/CountTo/CountTo.vue')['default']
+    Cropper: typeof import('./src/components/Cropper/src/Cropper.vue')['default']
+    CropperImage: typeof import('./src/components/Cropper/src/CropperImage.vue')['default']
+    CropperModal: typeof import('./src/components/Cropper/src/CropperModal.vue')['default']
+    EditableCell: typeof import('./src/components/Table/src/components/editable/EditableCell.vue')['default']
+    File: typeof import('./src/components/Upload/file.vue')['default']
+    Image: typeof import('./src/components/Upload/Image.vue')['default']
+    ImagePreview: typeof import('./src/components/Upload/src/ImagePreview.vue')['default']
+    Images: typeof import('./src/components/Upload/Images.vue')['default']
+    ImageUpload: typeof import('./src/components/Upload/src/ImageUpload.vue')['default']
+    ImportExcel: typeof import('./src/components/Excel/src/ImportExcel.vue')['default']
+    ImportFile: typeof import('./src/components/importFile/index.vue')['default']
+    Intensity: typeof import('./src/components/Password/src/components/Intensity.vue')['default']
+    Loading: typeof import('./src/components/Loading/src/Loading.vue')['default']
+    Lockscreen: typeof import('./src/components/Lockscreen/Lockscreen.vue')['default']
+    NAlert: typeof import('naive-ui')['NAlert']
+    NAutoComplete: typeof import('naive-ui')['NAutoComplete']
+    NAvatar: typeof import('naive-ui')['NAvatar']
+    NBackTop: typeof import('naive-ui')['NBackTop']
+    NBadge: typeof import('naive-ui')['NBadge']
+    NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
+    NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
+    NButton: typeof import('naive-ui')['NButton']
+    NCard: typeof import('naive-ui')['NCard']
+    NCascader: typeof import('naive-ui')['NCascader']
+    NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NCheckboxGroup: typeof import('naive-ui')['NCheckboxGroup']
+    NCode: typeof import('naive-ui')['NCode']
+    NCol: typeof import('naive-ui')['NCol']
+    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDataTable: typeof import('naive-ui')['NDataTable']
+    NDatePicker: typeof import('naive-ui')['NDatePicker']
+    NDescriptions: typeof import('naive-ui')['NDescriptions']
+    NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem']
+    NDivider: typeof import('naive-ui')['NDivider']
+    NDrawer: typeof import('naive-ui')['NDrawer']
+    NDrawerContent: typeof import('naive-ui')['NDrawerContent']
+    NDropdown: typeof import('naive-ui')['NDropdown']
+    NEl: typeof import('naive-ui')['NEl']
+    NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NEmpty: typeof import('naive-ui')['NEmpty']
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
+    NGi: typeof import('naive-ui')['NGi']
+    NGrid: typeof import('naive-ui')['NGrid']
+    NGridItem: typeof import('naive-ui')['NGridItem']
+    NIcon: typeof import('naive-ui')['NIcon']
+    NImage: typeof import('naive-ui')['NImage']
+    NInput: typeof import('naive-ui')['NInput']
+    NInputNumber: typeof import('naive-ui')['NInputNumber']
+    NLayout: typeof import('naive-ui')['NLayout']
+    NLayoutHeader: typeof import('naive-ui')['NLayoutHeader']
+    NLayoutSider: typeof import('naive-ui')['NLayoutSider']
+    NList: typeof import('naive-ui')['NList']
+    NListItem: typeof import('naive-ui')['NListItem']
+    NMenu: typeof import('naive-ui')['NMenu']
+    NModal: typeof import('naive-ui')['NModal']
+    NPagination: typeof import('naive-ui')['NPagination']
+    NPopconfirm: typeof import('naive-ui')['NPopconfirm']
+    NPopover: typeof import('naive-ui')['NPopover']
+    NProgress: typeof import('naive-ui')['NProgress']
+    NRadio: typeof import('naive-ui')['NRadio']
+    NRadioGroup: typeof import('naive-ui')['NRadioGroup']
+    NRow: typeof import('naive-ui')['NRow']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSelect: typeof import('naive-ui')['NSelect']
+    NSkeleton: typeof import('naive-ui')['NSkeleton']
+    NSpace: typeof import('naive-ui')['NSpace']
+    NSpin: typeof import('naive-ui')['NSpin']
+    NSwitch: typeof import('naive-ui')['NSwitch']
+    NTabPane: typeof import('naive-ui')['NTabPane']
+    NTabs: typeof import('naive-ui')['NTabs']
+    NTag: typeof import('naive-ui')['NTag']
+    NThing: typeof import('naive-ui')['NThing']
+    NTimePicker: typeof import('naive-ui')['NTimePicker']
+    NTooltip: typeof import('naive-ui')['NTooltip']
+    NTree: typeof import('naive-ui')['NTree']
+    NTreeSelect: typeof import('naive-ui')['NTreeSelect']
+    NumberInput: typeof import('./src/components/numberInput/index.vue')['default']
+    NUpload: typeof import('naive-ui')['NUpload']
+    NUploadDragger: typeof import('naive-ui')['NUploadDragger']
+    NWatermark: typeof import('naive-ui')['NWatermark']
+    PageFooter: typeof import('./src/components/Page/src/PageFooter.vue')['default']
+    PageWrapper: typeof import('./src/components/Page/src/PageWrapper.vue')['default']
+    Pagination: typeof import('./src/components/pagination/index.vue')['default']
+    Password: typeof import('./src/components/Password/src/Password.vue')['default']
+    Picker: typeof import('./src/components/icon/picker.vue')['default']
+    Qrcode: typeof import('./src/components/Qrcode/src/Qrcode.vue')['default']
+    Recharge: typeof import('./src/components/Lockscreen/Recharge.vue')['default']
+    Region: typeof import('./src/components/Region/src/Region.vue')['default']
+    Render: typeof import('./src/components/Render/src/Render.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    Table: typeof import('./src/components/Table/src/Table.vue')['default']
+    TableAction: typeof import('./src/components/Table/src/components/TableAction.vue')['default']
+    TableImg: typeof import('./src/components/TableImg/src/TableImg.vue')['default']
+    TableSelect: typeof import('./src/components/TableSelect/src/TableSelect.vue')['default']
+    Tinymce: typeof import('./src/components/Editor/tinymce.vue')['default']
+    Websocket: typeof import('./src/components/Websocket/index.vue')['default']
+  }
+}
diff --git a/ui/src/layout/components/Main/index.ts b/ui/src/layout/components/Main/index.ts
new file mode 100644
index 0000000..f63218e
--- /dev/null
+++ b/ui/src/layout/components/Main/index.ts
@@ -0,0 +1,3 @@
+import MainView from './index.vue';
+
+export { MainView };
diff --git a/ui/src/layout/components/Main/index.vue b/ui/src/layout/components/Main/index.vue
new file mode 100644
index 0000000..a95d9a0
--- /dev/null
+++ b/ui/src/layout/components/Main/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <RouterView>
+    <template #default="{ Component, route }">
+      <transition :name="getTransitionName" appear mode="out-in">
+        <keep-alive v-if="keepAliveComponents" :include="keepAliveComponents">
+          <component :is="Component" :key="route.fullPath" />
+        </keep-alive>
+        <component :is="Component" v-else :key="route.fullPath" />
+      </transition>
+    </template>
+  </RouterView>
+</template>
+
+<script lang="ts" setup>
+  import { computed, unref } from 'vue';
+  import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
+  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
+
+  const { getIsPageAnimate, getPageAnimateType } = useProjectSetting();
+  const asyncRouteStore = useAsyncRouteStore();
+
+  // 需要缓存的路由组件
+  const keepAliveComponents = computed(() => asyncRouteStore.keepAliveComponents);
+
+  const getTransitionName = computed(() => {
+    return unref(getIsPageAnimate) ? unref(getPageAnimateType) : '';
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/ui/src/views/monitor/job/log/columns.ts b/ui/src/views/monitor/job/log/columns.ts
new file mode 100644
index 0000000..5595da7
--- /dev/null
+++ b/ui/src/views/monitor/job/log/columns.ts
@@ -0,0 +1,85 @@
+import { h } from 'vue';
+
+export const columns = [
+  {
+    type: 'selection',
+    width: 50,
+    fixed: 'left',
+  },
+  {
+    title: 'ID',
+    key: 'id',
+    fixed: 'left',
+    width: 100,
+  },
+  {
+    title: '任务名称',
+    key: 'jobName',
+    width: 200,
+  },
+  {
+    title: '任务组名',
+    key: 'jobGroup',
+    width: 100,
+  },
+  {
+    title: '任务触发器',
+    key: 'jobTrigger',
+    width: 200,
+  },
+  {
+    title: '任务日志信息',
+    key: 'jobMessage',
+    width: 300,
+  },
+  {
+    title: '执行表达式',
+    key: 'cronExpression',
+    width: 150,
+  },
+  {
+    title: '执行状态',
+    key: 'status',
+    width: 100,
+    render(record) {
+      let typeText = '';
+      switch (record.status) {
+        case 0:
+          typeText = '未发布';
+          break;
+        case 1:
+          typeText = '运行中';
+          break;
+        case 2:
+          typeText = '暂停';
+          break;
+        case 3:
+          typeText = '删除';
+          break;
+        default:
+          break;
+      }
+      return h('span', typeText || '-');
+    },
+  },
+  {
+    title: '任务开始时间',
+    key: 'startTime',
+    width: 180,
+  },
+  {
+    title: '任务结束时间',
+    key: 'endTime',
+    width: 180,
+  },
+  {
+    title: '任务执行时间',
+    key: 'createTime',
+    width: 180,
+  },
+  {
+    title: '任务执行耗时',
+    key: 'consumeTime',
+    width: 120,
+  },
+];
diff --git a/ui/src/views/monitor/job/log/edit.vue b/ui/src/views/monitor/job/log/edit.vue
new file mode 100644
index 0000000..43311f9
--- /dev/null
+++ b/ui/src/views/monitor/job/log/edit.vue
@@ -0,0 +1,116 @@
+<template>
+  <basicModal @register="modalRegister" ref="modalRef" class="basicModal basicFormModal">
+    <template #default>
+      <n-descriptions :column="2" bordered label-placement="left" :labelStyle="{ width: '150px' }">
+        <n-descriptions-item label="任务名称:">{{ formData.jobName }}</n-descriptions-item>
+        <n-descriptions-item label="任务组名:">{{ formData.jobGroup }}</n-descriptions-item>
+        <n-descriptions-item label="任务触发器:">{{ formData.jobTrigger }}</n-descriptions-item>
+        <n-descriptions-item label="任务日志信息:">{{ formData.jobMessage }}</n-descriptions-item>
+        <n-descriptions-item label="任务执行表达式:">{{
+          formData.cronExpression
+        }}</n-descriptions-item>
+        <n-descriptions-item label="任务请求状态">
+          <n-tag :type="formData.status ? 'danger' : 'success'" :bordered="false">{{
+            formData.status ? '异常' : '正常'
+          }}</n-tag>
+        </n-descriptions-item>
+        <n-descriptions-item label="任务开始时间:">{{ formData.startTime }}</n-descriptions-item>
+        <n-descriptions-item label="任务结束时间:">{{ formData.endTime }}</n-descriptions-item>
+        <n-descriptions-item label="任务执行时间:">{{ formData.createTime }}</n-descriptions-item>
+        <n-descriptions-item label="任务执行耗时:"
+          >{{ formData.consumeTime }}ms</n-descriptions-item
+        >
+        <n-descriptions-item label="执行异常信息:" :span="3">{{
+          formData.exceptionInfo
+        }}</n-descriptions-item>
+      </n-descriptions>
+    </template>
+    <template #action>
+      <n-button @click="handleClose">取消</n-button>
+    </template>
+  </basicModal>
+</template>
+<script lang="ts" setup>
+  import { getJobLogDetail } from '@/api/monitor/job';
+  import { onMounted, reactive, shallowRef } from 'vue';
+  import { useModal } from '@/components/Modal';
+
+  /**
+   * 定义表单参数
+   */
+  const formData = reactive({
+    id: '',
+    jobName: '',
+    jobGroup: '',
+    jobTrigger: '',
+    jobMessage: '',
+    status: '',
+    cronExpression: '',
+    startTime: '',
+    endTime: '',
+    createTime: '',
+    consumeTime: '',
+    exceptionInfo: '',
+  });
+
+  /**
+   * 定义模态
+   */
+  const [modalRegister, { openModal, setSubLoading }] = useModal({
+    title: '日志详情',
+    width: 850,
+  });
+  const emit = defineEmits(['update:visible']);
+
+  /**
+   * 定义接收的参数
+   */
+  const props = defineProps({
+    visible: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    logId: {
+      type: Number,
+      required: true,
+      default: 0,
+    },
+  });
+
+  /**
+   * 关闭窗体
+   */
+  const handleClose = () => {
+    emit('update:visible', false);
+  };
+
+  /**
+   * 设置表单数据
+   */
+  const setFormData = async () => {
+    const data = await getJobLogDetail(props.logId);
+    for (const key in formData) {
+      if (data[key] != null && data[key] != undefined) {
+        //@ts-ignore
+        formData[key] = data[key];
+      }
+    }
+  };
+
+  /**
+   * 钩子函数
+   */
+  onMounted(() => {
+    if (props.logId) {
+      setFormData();
+    }
+  });
+
+  /**
+   * 定义函数
+   */
+  defineExpose({
+    openModal,
+  });
+</script>
diff --git a/ui/src/views/monitor/job/log/index.vue b/ui/src/views/monitor/job/log/index.vue
new file mode 100644
index 0000000..e7bbb56
--- /dev/null
+++ b/ui/src/views/monitor/job/log/index.vue
@@ -0,0 +1,236 @@
+<template>
+  <n-drawer v-model:show="isDrawer" :width="size">
+    <n-drawer-content title="调度日志" closable>
+      <template #default>
+        <n-card :bordered="false" class="pt-3 mb-3 proCard">
+          <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
+            <template #statusSlot="{ model, field }">
+              <n-input v-model:value="model[field]" />
+            </template>
+          </BasicForm>
+        </n-card>
+        <n-card :bordered="false" class="proCard">
+          <BasicTable
+            :columns="columns"
+            :request="loadDataTable"
+            :row-key="(row) => row.id"
+            ref="basicTableRef"
+            :actionColumn="actionColumn"
+            @update:checked-row-keys="onCheckedRow"
+            :autoScrollX="true"
+          >
+            <template #tableTitle>
+              <n-space>
+                <n-button type="error" @click="handleDelete" :disabled="!rowKeys.length">
+                  <template #icon>
+                    <n-icon>
+                      <DeleteOutlined />
+                    </n-icon>
+                  </template>
+                  删除
+                </n-button>
+              </n-space>
+            </template>
+          </BasicTable>
+        </n-card>
+      </template>
+      <template #footer>
+        <span class="dialog-footer">
+          <n-button @click="handleClose">取消</n-button>
+        </span>
+      </template>
+    </n-drawer-content>
+    <editDialog
+      ref="createModalRef"
+      :logId="logId"
+      v-if="editVisible"
+      v-model:visible="editVisible"
+      @success="reloadTable('noRefresh')"
+    />
+  </n-drawer>
+</template>
+
+<script lang="ts" setup>
+  import { h, nextTick, reactive, ref, unref } from 'vue';
+  import { useMessage, useDialog } from 'naive-ui';
+  import { TableAction } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form/index';
+  import { getJobLogList, jobLogDelete, jobLogBatchDelete } from '@/api/monitor/job';
+  import { columns } from './columns';
+  import { PlusOutlined, DeleteOutlined, EyeOutlined } from '@vicons/antd';
+  import editDialog from './edit.vue';
+  import { schemas } from './querySchemas';
+  import { renderIcon } from '@/utils';
+
+  /**
+   * 定义参数
+   */
+  const message = useMessage();
+  const dialog = useDialog();
+  const basicTableRef = ref();
+  const createModalRef = ref();
+  const editVisible = ref(false);
+  const isDrawer = ref(false);
+  const logId = ref(0);
+  const size = document.body.clientWidth - 500;
+  const rowKeys = ref([]);
+
+  /**
+   * 定义查询参数
+   */
+  const formParams = reactive({
+    jobName: '',
+    status: '',
+  });
+
+  /**
+   * 定义接收的参数
+   */
+  const props = defineProps({
+    jobId: {
+      type: Number,
+      required: true,
+      default: 0,
+    },
+  });
+
+  /**
+   * 定义操作栏
+   */
+  const actionColumn = reactive({
+    width: 200,
+    title: '操作',
+    align: 'center',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '详情',
+            icon: renderIcon(EyeOutlined),
+            type: 'info',
+            onClick: handleDetail.bind(null, record),
+          },
+          {
+            label: '删除',
+            icon: renderIcon(DeleteOutlined),
+            type: 'error',
+            onClick: handleDelete.bind(null, record),
+          },
+        ],
+      });
+    },
+  });
+
+  /**
+   * 加载数据列表
+   * @param res 参数
+   */
+  const loadDataTable = async (res) => {
+    rowKeys.value = [];
+    const result = await getJobLogList({ ...formParams, jobId: props.jobId, ...res });
+    return result;
+  };
+
+  /**
+   * 数据行选中事件
+   * @param keys 参数
+   */
+  function onCheckedRow(keys) {
+    rowKeys.value = keys;
+  }
+
+  /**
+   * 刷新数据列表
+   * @param noRefresh 参数
+   */
+  function reloadTable(noRefresh = '') {
+    basicTableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
+  }
+
+  /**
+   * 执行提交表单
+   * @param values 参数
+   */
+  function handleSubmit(values: Recordable) {
+    for (const key in formParams) {
+      formParams[key] = '';
+    }
+    for (const key in values) {
+      formParams[key] = values[key];
+    }
+    reloadTable();
+  }
+
+  /**
+   * 执行重置
+   * @param values 参数
+   */
+  function handleReset(values: Recordable) {
+    for (const key in formParams) {
+      formParams[key] = '';
+    }
+    for (const key in values) {
+      formParams[key] = values[key];
+    }
+    reloadTable();
+  }
+
+  /**
+   * 执行注册
+   */
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 110,
+    schemas,
+  });
+  /**
+   * 打开窗体
+   */
+  const openDrawer = async (noticeId) => {
+    isDrawer.value = true;
+    for (const key in formParams) {
+      formParams[key] = '';
+    }
+  };
+  /**
+   * 关闭窗体
+   */
+  const handleClose = () => {
+    isDrawer.value = false;
+  };
+  /**
+   * 执行查看详情
+   */
+  async function handleDetail(record: Recordable) {
+    logId.value = record.id;
+    editVisible.value = true;
+    await nextTick();
+    createModalRef.value.openModal();
+  }
+
+  /**
+   * 执行删除
+   * @param id 参数
+   */
+  async function handleDelete(record) {
+    dialog.warning({
+      title: '提示',
+      content: '确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: async () => {
+        record.id ? await jobLogDelete(record.id) : await jobLogBatchDelete(rowKeys.value);
+        message.success('删除成功');
+        reloadTable();
+      },
+    });
+  }
+  defineExpose({
+    openDrawer,
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/ui/src/views/monitor/job/log/querySchemas.ts b/ui/src/views/monitor/job/log/querySchemas.ts
new file mode 100644
index 0000000..859c66c
--- /dev/null
+++ b/ui/src/views/monitor/job/log/querySchemas.ts
@@ -0,0 +1,30 @@
+import { FormSchema } from '@/components/Form/index';
+export const schemas: FormSchema[] = [
+  {
+    field: 'jobName',
+    component: 'NInput',
+    label: '任务名称',
+    componentProps: {
+      placeholder: '请输入数据源名称',
+    },
+  },
+  {
+    field: 'status',
+    component: 'NSelect',
+    label: '任务状态',
+    componentProps: {
+      placeholder: '请选择任务状态',
+      clearable: true,
+      options: [
+        {
+          label: '正常',
+          value: 0,
+        },
+        {
+          label: '失败',
+          value: 1,
+        },
+      ],
+    },
+  },
+];