From b476eb1c59a3e68f14bb4f686f7b7a65b45cbe35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E7=BA=A2=E4=B8=BD?= <1181930680@qq.com>
Date: Thu, 14 Nov 2024 17:30:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=97=A5=E5=BF=97=E7=AE=A1=E7=90=86=E3=80=81?=
 =?UTF-8?q?=E5=9C=A8=E7=BA=BF=E7=94=A8=E6=88=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Table/src/hooks/useColumns.ts  |   1 +
 src/views/logger/emailLog/columns.ts          | 102 +++++++++++
 src/views/logger/emailLog/edit.vue            | 154 +++++++++++++++++
 src/views/logger/emailLog/index.vue           | 162 ++++++++++++++++++
 src/views/logger/emailLog/querySchemas.ts     |  72 ++++++++
 src/views/logger/fileLog/columns.ts           |  81 +++++++++
 src/views/logger/fileLog/edit.vue             | 101 +++++++++++
 src/views/logger/fileLog/index.vue            | 162 ++++++++++++++++++
 src/views/logger/fileLog/querySchemas.ts      |  34 ++++
 src/views/logger/smsLog/columns.ts            |  79 +++++++++
 src/views/logger/smsLog/edit.vue              | 154 +++++++++++++++++
 src/views/logger/smsLog/index.vue             | 162 ++++++++++++++++++
 src/views/logger/smsLog/querySchemas.ts       |  72 ++++++++
 src/views/monitor/online/columns.ts           |  58 +++++++
 src/views/monitor/online/index.vue            | 128 ++++++++++++++
 src/views/monitor/online/querySchemas.ts      |  19 ++
 src/views/system/logger/loginLog.vue          | 161 +++++++++++++++++
 src/views/system/logger/loginLog/columns.ts   |  87 ++++++++++
 src/views/system/logger/loginLog/edit.vue     | 109 ++++++++++++
 .../system/logger/loginLog/querySchemas.ts    |  49 ++++++
 src/views/system/logger/operLog.vue           | 161 +++++++++++++++++
 src/views/system/logger/operLog/columns.ts    |  92 ++++++++++
 src/views/system/logger/operLog/edit.vue      | 109 ++++++++++++
 .../system/logger/operLog/querySchemas.ts     |  30 ++++
 src/views/system/role/querySchemas.ts         |  11 ++
 25 files changed, 2350 insertions(+)
 create mode 100644 src/views/logger/emailLog/columns.ts
 create mode 100644 src/views/logger/emailLog/edit.vue
 create mode 100644 src/views/logger/emailLog/index.vue
 create mode 100644 src/views/logger/emailLog/querySchemas.ts
 create mode 100644 src/views/logger/fileLog/columns.ts
 create mode 100644 src/views/logger/fileLog/edit.vue
 create mode 100644 src/views/logger/fileLog/index.vue
 create mode 100644 src/views/logger/fileLog/querySchemas.ts
 create mode 100644 src/views/logger/smsLog/columns.ts
 create mode 100644 src/views/logger/smsLog/edit.vue
 create mode 100644 src/views/logger/smsLog/index.vue
 create mode 100644 src/views/logger/smsLog/querySchemas.ts
 create mode 100644 src/views/monitor/online/columns.ts
 create mode 100644 src/views/monitor/online/index.vue
 create mode 100644 src/views/monitor/online/querySchemas.ts
 create mode 100644 src/views/system/logger/loginLog.vue
 create mode 100644 src/views/system/logger/loginLog/columns.ts
 create mode 100644 src/views/system/logger/loginLog/edit.vue
 create mode 100644 src/views/system/logger/loginLog/querySchemas.ts
 create mode 100644 src/views/system/logger/operLog.vue
 create mode 100644 src/views/system/logger/operLog/columns.ts
 create mode 100644 src/views/system/logger/operLog/edit.vue
 create mode 100644 src/views/system/logger/operLog/querySchemas.ts
 create mode 100644 src/views/system/role/querySchemas.ts

diff --git a/src/components/Table/src/hooks/useColumns.ts b/src/components/Table/src/hooks/useColumns.ts
index 26e9c5c..ce3ffb8 100644
--- a/src/components/Table/src/hooks/useColumns.ts
+++ b/src/components/Table/src/hooks/useColumns.ts
@@ -72,6 +72,7 @@ export function useColumns(propsRef: ComputedRef<BasicTableProps>) {
       .map((column) => {
         //默认 ellipsis 为true
         column.ellipsis = typeof column.ellipsis === 'undefined' ? { tooltip: true } : false;
+        column.align = typeof column.align === 'undefined' ?'center':column.align ;
         const { edit, title, helpMessage, helpMessageProps } = column;
         // 支持 helpMessage
         if (helpMessage) {
diff --git a/src/views/logger/emailLog/columns.ts b/src/views/logger/emailLog/columns.ts
new file mode 100644
index 0000000..f4e43c8
--- /dev/null
+++ b/src/views/logger/emailLog/columns.ts
@@ -0,0 +1,102 @@
+import { h } from 'vue';
+export const columns = [
+  {
+    type: 'selection',
+    width: 50,
+    fixed:"left"
+  },
+  {
+    title: 'ID',
+    key: 'id',
+    fixed: 'left',
+    width: 50,
+  },
+  {
+    title: '日志标题',
+    key: 'title',
+    width: 100,
+  },
+  {
+    title: '日志类型',
+    key: 'type',
+    width: 100,
+    render(record) {
+      let typeText = '';
+      switch (record.type) {
+        case 1:
+          typeText = '登录';
+          break;
+        case 2:
+          typeText = '注册';
+          break;
+        case 3:
+          typeText = '找回密码';
+          break;
+        case 4:
+          typeText = '业务';
+          break;
+        case 5:
+          typeText = '其他';
+          break;
+        default:
+          break;
+      }
+      return h('span', typeText || '-');
+    },
+  },
+  {
+    title: '模板编号',
+    key: 'code',
+    width: 100,
+  },
+  {
+    title: '接收人邮箱',
+    key: 'receiveEmail',
+    width: 100,
+  },
+  {
+    title: '接收人类型',
+    key: 'status',
+    width: 100,
+    render(record) {
+      let typeText = '';
+      switch (record.receiveType) {
+        case 1:
+          typeText = '系统用户';
+          break;
+        case 2:
+          typeText = '会员用户';
+          break;
+        case 3:
+          typeText = '其他';
+          break;
+        default:
+          break;
+      }
+      return h('span', typeText || '-');
+    },
+  },
+  {
+    title: '请求耗时',
+    key: 'consumeTime',
+    width: 100,
+  },
+  {
+    title: '日志状态',
+    key: 'status',
+    width: 100,
+    render(record) {
+      return h('span', record.status === 1 ? '已读' : '未读');
+    },
+  },
+  {
+    title: '创建人',
+    key: 'createUser',
+    width: 100,
+  },
+  {
+    title: '创建时间',
+    key: 'createTime',
+    width: 180,
+  }
+];
diff --git a/src/views/logger/emailLog/edit.vue b/src/views/logger/emailLog/edit.vue
new file mode 100644
index 0000000..ef334b0
--- /dev/null
+++ b/src/views/logger/emailLog/edit.vue
@@ -0,0 +1,154 @@
+<template>
+  <basicModal @register="modalRegister" ref="modalRef" class="basicModal basicFormModal">
+    <template #default>
+      <n-descriptions class="margin-top" :column="2" bordered :labelStyle="{ width: '120px' }" label-placement="left">
+        <n-descriptions-item label="日志标题:">{{ formData.title }}</n-descriptions-item>
+        <n-descriptions-item label="日志类型:">{{ getTyepText(formData.type) }}</n-descriptions-item>
+        <n-descriptions-item label="模板编号:">{{ formData.code }}</n-descriptions-item>
+        <n-descriptions-item label="接收人邮箱:">{{ formData.receiveEmail }}</n-descriptions-item>
+        <n-descriptions-item label="接收人类型:">{{
+          getReviceType(formData.receiveType)
+        }}</n-descriptions-item>
+        <n-descriptions-item label="请求耗时:">{{ formData.consumeTime }}s</n-descriptions-item>
+        <n-descriptions-item label="业务类型:">{{
+          formData.bizType ? (formData.bizType == 1 ? '订单' : '其他') : ''
+        }}</n-descriptions-item>
+        <n-descriptions-item label="业务ID:">{{ formData.bizId }}</n-descriptions-item>
+        <n-descriptions-item label="日志状态:">{{
+          formData.status == 1 ? '已读' : '未读'
+        }}</n-descriptions-item>
+        <n-descriptions-item label="请求状态">
+          {{ formData.status ? '失败' : '成功' }}
+        </n-descriptions-item>
+        <n-descriptions-item label="业务内容" :span="3">
+          {{ formData.bizContent }}
+        </n-descriptions-item>
+        <n-descriptions-item label="请求参数" :span="3">
+          {{ formData.param }}
+        </n-descriptions-item>
+        <n-descriptions-item label="返回结果" :span="3">
+          {{ formData.result }}
+        </n-descriptions-item>
+        <n-descriptions-item label="错误描述" :span="3">
+          {{ formData.error }}
+        </n-descriptions-item>
+      </n-descriptions>
+    </template>
+    <template #action>
+      <n-button @click="handleClose">取消</n-button>
+    </template>
+  </basicModal>
+</template>
+<script lang="ts" setup>
+import { getEmailLogDetail } from '@/api/logger/emailLog';
+import { onMounted, ref } from 'vue';
+import { useModal } from '@/components/Modal';
+
+/**
+ * 定义参数变量
+ */
+const emit = defineEmits(['success', 'update:visible']);
+const formData = ref({});
+const [modalRegister, { openModal }] = useModal({
+  title: '邮件日志详情',
+  subBtuText: '确定',
+  width: 800,
+});
+
+/**
+ * 定义接收的参数
+ */
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  emailLogId: {
+    type: Number,
+    required: true,
+    default: 0,
+  },
+});
+
+/**
+ * 关闭窗体
+ */
+const handleClose = () => {
+  emit('update:visible', false);
+};
+
+/**
+ * 设置表单数据
+ */
+const setFormData = async () => {
+  const data = await getEmailLogDetail(props.emailLogId);
+  formData.value = data;
+};
+/**
+ * 获取接收人类型描述
+ */
+const getReviceType = (type) => {
+  let typeText = '';
+  switch (type) {
+    case 1:
+      typeText = '系统用户';
+      break;
+    case 2:
+      typeText = '会员用户';
+      break;
+    case 3:
+      typeText = '其他';
+      break;
+    default:
+      break;
+  }
+  return typeText;
+};
+
+/**
+ * 获取日志类型描述
+ * @param type 类型
+ */
+const getTyepText = (type) => {
+  let typeText = '';
+  switch (type) {
+    case 1:
+      typeText = '登录';
+      break;
+    case 2:
+      typeText = '注册';
+      break;
+    case 3:
+      typeText = '找回密码';
+      break;
+    case 4:
+      typeText = '业务';
+      break;
+    case 5:
+      typeText = '其他';
+      break;
+    default:
+      break;
+  }
+  return typeText;
+};
+
+/**
+ * 钩子函数
+ */
+onMounted(() => {
+  if (props.emailLogId) {
+    setFormData();
+  }
+});
+//导出方法
+defineExpose({
+  openModal,
+});
+</script>
+<style lang="less" scoped>
+:deep(.n-descriptions__body .n-descriptions__table .n-descriptions__cell) {
+  word-break: break-all;
+}
+</style>
diff --git a/src/views/logger/emailLog/index.vue b/src/views/logger/emailLog/index.vue
new file mode 100644
index 0000000..c192b65
--- /dev/null
+++ b/src/views/logger/emailLog/index.vue
@@ -0,0 +1,162 @@
+<template>
+  <div>
+    <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"
+              v-perm="['sys:emailLog:batchDelete']">
+              <template #icon>
+                <n-icon>
+                  <DeleteOutlined />
+                </n-icon>
+              </template>
+              删除
+            </n-button>
+          </n-space>
+        </template>
+      </BasicTable>
+    </n-card>
+    <editDialog ref="createModalRef" :emailLogId="emailLogId" v-if="editVisible" v-model:visible="editVisible" />
+  </div>
+</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 { getEmailLogList, emailLogDelete, emailLogBatchDelete } from '@/api/logger/emailLog';
+import { columns } from './columns';
+import { DeleteOutlined, EyeOutlined } from '@vicons/antd';
+import editDialog from './edit.vue';
+import { basicModal, useModal } from '@/components/Modal';
+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 emailLogId = ref(0);
+const rowKeys = ref([]);
+
+const showModal = ref(false);
+const formParams = reactive({
+  title: '',
+  bizType: '',
+  type: '',
+  status: '',
+});
+
+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),
+          auth: ['sys:emailLog:detail'],
+        },
+        {
+          label: '删除',
+          icon: renderIcon(DeleteOutlined),
+          type: 'error',
+          onClick: handleDelete.bind(null, record),
+          auth: ['sys:emailLog:delete'],
+        },
+      ],
+    });
+  },
+});
+
+function addTable() {
+  showModal.value = true;
+}
+
+const loadDataTable = async (res) => {
+  const result = await getEmailLogList({ ...formParams, ...res });
+  return result;
+};
+
+function onCheckedRow(keys) {
+  rowKeys.value = keys;
+}
+
+function reloadTable(noRefresh = '') {
+  basicTableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
+}
+
+function handleSubmit(values: Recordable) {
+  for (const key in formParams) {
+    formParams[key] = '';
+  }
+  for (const key in values) {
+    formParams[key] = values[key];
+  }
+  reloadTable();
+}
+
+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: 80,
+  schemas,
+});
+
+/**
+* 执行查看
+*/
+async function handleDetail(record: Recordable) {
+  emailLogId.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 emailLogDelete(record.id) : await emailLogBatchDelete(rowKeys.value);
+      message.success('删除成功');
+      reloadTable();
+    },
+  })
+}
+
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/logger/emailLog/querySchemas.ts b/src/views/logger/emailLog/querySchemas.ts
new file mode 100644
index 0000000..aab8594
--- /dev/null
+++ b/src/views/logger/emailLog/querySchemas.ts
@@ -0,0 +1,72 @@
+import { FormSchema } from '@/components/Form/index';
+export const schemas: FormSchema[] = [
+  {
+    field: 'title',
+    component: 'NInput',
+    label: '短信标题',
+    componentProps: {
+      placeholder: '请输入短信标题',
+    },
+  },
+  {
+    field: 'receiveType',
+    component: 'NSelect',
+    label: '接收类型',
+    componentProps: {
+      placeholder: '请选择接收类型',
+      clearable: true,
+      options: [
+        {
+          label: '系统用户',
+          value: '1',
+        },
+        {
+          label: '会员用户',
+          value: '2',
+        },
+        {
+          label: '其他',
+          value: '3',
+        },
+      ],
+    },
+  },
+  {
+    field: 'bizType',
+    component: 'NSelect',
+    label: '业务类型',
+    componentProps: {
+      placeholder: '请选择业务类型',
+      clearable: true,
+      options: [
+        {
+          label: '订单',
+          value: '1',
+        },
+        {
+          label: '其他',
+          value: '2',
+        },
+      ],
+    },
+  },
+  {
+    field: 'status',
+    component: 'NSelect',
+    label: '状态',
+    componentProps: {
+      placeholder: '请选择状态',
+      clearable: true,
+      options: [
+        {
+          label: '已读',
+          value: '1',
+        },
+        {
+          label: '未读',
+          value: '0',
+        },
+      ],
+    },
+  },
+];
diff --git a/src/views/logger/fileLog/columns.ts b/src/views/logger/fileLog/columns.ts
new file mode 100644
index 0000000..820fece
--- /dev/null
+++ b/src/views/logger/fileLog/columns.ts
@@ -0,0 +1,81 @@
+import { h } from 'vue';
+export const columns = [
+  {
+    type: 'selection',
+    width: 50,
+    fixed:"left"
+  },
+  {
+    title: 'ID',
+    key: 'id',
+    fixed: 'left',
+    width: 50,
+  },
+  {
+    title: '文件名称',
+    key: 'originalName',
+    width: 200,
+    render(record) {
+      return h(
+        'a',
+        {
+          href: record.filePath,
+          target: '_blank',
+        },
+        record.originalName,
+      );
+    },
+  },
+  {
+    title: '日志类型',
+    key: 'type',
+    width: 100,
+    render(record) {
+      let typeText = '';
+      switch (record.type) {
+        case 0:
+          typeText = '单个文件';
+          break;
+        case 1:
+          typeText = '多个文件';
+          break;
+        case 2:
+          typeText = '其他';
+          break;
+        default:
+          break;
+      }
+      return h('span', typeText || '-');
+    },
+  },
+  {
+    title: '文件类型',
+    key: 'fileType',
+    align:'center',
+    width: 100,
+  },
+  {
+    title: '文件大小',
+    key: 'fileSize',
+    width: 100,
+    customRender({ record }) {
+      return h('span', record.fileSize + 'B');
+    },
+  },
+  {
+    title: '文件后缀',
+    key: 'fileExtension',
+
+    width: 100,
+  },
+  {
+    title: '创建人',
+    key: 'createUser',
+    width: 100,
+  },
+  {
+    title: '创建时间',
+    key: 'createTime',
+    width: 180,
+  }
+];
diff --git a/src/views/logger/fileLog/edit.vue b/src/views/logger/fileLog/edit.vue
new file mode 100644
index 0000000..3cab8cc
--- /dev/null
+++ b/src/views/logger/fileLog/edit.vue
@@ -0,0 +1,101 @@
+<template>
+  <basicModal @register="modalRegister" ref="modalRef" class="basicModal basicFormModal">
+    <template #default>
+      <n-descriptions class="margin-top" :column="2" bordered :labelStyle="{ width: '120px' }" label-placement="left">
+        <n-descriptions-item label="文件名称:"><a :href="formData.filePath" target="_blank">{{
+          formData.originalName
+            }}</a></n-descriptions-item>
+        <n-descriptions-item label="文件类型:">{{ formData.fileType }}</n-descriptions-item>
+        <n-descriptions-item label="文件大小:">{{ formData.fileSize }}B</n-descriptions-item>
+        <n-descriptions-item label="请求耗时:">{{ formData.consumeTime }}s</n-descriptions-item>
+        <n-descriptions-item label="业务类型:">{{
+          formData.bizType ? (formData.bizType == 1 ? '订单' : '其他') : ''
+          }}</n-descriptions-item>
+        <n-descriptions-item label="业务ID:">{{ formData.bizId }}</n-descriptions-item>
+        <n-descriptions-item label="业务内容" :span="3">
+          {{ formData.bizContent }}
+        </n-descriptions-item>
+        <n-descriptions-item label="请求状态" :span="3">
+          {{ formData.status ? '失败' : '成功' }}
+        </n-descriptions-item>
+        <n-descriptions-item label="请求参数" :span="3">
+          {{ formData.param }}
+        </n-descriptions-item>
+        <n-descriptions-item label="返回结果" :span="3">
+          {{ formData.result }}
+        </n-descriptions-item>
+        <n-descriptions-item label="错误描述" :span="3">
+          {{ formData.error }}
+        </n-descriptions-item>
+      </n-descriptions>
+    </template>
+    <template #action>
+      <n-button @click="handleClose">取消</n-button>
+    </template>
+  </basicModal>
+</template>
+<script lang="ts" setup>
+import { getFileLogDetail } from '@/api/logger/fileLog';
+import { onMounted, ref } from 'vue';
+import { useModal } from '@/components/Modal';
+
+/**
+ * 定义参数变量
+ */
+const emit = defineEmits(['success', 'update:visible']);
+const formData = ref({});
+const [modalRegister, { openModal }] = useModal({
+  title: '文件日志详情',
+  subBtuText: '确定',
+  width: 800,
+});
+
+/**
+ * 定义接收的参数
+ */
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  fileLogId: {
+    type: Number,
+    required: true,
+    default: 0,
+  },
+});
+
+/**
+ * 关闭窗体
+ */
+const handleClose = () => {
+  emit('update:visible', false);
+};
+
+/**
+ * 设置表单数据
+ */
+const setFormData = async () => {
+  const data = await getFileLogDetail(props.fileLogId);
+  formData.value = data;
+};
+
+/**
+ * 钩子函数
+ */
+onMounted(() => {
+  if (props.fileLogId) {
+    setFormData();
+  }
+});
+//导出方法
+defineExpose({
+  openModal,
+});
+</script>
+<style lang="less" scoped>
+:deep(.n-descriptions__body .n-descriptions__table .n-descriptions__cell) {
+  word-break: break-all;
+}
+</style>
diff --git a/src/views/logger/fileLog/index.vue b/src/views/logger/fileLog/index.vue
new file mode 100644
index 0000000..51db333
--- /dev/null
+++ b/src/views/logger/fileLog/index.vue
@@ -0,0 +1,162 @@
+<template>
+  <div>
+    <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"
+              v-perm="['sys:fileLog:batchDelete']">
+              <template #icon>
+                <n-icon>
+                  <DeleteOutlined />
+                </n-icon>
+              </template>
+              删除
+            </n-button>
+          </n-space>
+        </template>
+      </BasicTable>
+    </n-card>
+    <editDialog ref="createModalRef" :fileLogId="fileLogId" v-if="editVisible" v-model:visible="editVisible" />
+  </div>
+</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 { getFileLogList, fileLogDelete, fileLogBatchDelete } from '@/api/logger/fileLog';
+import { columns } from './columns';
+import { DeleteOutlined, EyeOutlined } from '@vicons/antd';
+import editDialog from './edit.vue';
+import { basicModal, useModal } from '@/components/Modal';
+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 fileLogId = ref(0);
+const rowKeys = ref([]);
+
+const showModal = ref(false);
+const formParams = reactive({
+  title: '',
+  bizType: '',
+  type: '',
+  status: '',
+});
+
+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),
+          auth: ['sys:fileLog:detail'],
+        },
+        {
+          label: '删除',
+          icon: renderIcon(DeleteOutlined),
+          type: 'error',
+          onClick: handleDelete.bind(null, record),
+          auth: ['sys:fileLog:delete'],
+        },
+      ],
+    });
+  },
+});
+
+function addTable() {
+  showModal.value = true;
+}
+
+const loadDataTable = async (res) => {
+  const result = await getFileLogList({ ...formParams, ...res });
+  return result;
+};
+
+function onCheckedRow(keys) {
+  rowKeys.value = keys;
+}
+
+function reloadTable(noRefresh = '') {
+  basicTableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
+}
+
+function handleSubmit(values: Recordable) {
+  for (const key in formParams) {
+    formParams[key] = '';
+  }
+  for (const key in values) {
+    formParams[key] = values[key];
+  }
+  reloadTable();
+}
+
+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: 80,
+  schemas,
+});
+
+/**
+* 执行查看
+*/
+async function handleDetail(record: Recordable) {
+  fileLogId.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 fileLogDelete(record.id) : await fileLogBatchDelete(rowKeys.value);
+      message.success('删除成功');
+      reloadTable();
+    },
+  })
+}
+
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/logger/fileLog/querySchemas.ts b/src/views/logger/fileLog/querySchemas.ts
new file mode 100644
index 0000000..a0829fb
--- /dev/null
+++ b/src/views/logger/fileLog/querySchemas.ts
@@ -0,0 +1,34 @@
+import { FormSchema } from '@/components/Form/index';
+export const schemas: FormSchema[] = [
+  {
+    field: 'fileName',
+    component: 'NInput',
+    label: '文件名称',
+    componentProps: {
+      placeholder: '请输入文件名称',
+    },
+  },
+  {
+    field: 'fileType',
+    component: 'NSelect',
+    label: '文件类型',
+    componentProps: {
+      clearable: true,
+      placeholder: '请选择文件类型',
+      options: [
+        {
+          label: '文档',
+          value: '1',
+        },
+        {
+          label: '视频',
+          value: '2',
+        },
+        {
+          label: '其他',
+          value: '3',
+        },
+      ],
+    },
+  },
+];
diff --git a/src/views/logger/smsLog/columns.ts b/src/views/logger/smsLog/columns.ts
new file mode 100644
index 0000000..a8ba960
--- /dev/null
+++ b/src/views/logger/smsLog/columns.ts
@@ -0,0 +1,79 @@
+import { h } from 'vue';
+export const columns = [
+  {
+    type: 'selection',
+    width: 50,
+    fixed:"left"
+  },
+  {
+    title: 'ID',
+    key: 'id',
+    fixed: 'left',
+    width: 50,
+  },
+  {
+    title: '日志标题',
+    key: 'title',
+    width: 100,
+  },
+  {
+    title: '日志类型',
+    key: 'typeText',
+    width: 100,
+  },
+  {
+    title: '模板编号',
+    key: 'number',
+    width: 100,
+  },
+  {
+    title: '接收人手机',
+    key: 'receiveMobile',
+    width: 100,
+  },
+  {
+    title: '接收人类型',
+    key: 'receiveType',
+    width: 100,
+    render(record ) {
+      let typeText = '';
+      switch (record.receiveType) {
+        case 1:
+          typeText = '系统用户';
+          break;
+        case 2:
+          typeText = '会员用户';
+          break;
+        case 3:
+          typeText = '其他';
+          break;
+        default:
+          break;
+      }
+      return h('span', typeText || '-');
+    },
+  },
+  {
+    title: '请求耗时',
+    key: 'consumeTime',
+    width: 100,
+  },
+  {
+    title: '日志状态',
+    key: 'status',
+    width: 100,
+    render(record ) {
+      return h('span', record.status === 1 ? '已读' : '未读');
+    },
+  },
+  {
+    title: '创建人',
+    width: 100,
+    key: 'createUser',
+  },
+  {
+    title: '创建时间',
+    key: 'createTime',
+    width: 180,
+  },
+];
diff --git a/src/views/logger/smsLog/edit.vue b/src/views/logger/smsLog/edit.vue
new file mode 100644
index 0000000..cf360d0
--- /dev/null
+++ b/src/views/logger/smsLog/edit.vue
@@ -0,0 +1,154 @@
+<template>
+  <basicModal @register="modalRegister" ref="modalRef" class="basicModal basicFormModal">
+    <template #default>
+      <n-descriptions class="margin-top" :column="2" bordered :labelStyle="{ width: '120px' }" label-placement="left">
+        <n-descriptions-item label="日志标题">{{ formData.title }}</n-descriptions-item>
+        <n-descriptions-item label="日志类型">{{ getTyepText(formData.type) }}</n-descriptions-item>
+        <n-descriptions-item label="日志类型">{{ formData.typeText }}</n-descriptions-item>
+        <n-descriptions-item label="模板编号">{{ formData.number }}</n-descriptions-item>
+        <n-descriptions-item label="接收人手机">{{ formData.receiveMobile }}</n-descriptions-item>
+        <n-descriptions-item label="接收人类型">{{
+          getReviceType(formData.receiveType)
+          }}</n-descriptions-item>
+        <n-descriptions-item label="请求耗时">{{ formData.consumeTime }}s</n-descriptions-item>
+        <n-descriptions-item label="业务类型">{{
+          formData.bizType ? (formData.bizType == 1 ? '订单' : '其他') : ''
+          }}</n-descriptions-item>
+        <n-descriptions-item label="业务ID">{{ formData.bizId }}</n-descriptions-item>
+        <n-descriptions-item label="日志状态">{{
+          formData.status == 1 ? '已读' : '未读'
+          }}</n-descriptions-item>
+        <n-descriptions-item label="请求状态" :span="3">
+          {{ formData.status ? '失败' : '成功' }}
+        </n-descriptions-item>
+        <n-descriptions-item label="业务内容" :span="3">
+          {{ formData.bizContent }}
+        </n-descriptions-item>
+        <n-descriptions-item label="请求参数" :span="3">
+          {{ formData.param }}
+        </n-descriptions-item>
+        <n-descriptions-item label="返回结果" :span="3">
+          {{ formData.result }}
+        </n-descriptions-item>
+        <n-descriptions-item label="错误描述" :span="3">
+          {{ formData.error }}
+        </n-descriptions-item>
+      </n-descriptions>
+    </template>
+    <template #action>
+      <n-button @click="handleClose">取消</n-button>
+    </template>
+  </basicModal>
+</template>
+<script lang="ts" setup>
+import { getSmsLogDetail } from '@/api/logger/smsLog';
+import { onMounted, ref } from 'vue';
+import { useModal } from '@/components/Modal';
+
+/**
+ * 定义参数变量
+ */
+const emit = defineEmits(['success', 'update:visible']);
+const formData = ref({});
+const [modalRegister, { openModal}] = useModal({
+  title: '短信日志详情',
+  subBtuText: '确定',
+  width: 800,
+});
+
+/**
+ * 定义接收的参数
+ */
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  smsLogId: {
+    type: Number,
+    required: true,
+    default: 0,
+  },
+});
+
+/**
+ * 关闭窗体
+ */
+const handleClose = () => {
+  emit('update:visible', false);
+};
+
+/**
+ * 设置表单数据
+ */
+const setFormData = async () => {
+  const data = await getSmsLogDetail(props.smsLogId);
+  formData.value = data;
+};
+  /**
+   * 获取接收人类型描述
+   */
+   const getReviceType = (type) => {
+    let typeText = '';
+    switch (type) {
+      case 1:
+        typeText = '系统用户';
+        break;
+      case 2:
+        typeText = '会员用户';
+        break;
+      case 3:
+        typeText = '其他';
+        break;
+      default:
+        break;
+    }
+    return typeText;
+  };
+
+  /**
+   * 获取日志类型描述
+   */
+  const getTyepText = (type) => {
+    let typeText = '';
+    switch (type) {
+      case 1:
+        typeText = '登录';
+        break;
+      case 2:
+        typeText = '注册';
+        break;
+      case 3:
+        typeText = '找回密码';
+        break;
+      case 4:
+        typeText = '业务';
+        break;
+      case 5:
+        typeText = '其他';
+        break;
+      default:
+        break;
+    }
+    return typeText;
+  };
+
+/**
+ * 钩子函数
+ */
+onMounted(() => {
+  if (props.smsLogId) {
+    setFormData();
+  }
+});
+//导出方法
+defineExpose({
+  openModal,
+});
+</script>
+<style lang="less" scoped>
+:deep(.n-descriptions__body .n-descriptions__table .n-descriptions__cell) {
+  word-break: break-all;
+}
+</style>
diff --git a/src/views/logger/smsLog/index.vue b/src/views/logger/smsLog/index.vue
new file mode 100644
index 0000000..4a22c5f
--- /dev/null
+++ b/src/views/logger/smsLog/index.vue
@@ -0,0 +1,162 @@
+<template>
+  <div>
+    <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"
+              v-perm="['sys:smsLog:batchDelete']">
+              <template #icon>
+                <n-icon>
+                  <DeleteOutlined />
+                </n-icon>
+              </template>
+              删除
+            </n-button>
+          </n-space>
+        </template>
+      </BasicTable>
+    </n-card>
+    <editDialog ref="createModalRef" :smsLogId="smsLogId" v-if="editVisible" v-model:visible="editVisible" />
+  </div>
+</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 { getSmsLogList, smsLogDelete, smsLogBatchDelete } from '@/api/logger/smsLog';
+import { columns } from './columns';
+import { DeleteOutlined, EyeOutlined } from '@vicons/antd';
+import editDialog from './edit.vue';
+import { basicModal, useModal } from '@/components/Modal';
+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 smsLogId = ref(0);
+const rowKeys = ref([]);
+
+const showModal = ref(false);
+const formParams = reactive({
+  title: '',
+  bizType: '',
+  type: '',
+  status: '',
+});
+
+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),
+          auth: ['sys:smsLog:detail'],
+        },
+        {
+          label: '删除',
+          icon: renderIcon(DeleteOutlined),
+          type: 'error',
+          onClick: handleDelete.bind(null, record),
+          auth: ['sys:smsLog:delete'],
+        },
+      ],
+    });
+  },
+});
+
+function addTable() {
+  showModal.value = true;
+}
+
+const loadDataTable = async (res) => {
+  const result = await getSmsLogList({ ...formParams, ...res });
+  return result;
+};
+
+function onCheckedRow(keys) {
+  rowKeys.value = keys;
+}
+
+function reloadTable(noRefresh = '') {
+  basicTableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
+}
+
+function handleSubmit(values: Recordable) {
+  for (const key in formParams) {
+    formParams[key] = '';
+  }
+  for (const key in values) {
+    formParams[key] = values[key];
+  }
+  reloadTable();
+}
+
+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: 80,
+  schemas,
+});
+
+/**
+* 执行查看
+*/
+async function handleDetail(record: Recordable) {
+  smsLogId.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 smsLogDelete(record.id) : await smsLogBatchDelete(rowKeys.value);
+      message.success('删除成功');
+      reloadTable();
+    },
+  })
+}
+
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/logger/smsLog/querySchemas.ts b/src/views/logger/smsLog/querySchemas.ts
new file mode 100644
index 0000000..aab8594
--- /dev/null
+++ b/src/views/logger/smsLog/querySchemas.ts
@@ -0,0 +1,72 @@
+import { FormSchema } from '@/components/Form/index';
+export const schemas: FormSchema[] = [
+  {
+    field: 'title',
+    component: 'NInput',
+    label: '短信标题',
+    componentProps: {
+      placeholder: '请输入短信标题',
+    },
+  },
+  {
+    field: 'receiveType',
+    component: 'NSelect',
+    label: '接收类型',
+    componentProps: {
+      placeholder: '请选择接收类型',
+      clearable: true,
+      options: [
+        {
+          label: '系统用户',
+          value: '1',
+        },
+        {
+          label: '会员用户',
+          value: '2',
+        },
+        {
+          label: '其他',
+          value: '3',
+        },
+      ],
+    },
+  },
+  {
+    field: 'bizType',
+    component: 'NSelect',
+    label: '业务类型',
+    componentProps: {
+      placeholder: '请选择业务类型',
+      clearable: true,
+      options: [
+        {
+          label: '订单',
+          value: '1',
+        },
+        {
+          label: '其他',
+          value: '2',
+        },
+      ],
+    },
+  },
+  {
+    field: 'status',
+    component: 'NSelect',
+    label: '状态',
+    componentProps: {
+      placeholder: '请选择状态',
+      clearable: true,
+      options: [
+        {
+          label: '已读',
+          value: '1',
+        },
+        {
+          label: '未读',
+          value: '0',
+        },
+      ],
+    },
+  },
+];
diff --git a/src/views/monitor/online/columns.ts b/src/views/monitor/online/columns.ts
new file mode 100644
index 0000000..abf3443
--- /dev/null
+++ b/src/views/monitor/online/columns.ts
@@ -0,0 +1,58 @@
+import { h } from 'vue';
+
+export const columns = [
+  {
+    title: '序号',
+    render: (_, index) => {
+      return `${index + 1}`
+    },
+    fixed: 'left',
+    width: 80,
+  },
+  {
+    title: '会话编号',
+    key: 'tokenId',
+    width: 300,
+  },
+  {
+    title: '登录名称',
+    key: 'username',
+    width: 100,
+  },
+  {
+    title: '部门名称',
+    key: 'deptName',
+    width: 150,
+  },
+  {
+    title: 'IP地址',
+    key: 'ipAddr',
+    width: 150,
+  },
+  {
+    title: '登录地点',
+    key: 'loginLocation',
+    width: 100,
+  },
+  {
+    title: '浏览器',
+    key: 'browser',
+    width: 150,
+  },
+  {
+    title: '操作系统',
+    key: 'os',
+    width: 150,
+  },
+  {
+    title: '登录时间',
+    key: 'loginTime',
+    width: 180,
+  },
+  {
+    title: '操作',
+    fixed: 'right',
+    key: 'action',
+    width: 100,
+  },
+];
diff --git a/src/views/monitor/online/index.vue b/src/views/monitor/online/index.vue
new file mode 100644
index 0000000..cd2f50d
--- /dev/null
+++ b/src/views/monitor/online/index.vue
@@ -0,0 +1,128 @@
+<template>
+  <PageWrapper>
+    <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">
+      <n-data-table :columns="columns" :style="{ minHeight: fwbHeight + 'px' }"
+        :paginate-single-page="false"
+        :data="onlineTableData.slice((pager.page - 1) * pager.size, pager.page * pager.size)">
+        <!-- <template #bodyCell="{ column, record,index }">
+          <template v-if="column.key === 'index'">
+            {{index+1}}
+          </template>
+          <template v-if="column.key === 'action'">
+            <n-space>
+              <n-button type="danger" @click="handleDelete(record.tokenId)">
+                强退
+              </n-button>
+            </n-space>
+          </template>
+        </template> -->
+      </n-data-table>
+      <pagination style="justify-content: flex-end" class="mt-10 flex" v-model="pager" @change="loadTable" />
+    </n-card>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, onMounted } from 'vue';
+import { columns } from './columns';
+import { schemas } from './querySchemas';
+import { useForm } from '@/components/Form/index';
+import { getOnlineList, onlineOut } from '@/api/monitor/online';
+import { useMessage, useDialog } from 'naive-ui';
+const onlineTableData = ref([]);
+
+/**
+ * 定义查询参数
+ */
+const formParams = reactive({
+  ipAddr: '',
+  username: '',
+});
+const message = useMessage();
+const dialog = useDialog()
+/**
+ * 定义分页参数
+ */
+const pager = ref({
+  page: 1,
+  size: 10,
+  jumper:true,
+  count: onlineTableData.value.length,
+});
+const fwbHeight = document.body.clientHeight - 420;
+
+/**
+ * 加载数据列表
+ */
+const loadTable = async () => {
+  onlineTableData.value = await getOnlineList({ ...formParams });
+  console.log(onlineTableData.value)
+  pager.value.count = onlineTableData.value.length;
+};
+
+/**
+ * 注册
+ */
+const [register, { }] = useForm({
+  gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+  labelWidth: 80,
+  schemas,
+});
+
+/**
+ * 执行提交表单
+ * @param values 参数
+ */
+function handleSubmit(values) {
+  for (const key in formParams) {
+    formParams[key] = '';
+  }
+  for (const key in values) {
+    formParams[key] = values[key];
+  }
+  loadTable();
+}
+
+/**
+ * 执行重置
+ */
+function handleReset() {
+  for (const key in formParams) {
+    formParams[key] = '';
+  }
+  pager.value.page = 1;
+  loadTable();
+}
+
+/**
+ * 执行删除
+ * @param id 参数
+ */
+async function handleDelete(id) {
+  Modal.confirm({
+    title: '提示',
+    content: '确定要强退？',
+    onOk: async () => {
+      await onlineOut(id);
+      message.success('强退成功');
+      loadTable();
+    },
+  });
+}
+
+/**
+ * 钩子函数
+ */
+onMounted(() => {
+  loadTable();
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/monitor/online/querySchemas.ts b/src/views/monitor/online/querySchemas.ts
new file mode 100644
index 0000000..fcdbd59
--- /dev/null
+++ b/src/views/monitor/online/querySchemas.ts
@@ -0,0 +1,19 @@
+import { FormSchema } from '@/components/Form/index';
+export const schemas: FormSchema[] = [
+  {
+    field: 'ipAddr',
+    component: 'NInput',
+    label: '登录IP',
+    componentProps: {
+      placeholder: '请输入登录IP',
+    },
+  },
+  {
+    field: 'username',
+    component: 'NInput',
+    label: '登录账号',
+    componentProps: {
+      placeholder: '请输入登录账号',
+    },
+  },
+];
diff --git a/src/views/system/logger/loginLog.vue b/src/views/system/logger/loginLog.vue
new file mode 100644
index 0000000..f0f8c42
--- /dev/null
+++ b/src/views/system/logger/loginLog.vue
@@ -0,0 +1,161 @@
+<template>
+  <div>
+    <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"
+              v-perm="['sys:loginLog:batchDelete']">
+              <template #icon>
+                <n-icon>
+                  <DeleteOutlined />
+                </n-icon>
+              </template>
+              删除
+            </n-button>
+          </n-space>
+        </template>
+      </BasicTable>
+    </n-card>
+    <editDialog ref="createModalRef" :loginlogId="loginlogId" v-if="editVisible" v-model:visible="editVisible" />
+  </div>
+</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 { getLoginLogList, loginLogDelete, loginLogBatchDelete } from '@/api/system/loginLog';
+import { columns } from './loginLog/columns';
+import {DeleteOutlined,EyeOutlined} from '@vicons/antd';
+import editDialog from './loginLog/edit.vue';
+import { basicModal, useModal } from '@/components/Modal';
+import { schemas } from './loginLog/querySchemas';
+import { renderIcon } from '@/utils';
+
+const message = useMessage();
+const dialog = useDialog()
+const basicTableRef = ref();
+const createModalRef = ref();
+const editVisible = ref(false);
+const loginlogId = ref(0);
+const rowKeys = ref([]);
+
+const showModal = ref(false);
+const formParams = reactive({
+  username: '',
+  type: '',
+  status: '',
+});
+
+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),
+          auth: ['sys:loginLog:detail'],
+        },
+        {
+          label: '删除',
+          icon: renderIcon(DeleteOutlined),
+          type: 'error',
+          onClick: handleDelete.bind(null, record),
+          auth: ['sys:loginLog:delete'],
+        },
+      ],
+    });
+  },
+});
+
+function addTable() {
+  showModal.value = true;
+}
+
+const loadDataTable = async (res) => {
+  const result = await getLoginLogList({ ...formParams, ...res });
+  return result;
+};
+
+function onCheckedRow(keys) {
+  rowKeys.value = keys;
+}
+
+function reloadTable(noRefresh = '') {
+  basicTableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
+}
+
+function handleSubmit(values: Recordable) {
+  for (const key in formParams) {
+    formParams[key] = '';
+  }
+  for (const key in values) {
+    formParams[key] = values[key];
+  }
+  reloadTable();
+}
+
+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: 80,
+  schemas,
+});
+
+/**
+* 执行查看
+*/
+async function handleDetail(record: Recordable) {
+  loginlogId.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 loginLogDelete(record.id) : await loginLogBatchDelete(rowKeys.value);
+      message.success('删除成功');
+      reloadTable();
+    },
+  })
+}
+
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/system/logger/loginLog/columns.ts b/src/views/system/logger/loginLog/columns.ts
new file mode 100644
index 0000000..95410c8
--- /dev/null
+++ b/src/views/system/logger/loginLog/columns.ts
@@ -0,0 +1,87 @@
+import { h } from 'vue';
+import { NTag } from 'naive-ui';
+
+export const columns = [
+  {
+    type: 'selection',
+    width: 50,
+    fixed:"left"
+  },
+  {
+    title: 'ID',
+    key: 'id',
+    fixed: 'left',
+    width: 50,
+  },
+  {
+    title: '操作用户',
+    key: 'username',
+    width: 100,
+  },
+  {
+    title: '请求ip',
+    key: 'ip',
+    width: 100,
+  },
+  {
+    title: '浏览器',
+    key: 'browser',
+    width: 100,
+  },
+  {
+    title: '操作系统',
+    key: 'os',
+    width: 100,
+  },
+  {
+    title: '操作类型',
+    key: 'typeText',
+    width: 100,
+  },
+  {
+    title: '操作来源',
+    key: 'sourceText',
+    width: 100,
+  },
+  {
+    title: '请求方式',
+    key: 'requestMethod',
+    width: 100,
+  },
+  {
+    title: '请求URL',
+    key: 'url',
+    width: 100,
+  },
+  {
+    title: '请求地区',
+    key: 'location',
+    width: 100,
+  },
+  {
+    title: '请求耗时',
+    key: 'consumeTime',
+    width: 100,
+  },
+  {
+    title: '状态',
+    key: 'status',
+    render(record) {
+      return h(
+        NTag,
+        {
+          type: record.status == 0 ? 'success' : 'error',
+        },
+        {
+          default: () => (record.status == 0 ? '正常' : '异常'),
+        },
+      );
+    },
+    width: 100,
+  },
+  {
+    title: '创建时间',
+    key: 'createTime',
+    width: 180,
+  },
+];
diff --git a/src/views/system/logger/loginLog/edit.vue b/src/views/system/logger/loginLog/edit.vue
new file mode 100644
index 0000000..665850b
--- /dev/null
+++ b/src/views/system/logger/loginLog/edit.vue
@@ -0,0 +1,109 @@
+<template>
+  <basicModal @register="modalRegister" ref="modalRef" class="basicModal basicFormModal">
+    <template #default>
+      <n-descriptions class="margin-top" :column="2" bordered :labelStyle="{ width: '120px' }" label-placement="left">
+        <n-descriptions-item label="操作用户">
+          {{ formData.createUser }}
+        </n-descriptions-item>
+        <n-descriptions-item label="IP地址">
+          {{ formData.ip }}
+        </n-descriptions-item>
+        <n-descriptions-item label="操作系统">
+          {{ formData.os }}
+        </n-descriptions-item>
+        <n-descriptions-item label="操作浏览器">
+          {{ formData.browser }}
+        </n-descriptions-item>
+        <n-descriptions-item label="请求耗时"> {{ formData.consumeTime }}s </n-descriptions-item>
+        <n-descriptions-item label="请求地区">
+          {{ formData.location }}
+        </n-descriptions-item>
+        <n-descriptions-item label="请求方式">
+          {{ formData.requestMethod }}
+        </n-descriptions-item>
+        <n-descriptions-item label="请求状态">
+          <n-tag :color="formData.status ? 'danger' : 'success'">{{
+            formData.status ? '异常' : '正常'
+            }}</n-tag>
+        </n-descriptions-item>
+        <n-descriptions-item label="调用方法" :span="3">
+          {{ formData.method }}
+        </n-descriptions-item>
+        <n-descriptions-item label="请求参数" :span="3">
+          {{ formData.param }}
+        </n-descriptions-item>
+        <n-descriptions-item label="返回结果" :span="3">
+          {{ formData.result }}
+        </n-descriptions-item>
+      </n-descriptions>
+    </template>
+    <template #action>
+        <n-button @click="handleClose">取消</n-button>
+    </template>
+  </basicModal>
+</template>
+<script lang="ts" setup>
+import { getLoginLogDetail } from '@/api/system/loginLog';
+import { onMounted, ref } from 'vue';
+import { useModal } from '@/components/Modal';
+
+/**
+ * 定义参数变量
+ */
+const emit = defineEmits(['success', 'update:visible']);
+const formData = ref({});
+const [modalRegister, { openModal, setSubLoading }] = useModal({
+  title: '登录日志详情',
+  subBtuText: '确定',
+  width: 800,
+});
+
+/**
+ * 定义接收的参数
+ */
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  loginlogId: {
+    type: Number,
+    required: true,
+    default: 0,
+  },
+});
+
+/**
+ * 关闭窗体
+ */
+const handleClose = () => {
+  emit('update:visible', false);
+};
+
+/**
+ * 设置表单数据
+ */
+const setFormData = async () => {
+  const data = await getLoginLogDetail(props.loginlogId);
+  formData.value = data;
+};
+
+/**
+ * 钩子函数
+ */
+onMounted(() => {
+  if (props.loginlogId) {
+    setFormData();
+  }
+});
+//导出方法
+defineExpose({
+  openModal,
+});
+</script>
+<style lang="less" scoped>
+:deep(.ant-descriptions__body .ant-descriptions__table .ant-descriptions__cell) {
+  word-break: break-all;
+}
+</style>
diff --git a/src/views/system/logger/loginLog/querySchemas.ts b/src/views/system/logger/loginLog/querySchemas.ts
new file mode 100644
index 0000000..7c03a28
--- /dev/null
+++ b/src/views/system/logger/loginLog/querySchemas.ts
@@ -0,0 +1,49 @@
+import { FormSchema } from '@/components/Form/index';
+export const schemas: FormSchema[] = [
+  {
+    field: 'username',
+    component: 'NInput',
+    label: '操作用户',
+    componentProps: {
+      placeholder: '请输入操作用户',
+    },
+  },
+  {
+    field: 'type',
+    component: 'NSelect',
+    label: '请求类型',
+    componentProps: {
+      placeholder: '请选择请求类型',
+      clearable: true,
+      options: [
+        {
+          label: '登录',
+          value: '0',
+        },
+        {
+          label: '退出',
+          value: '1',
+        },
+      ],
+    },
+  },
+  {
+    field: 'status',
+    component: 'NSelect',
+    label: '请求状态',
+    componentProps: {
+      placeholder: '请选择状态',
+      clearable: true,
+      options: [
+        {
+          label: '正常',
+          value: '0',
+        },
+        {
+          label: '异常',
+          value: '1',
+        },
+      ],
+    },
+  },
+];
diff --git a/src/views/system/logger/operLog.vue b/src/views/system/logger/operLog.vue
new file mode 100644
index 0000000..e41f0e7
--- /dev/null
+++ b/src/views/system/logger/operLog.vue
@@ -0,0 +1,161 @@
+<template>
+  <div>
+    <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"
+              v-perm="['sys:operLog:batchDelete']">
+              <template #icon>
+                <n-icon>
+                  <DeleteOutlined />
+                </n-icon>
+              </template>
+              删除
+            </n-button>
+          </n-space>
+        </template>
+      </BasicTable>
+    </n-card>
+    <editDialog ref="createModalRef" :operlogId="operlogId" v-if="editVisible" v-model:visible="editVisible" />
+  </div>
+</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 { getOperLogList, operLogDelete, operLogBatchDelete } from '@/api/system/operLog';
+import { columns } from './operLog/columns';
+import {DeleteOutlined,EyeOutlined} from '@vicons/antd';
+import editDialog from './operLog/edit.vue';
+import { basicModal, useModal } from '@/components/Modal';
+import { schemas } from './operLog/querySchemas';
+import { renderIcon } from '@/utils';
+
+const message = useMessage();
+const dialog = useDialog()
+const basicTableRef = ref();
+const createModalRef = ref();
+const editVisible = ref(false);
+const operlogId = ref(0);
+const rowKeys = ref([]);
+
+const showModal = ref(false);
+const formParams = reactive({
+  username: '',
+  type: '',
+  status: '',
+});
+
+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),
+          auth: ['sys:operLog:detail'],
+        },
+        {
+          label: '删除',
+          icon: renderIcon(DeleteOutlined),
+          type: 'error',
+          onClick: handleDelete.bind(null, record),
+          auth: ['sys:operLog:delete'],
+        },
+      ],
+    });
+  },
+});
+
+function addTable() {
+  showModal.value = true;
+}
+
+const loadDataTable = async (res) => {
+  const result = await getOperLogList({ ...formParams, ...res });
+  return result;
+};
+
+function onCheckedRow(keys) {
+  rowKeys.value = keys;
+}
+
+function reloadTable(noRefresh = '') {
+  basicTableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
+}
+
+function handleSubmit(values: Recordable) {
+  for (const key in formParams) {
+    formParams[key] = '';
+  }
+  for (const key in values) {
+    formParams[key] = values[key];
+  }
+  reloadTable();
+}
+
+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: 80,
+  schemas,
+});
+
+/**
+* 执行查看
+*/
+async function handleDetail(record: Recordable) {
+  operlogId.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 operLogDelete(record.id) : await operLogBatchDelete(rowKeys.value);
+      message.success('删除成功');
+      reloadTable();
+    },
+  })
+}
+
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/system/logger/operLog/columns.ts b/src/views/system/logger/operLog/columns.ts
new file mode 100644
index 0000000..9bb2599
--- /dev/null
+++ b/src/views/system/logger/operLog/columns.ts
@@ -0,0 +1,92 @@
+import { h } from 'vue';
+import { NTag } from 'naive-ui';
+
+export const columns = [
+  {
+    type: 'selection',
+    width: 50,
+    fixed:"left"
+  },
+  {
+    title: 'ID',
+    key: 'id',
+    fixed: 'left',
+    width: 100,
+  },
+  {
+    title: '日志标题',
+    key: 'title',
+    width: 100,
+  },
+  {
+    title: '操作用户',
+    key: 'createUser',
+    width: 100,
+  },
+  {
+    title: '请求ip',
+    key: 'ip',
+    width: 140,
+  },
+  {
+    title: '浏览器',
+    key: 'browser',
+    width: 100,
+  },
+  {
+    title: '操作系统',
+    key: 'os',
+    width: 100,
+  },
+  {
+    title: '操作类型',
+    key: 'typeText',
+    width: 100,
+  },
+  {
+    title: '操作来源',
+    key: 'sourceText',
+    width: 100,
+  },
+  {
+    title: '请求方式',
+    key: 'requestMethod',
+    width: 100,
+  },
+  {
+    title: '请求URL',
+    key: 'url',
+    width: 150,
+  },
+  {
+    title: '请求地区',
+    key: 'location',
+    width: 100,
+  },
+  {
+    title: '请求耗时',
+    key: 'consumeTime',
+    width: 100,
+  },
+  {
+    title: '状态',
+    key: 'status',
+    render(record) {
+      return h(
+        NTag,
+        {
+          type: record.status == 0 ? 'success' : 'error',
+        },
+        {
+          default: () => (record.status == 0 ? '正常' : '异常'),
+        },
+      );
+    },
+    width: 100,
+  },
+  {
+    title: '创建时间',
+    key: 'createTime',
+    width: 180,
+  }
+];
diff --git a/src/views/system/logger/operLog/edit.vue b/src/views/system/logger/operLog/edit.vue
new file mode 100644
index 0000000..9762ed4
--- /dev/null
+++ b/src/views/system/logger/operLog/edit.vue
@@ -0,0 +1,109 @@
+<template>
+  <basicModal @register="modalRegister" ref="modalRef" class="basicModal basicFormModal">
+    <template #default>
+      <n-descriptions class="margin-top" :column="2" bordered :labelStyle="{ width: '120px' }" label-placement="left">
+        <n-descriptions-item label="日志标题">
+        {{ formData.title }}
+      </n-descriptions-item>
+      <n-descriptions-item label="操作用户">
+        {{ formData.createUser }}
+      </n-descriptions-item>
+      <n-descriptions-item label="IP地址">
+        {{ formData.ip }}
+      </n-descriptions-item>
+      <n-descriptions-item label="操作系统">
+        {{ formData.os }}
+      </n-descriptions-item>
+      <n-descriptions-item label="操作浏览器">
+        {{ formData.browser }}
+      </n-descriptions-item>
+      <n-descriptions-item label="请求耗时"> {{ formData.consumeTime }}s </n-descriptions-item>
+      <n-descriptions-item label="请求方式">
+        {{ formData.requestMethod }}
+      </n-descriptions-item>
+      <n-descriptions-item label="请求状态">
+        <n-tag :type="formData.status ? 'danger' : 'success'">{{
+          formData.status ? '异常' : '正常'
+        }}</n-tag>
+      </n-descriptions-item>
+      <n-descriptions-item label="调用方法" :span="3">
+        {{ formData.method }}
+      </n-descriptions-item>
+      <n-descriptions-item label="请求参数" :span="3">
+        {{ formData.param }}
+      </n-descriptions-item>
+      <n-descriptions-item label="返回结果" :span="3">
+        {{ formData.result }}
+      </n-descriptions-item>
+      </n-descriptions>
+    </template>
+    <template #action>
+        <n-button @click="handleClose">取消</n-button>
+    </template>
+  </basicModal>
+</template>
+<script lang="ts" setup>
+  import { getOperLogDetail } from '@/api/system/operLog';
+import { onMounted, ref } from 'vue';
+import { useModal } from '@/components/Modal';
+
+/**
+ * 定义参数变量
+ */
+const emit = defineEmits(['success', 'update:visible']);
+const formData = ref({});
+const [modalRegister, { openModal, setSubLoading }] = useModal({
+  title: '操作日志详情',
+  subBtuText: '确定',
+  width: 800,
+});
+
+/**
+ * 定义接收的参数
+ */
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  operlogId: {
+    type: Number,
+    required: true,
+    default: 0,
+  },
+});
+
+/**
+ * 关闭窗体
+ */
+const handleClose = () => {
+  emit('update:visible', false);
+};
+
+/**
+ * 设置表单数据
+ */
+const setFormData = async () => {
+  const data = await getOperLogDetail(props.operlogId);
+  formData.value = data;
+};
+
+/**
+ * 钩子函数
+ */
+onMounted(() => {
+  if (props.operlogId) {
+    setFormData();
+  }
+});
+//导出方法
+defineExpose({
+  openModal,
+});
+</script>
+<style lang="less" scoped>
+:deep(.ant-descriptions__body .ant-descriptions__table .ant-descriptions__cell) {
+  word-break: break-all;
+}
+</style>
diff --git a/src/views/system/logger/operLog/querySchemas.ts b/src/views/system/logger/operLog/querySchemas.ts
new file mode 100644
index 0000000..689c27f
--- /dev/null
+++ b/src/views/system/logger/operLog/querySchemas.ts
@@ -0,0 +1,30 @@
+import { FormSchema } from '@/components/Form/index';
+export const schemas: FormSchema[] = [
+  {
+    field: 'title',
+    component: 'NInput',
+    label: '日志标题',
+    componentProps: {
+      placeholder: '请输入日志标题',
+    },
+  },
+  {
+    field: 'status',
+    component: 'NSelect',
+    label: '请求状态',
+    componentProps: {
+      placeholder: '请选择状态',
+      clearable: true,
+      options: [
+        {
+          label: '正常',
+          value: '0',
+        },
+        {
+          label: '异常',
+          value: '1',
+        },
+      ],
+    },
+  },
+];
diff --git a/src/views/system/role/querySchemas.ts b/src/views/system/role/querySchemas.ts
new file mode 100644
index 0000000..79d5c9b
--- /dev/null
+++ b/src/views/system/role/querySchemas.ts
@@ -0,0 +1,11 @@
+import { FormSchema } from '@/components/Form/index';
+export const schemas: FormSchema[] = [
+  {
+    field: 'name',
+    component: 'NInput',
+    label: '角色名称',
+    componentProps: {
+      placeholder: '请输入角色名称',
+    },
+  },
+];