diff --git a/package.json b/package.json
index 8ffa9b7..d85ed1b 100644
--- a/package.json
+++ b/package.json
@@ -89,5 +89,14 @@
     "commitizen": {
       "path": "node_modules/cz-git"
     }
+  },
+  "prettier": {
+    "eslintIntegration": true,
+    "stylelintIntegration": true,
+    "singleQuote": true,
+    "semi": false,
+    "insertPragma": false,
+    "trailingComma": "none",
+    "arrowParens": "avoid"
   }
 }

diff --git a/package.json b/package.json
index 8ffa9b7..d85ed1b 100644
--- a/package.json
+++ b/package.json
@@ -89,5 +89,14 @@
     "commitizen": {
       "path": "node_modules/cz-git"
     }
+  },
+  "prettier": {
+    "eslintIntegration": true,
+    "stylelintIntegration": true,
+    "singleQuote": true,
+    "semi": false,
+    "insertPragma": false,
+    "trailingComma": "none",
+    "arrowParens": "avoid"
   }
 }
diff --git a/src/api/system/log.ts b/src/api/system/log.ts
new file mode 100644
index 0000000..acb8fba
--- /dev/null
+++ b/src/api/system/log.ts
@@ -0,0 +1,73 @@
+/**
+ * 日志管理接口
+ */
+import request from '../index'
+// 操作日志查询
+export function getBizLogList(params) {
+  return request({
+    url: 'sys/log/biz/list',
+    method: 'get',
+    params,
+  })
+}
+// 操作日志详情
+export function getBizLogDetail(id: string) {
+  return request({
+    url: `sys/log/biz/detail/${id}`,
+    method: 'get',
+  })
+}
+// 异常日志查询
+export function getErrorLogList(params) {
+  return request({
+    url: 'sys/log/error/list',
+    method: 'get',
+    params,
+  })
+}
+// 异常日志详情
+export function getErrorLogDetail(id: string) {
+  return request({
+    url: `sys/log/error/detail/${id}`,
+    method: 'get',
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'sys/dict/code/logType',
+    method: 'get',
+  })
+}
+
+// 删除业务日志
+export function delLog() {
+  return request({
+    url: 'sys/log/biz/delLog',
+    method: 'post',
+  })
+}
+
+// 删除异常日志
+export function delErrorLog() {
+  return request({
+    url: 'sys/log/error/delLog',
+    method: 'post',
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'sys/loginLog/list',
+    method: 'get',
+    params,
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'sys/loginLog/delLoginLog',
+    method: 'post',
+  })
+}

diff --git a/package.json b/package.json
index 8ffa9b7..d85ed1b 100644
--- a/package.json
+++ b/package.json
@@ -89,5 +89,14 @@
     "commitizen": {
       "path": "node_modules/cz-git"
     }
+  },
+  "prettier": {
+    "eslintIntegration": true,
+    "stylelintIntegration": true,
+    "singleQuote": true,
+    "semi": false,
+    "insertPragma": false,
+    "trailingComma": "none",
+    "arrowParens": "avoid"
   }
 }
diff --git a/src/api/system/log.ts b/src/api/system/log.ts
new file mode 100644
index 0000000..acb8fba
--- /dev/null
+++ b/src/api/system/log.ts
@@ -0,0 +1,73 @@
+/**
+ * 日志管理接口
+ */
+import request from '../index'
+// 操作日志查询
+export function getBizLogList(params) {
+  return request({
+    url: 'sys/log/biz/list',
+    method: 'get',
+    params,
+  })
+}
+// 操作日志详情
+export function getBizLogDetail(id: string) {
+  return request({
+    url: `sys/log/biz/detail/${id}`,
+    method: 'get',
+  })
+}
+// 异常日志查询
+export function getErrorLogList(params) {
+  return request({
+    url: 'sys/log/error/list',
+    method: 'get',
+    params,
+  })
+}
+// 异常日志详情
+export function getErrorLogDetail(id: string) {
+  return request({
+    url: `sys/log/error/detail/${id}`,
+    method: 'get',
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'sys/dict/code/logType',
+    method: 'get',
+  })
+}
+
+// 删除业务日志
+export function delLog() {
+  return request({
+    url: 'sys/log/biz/delLog',
+    method: 'post',
+  })
+}
+
+// 删除异常日志
+export function delErrorLog() {
+  return request({
+    url: 'sys/log/error/delLog',
+    method: 'post',
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'sys/loginLog/list',
+    method: 'get',
+    params,
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'sys/loginLog/delLoginLog',
+    method: 'post',
+  })
+}
diff --git a/src/components.d.ts b/src/components.d.ts
index 6baf753..558b652 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -11,7 +11,6 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
-    copy: typeof import('./components/SearchArea/index copy.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
     Editor: typeof import('./components/Editor/index.vue')['default']

diff --git a/package.json b/package.json
index 8ffa9b7..d85ed1b 100644
--- a/package.json
+++ b/package.json
@@ -89,5 +89,14 @@
     "commitizen": {
       "path": "node_modules/cz-git"
     }
+  },
+  "prettier": {
+    "eslintIntegration": true,
+    "stylelintIntegration": true,
+    "singleQuote": true,
+    "semi": false,
+    "insertPragma": false,
+    "trailingComma": "none",
+    "arrowParens": "avoid"
   }
 }
diff --git a/src/api/system/log.ts b/src/api/system/log.ts
new file mode 100644
index 0000000..acb8fba
--- /dev/null
+++ b/src/api/system/log.ts
@@ -0,0 +1,73 @@
+/**
+ * 日志管理接口
+ */
+import request from '../index'
+// 操作日志查询
+export function getBizLogList(params) {
+  return request({
+    url: 'sys/log/biz/list',
+    method: 'get',
+    params,
+  })
+}
+// 操作日志详情
+export function getBizLogDetail(id: string) {
+  return request({
+    url: `sys/log/biz/detail/${id}`,
+    method: 'get',
+  })
+}
+// 异常日志查询
+export function getErrorLogList(params) {
+  return request({
+    url: 'sys/log/error/list',
+    method: 'get',
+    params,
+  })
+}
+// 异常日志详情
+export function getErrorLogDetail(id: string) {
+  return request({
+    url: `sys/log/error/detail/${id}`,
+    method: 'get',
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'sys/dict/code/logType',
+    method: 'get',
+  })
+}
+
+// 删除业务日志
+export function delLog() {
+  return request({
+    url: 'sys/log/biz/delLog',
+    method: 'post',
+  })
+}
+
+// 删除异常日志
+export function delErrorLog() {
+  return request({
+    url: 'sys/log/error/delLog',
+    method: 'post',
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'sys/loginLog/list',
+    method: 'get',
+    params,
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'sys/loginLog/delLoginLog',
+    method: 'post',
+  })
+}
diff --git a/src/components.d.ts b/src/components.d.ts
index 6baf753..558b652 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -11,7 +11,6 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
-    copy: typeof import('./components/SearchArea/index copy.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
     Editor: typeof import('./components/Editor/index.vue')['default']
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 1d2e9eb..f39f4b2 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -171,6 +171,78 @@
       },
     ],
   },
+  {
+    path: '/business',
+    component: Layout,
+    redirect: '/business/list',
+    name: 'BusinessLog',
+    meta: {
+      title: '业务日志',
+      icon: 'ep:key',
+      auth: '/sys/resource',
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'BusinessList',
+        component: () => import('@/views/system/log/list.log.vue'),
+        meta: {
+          title: '业务日志',
+          auth: '/sys/resource',
+          sidebar: false,
+          breadcrumb: true,
+        },
+      },
+    ],
+  },
+  {
+    path: '/error',
+    component: Layout,
+    redirect: '/error/list',
+    name: 'ErrorLog',
+    meta: {
+      title: '异常日志',
+      icon: 'ep:key',
+      auth: '/sys/role',
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'ErrorList',
+        component: () => import('@/views/system/log/listErrorLog.vue'),
+        meta: {
+          title: '异常日志',
+          auth: '/sys/role',
+          sidebar: false,
+          breadcrumb: true,
+        },
+      },
+    ],
+  },
+  {
+    path: '/loginDiary',
+    component: Layout,
+    redirect: '/loginDiary/list',
+    name: 'loginDiaryLog',
+    meta: {
+      title: '登录日志',
+      icon: 'ep:key',
+      auth: '/sys/role',
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'loginDiaryList',
+        component: () => import('@/views/system/log/LoginLog.vue'),
+        meta: {
+          title: '登录日志',
+          auth: '/sys/role',
+          sidebar: false,
+          breadcrumb: true,
+        },
+      },
+    ],
+  },
 ]
 
 export default routes

diff --git a/package.json b/package.json
index 8ffa9b7..d85ed1b 100644
--- a/package.json
+++ b/package.json
@@ -89,5 +89,14 @@
     "commitizen": {
       "path": "node_modules/cz-git"
     }
+  },
+  "prettier": {
+    "eslintIntegration": true,
+    "stylelintIntegration": true,
+    "singleQuote": true,
+    "semi": false,
+    "insertPragma": false,
+    "trailingComma": "none",
+    "arrowParens": "avoid"
   }
 }
diff --git a/src/api/system/log.ts b/src/api/system/log.ts
new file mode 100644
index 0000000..acb8fba
--- /dev/null
+++ b/src/api/system/log.ts
@@ -0,0 +1,73 @@
+/**
+ * 日志管理接口
+ */
+import request from '../index'
+// 操作日志查询
+export function getBizLogList(params) {
+  return request({
+    url: 'sys/log/biz/list',
+    method: 'get',
+    params,
+  })
+}
+// 操作日志详情
+export function getBizLogDetail(id: string) {
+  return request({
+    url: `sys/log/biz/detail/${id}`,
+    method: 'get',
+  })
+}
+// 异常日志查询
+export function getErrorLogList(params) {
+  return request({
+    url: 'sys/log/error/list',
+    method: 'get',
+    params,
+  })
+}
+// 异常日志详情
+export function getErrorLogDetail(id: string) {
+  return request({
+    url: `sys/log/error/detail/${id}`,
+    method: 'get',
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'sys/dict/code/logType',
+    method: 'get',
+  })
+}
+
+// 删除业务日志
+export function delLog() {
+  return request({
+    url: 'sys/log/biz/delLog',
+    method: 'post',
+  })
+}
+
+// 删除异常日志
+export function delErrorLog() {
+  return request({
+    url: 'sys/log/error/delLog',
+    method: 'post',
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'sys/loginLog/list',
+    method: 'get',
+    params,
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'sys/loginLog/delLoginLog',
+    method: 'post',
+  })
+}
diff --git a/src/components.d.ts b/src/components.d.ts
index 6baf753..558b652 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -11,7 +11,6 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
-    copy: typeof import('./components/SearchArea/index copy.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
     Editor: typeof import('./components/Editor/index.vue')['default']
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 1d2e9eb..f39f4b2 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -171,6 +171,78 @@
       },
     ],
   },
+  {
+    path: '/business',
+    component: Layout,
+    redirect: '/business/list',
+    name: 'BusinessLog',
+    meta: {
+      title: '业务日志',
+      icon: 'ep:key',
+      auth: '/sys/resource',
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'BusinessList',
+        component: () => import('@/views/system/log/list.log.vue'),
+        meta: {
+          title: '业务日志',
+          auth: '/sys/resource',
+          sidebar: false,
+          breadcrumb: true,
+        },
+      },
+    ],
+  },
+  {
+    path: '/error',
+    component: Layout,
+    redirect: '/error/list',
+    name: 'ErrorLog',
+    meta: {
+      title: '异常日志',
+      icon: 'ep:key',
+      auth: '/sys/role',
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'ErrorList',
+        component: () => import('@/views/system/log/listErrorLog.vue'),
+        meta: {
+          title: '异常日志',
+          auth: '/sys/role',
+          sidebar: false,
+          breadcrumb: true,
+        },
+      },
+    ],
+  },
+  {
+    path: '/loginDiary',
+    component: Layout,
+    redirect: '/loginDiary/list',
+    name: 'loginDiaryLog',
+    meta: {
+      title: '登录日志',
+      icon: 'ep:key',
+      auth: '/sys/role',
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'loginDiaryList',
+        component: () => import('@/views/system/log/LoginLog.vue'),
+        meta: {
+          title: '登录日志',
+          auth: '/sys/role',
+          sidebar: false,
+          breadcrumb: true,
+        },
+      },
+    ],
+  },
 ]
 
 export default routes
diff --git a/src/views/system/log/list.log.vue b/src/views/system/log/list.log.vue
index 3058654..3ada883 100644
--- a/src/views/system/log/list.log.vue
+++ b/src/views/system/log/list.log.vue
@@ -1,14 +1,196 @@
-<script lang="ts" setup name="SystemDictListDict">
-// 逻辑代码
+<script lang="ts" setup name="ListLog">
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQuery } from './log_interface'
+import {
+  delLog,
+  getBizLogDetail,
+  getBizLogList,
+  getLogType,
+} from '@/api/system/log'
+const { proxy } = getCurrentInstance() as any
+const listQuery: IlistQuery = reactive({
+  keywords: '',
+  beginTime: '',
+  endTime: '',
+  // logType: '业务日志',
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+})
+const columns = [
+  {
+    text: '日志名称',
+    value: 'logName',
+    width: 150,
+  },
+  {
+    text: '用户',
+    value: 'userName',
+  },
+  {
+    text: '时间',
+    value: 'createTime',
+  },
+  {
+    text: '详细信息',
+    value: 'message',
+  },
+]
+const list = ref([])
+const total = ref(20)
+const logTypeList = ref(null)
+const listLoading = ref(true)
+const dialogFormVisible = ref(false)
+const dialogStatus = ref('')
+
+// 获取日志数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getBizLogList(listQuery).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    listLoading.value = false
+  })
+}
+
+fetchData(true)
+
+// 打开详情对话框
+const detail = (row) => {
+  getBizLogDetail(row.id).then((res) => {
+    if (res.code === 200) {
+      ElMessageBox.alert(res.data, '详情', {
+        confirmButtonText: '确定',
+      })
+    }
+  })
+}
+
+// 清空日志
+const cleanAll = () => {
+  ElMessageBox.confirm('确定要清空全部日志吗？', '确认操作', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    delLog(this.query).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        list.value = []
+        total.value = 0
+        // this.fetchData()
+      }
+    })
+  })
+}
+
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+
+// 获取日志类型
+const fetchLogType = () => {
+  getLogType(listQuery).then((response) => {
+    logTypeList.value = response.data
+  })
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
 </script>
 
 <template>
   <div>
     <!-- 布局 -->
-    日志管理
+    <app-container>
+      <!-- 筛选条件 -->
+      <search-area size="small" @search="search">
+        <search-item>
+          <el-input
+            v-model.trim="listQuery.keywords"
+            size="small"
+            placeholder="日志名称"
+            clearable
+          />
+        </search-item>
+        <search-item>
+          <el-date-picker
+            v-model="listQuery.beginTime"
+            type="datetime"
+            size="small"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="选择开始时间"
+          />
+        </search-item>
+        <search-item>
+          <el-date-picker
+            v-model="listQuery.endTime"
+            type="datetime"
+            size="small"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="选择结束时间"
+          />
+        </search-item>
+        <template #btns>
+          <el-button
+            v-if="proxy.hasPerm('/sys/log/biz/delLog')"
+            class="filter-item"
+            size="small"
+            type="info"
+            icon="el-icon-delete"
+            @click="cleanAll"
+          >
+            清空日志
+          </el-button>
+        </template>
+      </search-area>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list"
+        :total="total"
+        :columns="columns"
+        :query="listQuery"
+        :list-loading="listLoading"
+        @change="changePage"
+      >
+        <template #columns>
+          <el-table-column label="操作" width="70" align="center">
+            <template #default="scope">
+              <el-button type="text" size="small" @click="detail(scope.row)">
+                详情
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </app-container>
   </div>
 </template>
 
 <style lang="scss" scoped>
-// 样式
+.table {
+  margin-bottom: 20px;
+}
+
+.pagination-container {
+  margin-bottom: 50px;
+}
 </style>

diff --git a/package.json b/package.json
index 8ffa9b7..d85ed1b 100644
--- a/package.json
+++ b/package.json
@@ -89,5 +89,14 @@
     "commitizen": {
       "path": "node_modules/cz-git"
     }
+  },
+  "prettier": {
+    "eslintIntegration": true,
+    "stylelintIntegration": true,
+    "singleQuote": true,
+    "semi": false,
+    "insertPragma": false,
+    "trailingComma": "none",
+    "arrowParens": "avoid"
   }
 }
diff --git a/src/api/system/log.ts b/src/api/system/log.ts
new file mode 100644
index 0000000..acb8fba
--- /dev/null
+++ b/src/api/system/log.ts
@@ -0,0 +1,73 @@
+/**
+ * 日志管理接口
+ */
+import request from '../index'
+// 操作日志查询
+export function getBizLogList(params) {
+  return request({
+    url: 'sys/log/biz/list',
+    method: 'get',
+    params,
+  })
+}
+// 操作日志详情
+export function getBizLogDetail(id: string) {
+  return request({
+    url: `sys/log/biz/detail/${id}`,
+    method: 'get',
+  })
+}
+// 异常日志查询
+export function getErrorLogList(params) {
+  return request({
+    url: 'sys/log/error/list',
+    method: 'get',
+    params,
+  })
+}
+// 异常日志详情
+export function getErrorLogDetail(id: string) {
+  return request({
+    url: `sys/log/error/detail/${id}`,
+    method: 'get',
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'sys/dict/code/logType',
+    method: 'get',
+  })
+}
+
+// 删除业务日志
+export function delLog() {
+  return request({
+    url: 'sys/log/biz/delLog',
+    method: 'post',
+  })
+}
+
+// 删除异常日志
+export function delErrorLog() {
+  return request({
+    url: 'sys/log/error/delLog',
+    method: 'post',
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'sys/loginLog/list',
+    method: 'get',
+    params,
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'sys/loginLog/delLoginLog',
+    method: 'post',
+  })
+}
diff --git a/src/components.d.ts b/src/components.d.ts
index 6baf753..558b652 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -11,7 +11,6 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
-    copy: typeof import('./components/SearchArea/index copy.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
     Editor: typeof import('./components/Editor/index.vue')['default']
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 1d2e9eb..f39f4b2 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -171,6 +171,78 @@
       },
     ],
   },
+  {
+    path: '/business',
+    component: Layout,
+    redirect: '/business/list',
+    name: 'BusinessLog',
+    meta: {
+      title: '业务日志',
+      icon: 'ep:key',
+      auth: '/sys/resource',
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'BusinessList',
+        component: () => import('@/views/system/log/list.log.vue'),
+        meta: {
+          title: '业务日志',
+          auth: '/sys/resource',
+          sidebar: false,
+          breadcrumb: true,
+        },
+      },
+    ],
+  },
+  {
+    path: '/error',
+    component: Layout,
+    redirect: '/error/list',
+    name: 'ErrorLog',
+    meta: {
+      title: '异常日志',
+      icon: 'ep:key',
+      auth: '/sys/role',
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'ErrorList',
+        component: () => import('@/views/system/log/listErrorLog.vue'),
+        meta: {
+          title: '异常日志',
+          auth: '/sys/role',
+          sidebar: false,
+          breadcrumb: true,
+        },
+      },
+    ],
+  },
+  {
+    path: '/loginDiary',
+    component: Layout,
+    redirect: '/loginDiary/list',
+    name: 'loginDiaryLog',
+    meta: {
+      title: '登录日志',
+      icon: 'ep:key',
+      auth: '/sys/role',
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'loginDiaryList',
+        component: () => import('@/views/system/log/LoginLog.vue'),
+        meta: {
+          title: '登录日志',
+          auth: '/sys/role',
+          sidebar: false,
+          breadcrumb: true,
+        },
+      },
+    ],
+  },
 ]
 
 export default routes
diff --git a/src/views/system/log/list.log.vue b/src/views/system/log/list.log.vue
index 3058654..3ada883 100644
--- a/src/views/system/log/list.log.vue
+++ b/src/views/system/log/list.log.vue
@@ -1,14 +1,196 @@
-<script lang="ts" setup name="SystemDictListDict">
-// 逻辑代码
+<script lang="ts" setup name="ListLog">
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQuery } from './log_interface'
+import {
+  delLog,
+  getBizLogDetail,
+  getBizLogList,
+  getLogType,
+} from '@/api/system/log'
+const { proxy } = getCurrentInstance() as any
+const listQuery: IlistQuery = reactive({
+  keywords: '',
+  beginTime: '',
+  endTime: '',
+  // logType: '业务日志',
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+})
+const columns = [
+  {
+    text: '日志名称',
+    value: 'logName',
+    width: 150,
+  },
+  {
+    text: '用户',
+    value: 'userName',
+  },
+  {
+    text: '时间',
+    value: 'createTime',
+  },
+  {
+    text: '详细信息',
+    value: 'message',
+  },
+]
+const list = ref([])
+const total = ref(20)
+const logTypeList = ref(null)
+const listLoading = ref(true)
+const dialogFormVisible = ref(false)
+const dialogStatus = ref('')
+
+// 获取日志数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getBizLogList(listQuery).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    listLoading.value = false
+  })
+}
+
+fetchData(true)
+
+// 打开详情对话框
+const detail = (row) => {
+  getBizLogDetail(row.id).then((res) => {
+    if (res.code === 200) {
+      ElMessageBox.alert(res.data, '详情', {
+        confirmButtonText: '确定',
+      })
+    }
+  })
+}
+
+// 清空日志
+const cleanAll = () => {
+  ElMessageBox.confirm('确定要清空全部日志吗？', '确认操作', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    delLog(this.query).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        list.value = []
+        total.value = 0
+        // this.fetchData()
+      }
+    })
+  })
+}
+
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+
+// 获取日志类型
+const fetchLogType = () => {
+  getLogType(listQuery).then((response) => {
+    logTypeList.value = response.data
+  })
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
 </script>
 
 <template>
   <div>
     <!-- 布局 -->
-    日志管理
+    <app-container>
+      <!-- 筛选条件 -->
+      <search-area size="small" @search="search">
+        <search-item>
+          <el-input
+            v-model.trim="listQuery.keywords"
+            size="small"
+            placeholder="日志名称"
+            clearable
+          />
+        </search-item>
+        <search-item>
+          <el-date-picker
+            v-model="listQuery.beginTime"
+            type="datetime"
+            size="small"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="选择开始时间"
+          />
+        </search-item>
+        <search-item>
+          <el-date-picker
+            v-model="listQuery.endTime"
+            type="datetime"
+            size="small"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="选择结束时间"
+          />
+        </search-item>
+        <template #btns>
+          <el-button
+            v-if="proxy.hasPerm('/sys/log/biz/delLog')"
+            class="filter-item"
+            size="small"
+            type="info"
+            icon="el-icon-delete"
+            @click="cleanAll"
+          >
+            清空日志
+          </el-button>
+        </template>
+      </search-area>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list"
+        :total="total"
+        :columns="columns"
+        :query="listQuery"
+        :list-loading="listLoading"
+        @change="changePage"
+      >
+        <template #columns>
+          <el-table-column label="操作" width="70" align="center">
+            <template #default="scope">
+              <el-button type="text" size="small" @click="detail(scope.row)">
+                详情
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </app-container>
   </div>
 </template>
 
 <style lang="scss" scoped>
-// 样式
+.table {
+  margin-bottom: 20px;
+}
+
+.pagination-container {
+  margin-bottom: 50px;
+}
 </style>
diff --git a/src/views/system/log/listErrorLog.vue b/src/views/system/log/listErrorLog.vue
new file mode 100644
index 0000000..b17e2c3
--- /dev/null
+++ b/src/views/system/log/listErrorLog.vue
@@ -0,0 +1,151 @@
+<script lang="ts" setup name="LoginLog">
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQueryError } from './log_interface'
+import {
+  delErrorLog,
+  getErrorLogDetail,
+  getErrorLogList,
+} from '@/api/system/log'
+const { proxy } = getCurrentInstance() as any
+const listQuery: IlistQueryError = reactive({
+  keywords: '', // 日志名称
+  beginTime: '', // 开始时间
+  endTime: '', // 结束时间
+  logType: '异常日志', // 日志类型
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+})
+const columns = [
+  { text: '用户', value: 'userName', width: '150' },
+  { text: '时间', value: 'createTime', width: '150' },
+  { text: '详细信息', value: 'message' },
+] // 显示列
+const list = ref([]) // 数据列表
+const total = ref(0)
+const listLoading = ref(true)
+
+// 获取日志数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getErrorLogList(listQuery).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    listLoading.value = false
+  })
+}
+fetchData(true)
+
+// 打开详情对话框
+const detail = (row) => {
+  getErrorLogDetail(row.id).then((res) => {
+    if (res.code === 200) {
+      ElMessageBox.alert(res.data, '详情', {
+        confirmButtonText: '确定',
+        customClass: 'log-info',
+      })
+    }
+  })
+}
+// 清空日志
+const cleanAll = () => {
+  ElMessageBox.confirm('确定要清空全部异常日志吗？', '确认操作', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    delErrorLog(listQuery).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        list.value = []
+        total.value = 0
+      }
+    })
+  })
+}
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
+</script>
+
+<template>
+  <app-container>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-date-picker
+          v-model="listQuery.beginTime"
+          type="datetime"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="选择开始时间"
+        />
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="listQuery.endTime"
+          type="datetime"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="选择结束时间"
+        />
+      </search-item>
+      <template #btns>
+        <el-button
+          v-if="proxy.hasPerm('/sys/log/error/delLog')"
+          class="filter-item"
+          size="small"
+          type="info"
+          icon="el-icon-delete"
+          @click="cleanAll"
+        >
+          清空日志
+        </el-button>
+      </template>
+    </search-area>
+    <normal-table
+      :data="list"
+      :total="total"
+      :columns="columns"
+      :query="listQuery"
+      :list-loading="listLoading"
+      @change="changePage"
+    >
+      <template #columns>
+        <el-table-column label="操作" width="70" align="center">
+          <template #default="scope">
+            <el-button type="text" size="small" @click="detail(scope.row)">
+              详情
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </app-container>
+</template>
+
+<style rel="stylesheet/scss" lang="scss">
+.log-info {
+  width: 800px;
+}
+</style>

diff --git a/package.json b/package.json
index 8ffa9b7..d85ed1b 100644
--- a/package.json
+++ b/package.json
@@ -89,5 +89,14 @@
     "commitizen": {
       "path": "node_modules/cz-git"
     }
+  },
+  "prettier": {
+    "eslintIntegration": true,
+    "stylelintIntegration": true,
+    "singleQuote": true,
+    "semi": false,
+    "insertPragma": false,
+    "trailingComma": "none",
+    "arrowParens": "avoid"
   }
 }
diff --git a/src/api/system/log.ts b/src/api/system/log.ts
new file mode 100644
index 0000000..acb8fba
--- /dev/null
+++ b/src/api/system/log.ts
@@ -0,0 +1,73 @@
+/**
+ * 日志管理接口
+ */
+import request from '../index'
+// 操作日志查询
+export function getBizLogList(params) {
+  return request({
+    url: 'sys/log/biz/list',
+    method: 'get',
+    params,
+  })
+}
+// 操作日志详情
+export function getBizLogDetail(id: string) {
+  return request({
+    url: `sys/log/biz/detail/${id}`,
+    method: 'get',
+  })
+}
+// 异常日志查询
+export function getErrorLogList(params) {
+  return request({
+    url: 'sys/log/error/list',
+    method: 'get',
+    params,
+  })
+}
+// 异常日志详情
+export function getErrorLogDetail(id: string) {
+  return request({
+    url: `sys/log/error/detail/${id}`,
+    method: 'get',
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'sys/dict/code/logType',
+    method: 'get',
+  })
+}
+
+// 删除业务日志
+export function delLog() {
+  return request({
+    url: 'sys/log/biz/delLog',
+    method: 'post',
+  })
+}
+
+// 删除异常日志
+export function delErrorLog() {
+  return request({
+    url: 'sys/log/error/delLog',
+    method: 'post',
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'sys/loginLog/list',
+    method: 'get',
+    params,
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'sys/loginLog/delLoginLog',
+    method: 'post',
+  })
+}
diff --git a/src/components.d.ts b/src/components.d.ts
index 6baf753..558b652 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -11,7 +11,6 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
-    copy: typeof import('./components/SearchArea/index copy.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
     Editor: typeof import('./components/Editor/index.vue')['default']
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 1d2e9eb..f39f4b2 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -171,6 +171,78 @@
       },
     ],
   },
+  {
+    path: '/business',
+    component: Layout,
+    redirect: '/business/list',
+    name: 'BusinessLog',
+    meta: {
+      title: '业务日志',
+      icon: 'ep:key',
+      auth: '/sys/resource',
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'BusinessList',
+        component: () => import('@/views/system/log/list.log.vue'),
+        meta: {
+          title: '业务日志',
+          auth: '/sys/resource',
+          sidebar: false,
+          breadcrumb: true,
+        },
+      },
+    ],
+  },
+  {
+    path: '/error',
+    component: Layout,
+    redirect: '/error/list',
+    name: 'ErrorLog',
+    meta: {
+      title: '异常日志',
+      icon: 'ep:key',
+      auth: '/sys/role',
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'ErrorList',
+        component: () => import('@/views/system/log/listErrorLog.vue'),
+        meta: {
+          title: '异常日志',
+          auth: '/sys/role',
+          sidebar: false,
+          breadcrumb: true,
+        },
+      },
+    ],
+  },
+  {
+    path: '/loginDiary',
+    component: Layout,
+    redirect: '/loginDiary/list',
+    name: 'loginDiaryLog',
+    meta: {
+      title: '登录日志',
+      icon: 'ep:key',
+      auth: '/sys/role',
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'loginDiaryList',
+        component: () => import('@/views/system/log/LoginLog.vue'),
+        meta: {
+          title: '登录日志',
+          auth: '/sys/role',
+          sidebar: false,
+          breadcrumb: true,
+        },
+      },
+    ],
+  },
 ]
 
 export default routes
diff --git a/src/views/system/log/list.log.vue b/src/views/system/log/list.log.vue
index 3058654..3ada883 100644
--- a/src/views/system/log/list.log.vue
+++ b/src/views/system/log/list.log.vue
@@ -1,14 +1,196 @@
-<script lang="ts" setup name="SystemDictListDict">
-// 逻辑代码
+<script lang="ts" setup name="ListLog">
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQuery } from './log_interface'
+import {
+  delLog,
+  getBizLogDetail,
+  getBizLogList,
+  getLogType,
+} from '@/api/system/log'
+const { proxy } = getCurrentInstance() as any
+const listQuery: IlistQuery = reactive({
+  keywords: '',
+  beginTime: '',
+  endTime: '',
+  // logType: '业务日志',
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+})
+const columns = [
+  {
+    text: '日志名称',
+    value: 'logName',
+    width: 150,
+  },
+  {
+    text: '用户',
+    value: 'userName',
+  },
+  {
+    text: '时间',
+    value: 'createTime',
+  },
+  {
+    text: '详细信息',
+    value: 'message',
+  },
+]
+const list = ref([])
+const total = ref(20)
+const logTypeList = ref(null)
+const listLoading = ref(true)
+const dialogFormVisible = ref(false)
+const dialogStatus = ref('')
+
+// 获取日志数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getBizLogList(listQuery).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    listLoading.value = false
+  })
+}
+
+fetchData(true)
+
+// 打开详情对话框
+const detail = (row) => {
+  getBizLogDetail(row.id).then((res) => {
+    if (res.code === 200) {
+      ElMessageBox.alert(res.data, '详情', {
+        confirmButtonText: '确定',
+      })
+    }
+  })
+}
+
+// 清空日志
+const cleanAll = () => {
+  ElMessageBox.confirm('确定要清空全部日志吗？', '确认操作', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    delLog(this.query).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        list.value = []
+        total.value = 0
+        // this.fetchData()
+      }
+    })
+  })
+}
+
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+
+// 获取日志类型
+const fetchLogType = () => {
+  getLogType(listQuery).then((response) => {
+    logTypeList.value = response.data
+  })
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
 </script>
 
 <template>
   <div>
     <!-- 布局 -->
-    日志管理
+    <app-container>
+      <!-- 筛选条件 -->
+      <search-area size="small" @search="search">
+        <search-item>
+          <el-input
+            v-model.trim="listQuery.keywords"
+            size="small"
+            placeholder="日志名称"
+            clearable
+          />
+        </search-item>
+        <search-item>
+          <el-date-picker
+            v-model="listQuery.beginTime"
+            type="datetime"
+            size="small"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="选择开始时间"
+          />
+        </search-item>
+        <search-item>
+          <el-date-picker
+            v-model="listQuery.endTime"
+            type="datetime"
+            size="small"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="选择结束时间"
+          />
+        </search-item>
+        <template #btns>
+          <el-button
+            v-if="proxy.hasPerm('/sys/log/biz/delLog')"
+            class="filter-item"
+            size="small"
+            type="info"
+            icon="el-icon-delete"
+            @click="cleanAll"
+          >
+            清空日志
+          </el-button>
+        </template>
+      </search-area>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list"
+        :total="total"
+        :columns="columns"
+        :query="listQuery"
+        :list-loading="listLoading"
+        @change="changePage"
+      >
+        <template #columns>
+          <el-table-column label="操作" width="70" align="center">
+            <template #default="scope">
+              <el-button type="text" size="small" @click="detail(scope.row)">
+                详情
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </app-container>
   </div>
 </template>
 
 <style lang="scss" scoped>
-// 样式
+.table {
+  margin-bottom: 20px;
+}
+
+.pagination-container {
+  margin-bottom: 50px;
+}
 </style>
diff --git a/src/views/system/log/listErrorLog.vue b/src/views/system/log/listErrorLog.vue
new file mode 100644
index 0000000..b17e2c3
--- /dev/null
+++ b/src/views/system/log/listErrorLog.vue
@@ -0,0 +1,151 @@
+<script lang="ts" setup name="LoginLog">
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQueryError } from './log_interface'
+import {
+  delErrorLog,
+  getErrorLogDetail,
+  getErrorLogList,
+} from '@/api/system/log'
+const { proxy } = getCurrentInstance() as any
+const listQuery: IlistQueryError = reactive({
+  keywords: '', // 日志名称
+  beginTime: '', // 开始时间
+  endTime: '', // 结束时间
+  logType: '异常日志', // 日志类型
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+})
+const columns = [
+  { text: '用户', value: 'userName', width: '150' },
+  { text: '时间', value: 'createTime', width: '150' },
+  { text: '详细信息', value: 'message' },
+] // 显示列
+const list = ref([]) // 数据列表
+const total = ref(0)
+const listLoading = ref(true)
+
+// 获取日志数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getErrorLogList(listQuery).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    listLoading.value = false
+  })
+}
+fetchData(true)
+
+// 打开详情对话框
+const detail = (row) => {
+  getErrorLogDetail(row.id).then((res) => {
+    if (res.code === 200) {
+      ElMessageBox.alert(res.data, '详情', {
+        confirmButtonText: '确定',
+        customClass: 'log-info',
+      })
+    }
+  })
+}
+// 清空日志
+const cleanAll = () => {
+  ElMessageBox.confirm('确定要清空全部异常日志吗？', '确认操作', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    delErrorLog(listQuery).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        list.value = []
+        total.value = 0
+      }
+    })
+  })
+}
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
+</script>
+
+<template>
+  <app-container>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-date-picker
+          v-model="listQuery.beginTime"
+          type="datetime"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="选择开始时间"
+        />
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="listQuery.endTime"
+          type="datetime"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="选择结束时间"
+        />
+      </search-item>
+      <template #btns>
+        <el-button
+          v-if="proxy.hasPerm('/sys/log/error/delLog')"
+          class="filter-item"
+          size="small"
+          type="info"
+          icon="el-icon-delete"
+          @click="cleanAll"
+        >
+          清空日志
+        </el-button>
+      </template>
+    </search-area>
+    <normal-table
+      :data="list"
+      :total="total"
+      :columns="columns"
+      :query="listQuery"
+      :list-loading="listLoading"
+      @change="changePage"
+    >
+      <template #columns>
+        <el-table-column label="操作" width="70" align="center">
+          <template #default="scope">
+            <el-button type="text" size="small" @click="detail(scope.row)">
+              详情
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </app-container>
+</template>
+
+<style rel="stylesheet/scss" lang="scss">
+.log-info {
+  width: 800px;
+}
+</style>
diff --git a/src/views/system/log/log_interface.ts b/src/views/system/log/log_interface.ts
new file mode 100644
index 0000000..9269bdd
--- /dev/null
+++ b/src/views/system/log/log_interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  beginTime: string
+  endTime: string
+  // logType: '业务日志',
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IlistQueryError {
+  keywords: string
+  beginTime: string
+  endTime: string
+  logType: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}

diff --git a/package.json b/package.json
index 8ffa9b7..d85ed1b 100644
--- a/package.json
+++ b/package.json
@@ -89,5 +89,14 @@
     "commitizen": {
       "path": "node_modules/cz-git"
     }
+  },
+  "prettier": {
+    "eslintIntegration": true,
+    "stylelintIntegration": true,
+    "singleQuote": true,
+    "semi": false,
+    "insertPragma": false,
+    "trailingComma": "none",
+    "arrowParens": "avoid"
   }
 }
diff --git a/src/api/system/log.ts b/src/api/system/log.ts
new file mode 100644
index 0000000..acb8fba
--- /dev/null
+++ b/src/api/system/log.ts
@@ -0,0 +1,73 @@
+/**
+ * 日志管理接口
+ */
+import request from '../index'
+// 操作日志查询
+export function getBizLogList(params) {
+  return request({
+    url: 'sys/log/biz/list',
+    method: 'get',
+    params,
+  })
+}
+// 操作日志详情
+export function getBizLogDetail(id: string) {
+  return request({
+    url: `sys/log/biz/detail/${id}`,
+    method: 'get',
+  })
+}
+// 异常日志查询
+export function getErrorLogList(params) {
+  return request({
+    url: 'sys/log/error/list',
+    method: 'get',
+    params,
+  })
+}
+// 异常日志详情
+export function getErrorLogDetail(id: string) {
+  return request({
+    url: `sys/log/error/detail/${id}`,
+    method: 'get',
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'sys/dict/code/logType',
+    method: 'get',
+  })
+}
+
+// 删除业务日志
+export function delLog() {
+  return request({
+    url: 'sys/log/biz/delLog',
+    method: 'post',
+  })
+}
+
+// 删除异常日志
+export function delErrorLog() {
+  return request({
+    url: 'sys/log/error/delLog',
+    method: 'post',
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'sys/loginLog/list',
+    method: 'get',
+    params,
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'sys/loginLog/delLoginLog',
+    method: 'post',
+  })
+}
diff --git a/src/components.d.ts b/src/components.d.ts
index 6baf753..558b652 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -11,7 +11,6 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
-    copy: typeof import('./components/SearchArea/index copy.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
     Editor: typeof import('./components/Editor/index.vue')['default']
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 1d2e9eb..f39f4b2 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -171,6 +171,78 @@
       },
     ],
   },
+  {
+    path: '/business',
+    component: Layout,
+    redirect: '/business/list',
+    name: 'BusinessLog',
+    meta: {
+      title: '业务日志',
+      icon: 'ep:key',
+      auth: '/sys/resource',
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'BusinessList',
+        component: () => import('@/views/system/log/list.log.vue'),
+        meta: {
+          title: '业务日志',
+          auth: '/sys/resource',
+          sidebar: false,
+          breadcrumb: true,
+        },
+      },
+    ],
+  },
+  {
+    path: '/error',
+    component: Layout,
+    redirect: '/error/list',
+    name: 'ErrorLog',
+    meta: {
+      title: '异常日志',
+      icon: 'ep:key',
+      auth: '/sys/role',
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'ErrorList',
+        component: () => import('@/views/system/log/listErrorLog.vue'),
+        meta: {
+          title: '异常日志',
+          auth: '/sys/role',
+          sidebar: false,
+          breadcrumb: true,
+        },
+      },
+    ],
+  },
+  {
+    path: '/loginDiary',
+    component: Layout,
+    redirect: '/loginDiary/list',
+    name: 'loginDiaryLog',
+    meta: {
+      title: '登录日志',
+      icon: 'ep:key',
+      auth: '/sys/role',
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'loginDiaryList',
+        component: () => import('@/views/system/log/LoginLog.vue'),
+        meta: {
+          title: '登录日志',
+          auth: '/sys/role',
+          sidebar: false,
+          breadcrumb: true,
+        },
+      },
+    ],
+  },
 ]
 
 export default routes
diff --git a/src/views/system/log/list.log.vue b/src/views/system/log/list.log.vue
index 3058654..3ada883 100644
--- a/src/views/system/log/list.log.vue
+++ b/src/views/system/log/list.log.vue
@@ -1,14 +1,196 @@
-<script lang="ts" setup name="SystemDictListDict">
-// 逻辑代码
+<script lang="ts" setup name="ListLog">
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQuery } from './log_interface'
+import {
+  delLog,
+  getBizLogDetail,
+  getBizLogList,
+  getLogType,
+} from '@/api/system/log'
+const { proxy } = getCurrentInstance() as any
+const listQuery: IlistQuery = reactive({
+  keywords: '',
+  beginTime: '',
+  endTime: '',
+  // logType: '业务日志',
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+})
+const columns = [
+  {
+    text: '日志名称',
+    value: 'logName',
+    width: 150,
+  },
+  {
+    text: '用户',
+    value: 'userName',
+  },
+  {
+    text: '时间',
+    value: 'createTime',
+  },
+  {
+    text: '详细信息',
+    value: 'message',
+  },
+]
+const list = ref([])
+const total = ref(20)
+const logTypeList = ref(null)
+const listLoading = ref(true)
+const dialogFormVisible = ref(false)
+const dialogStatus = ref('')
+
+// 获取日志数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getBizLogList(listQuery).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    listLoading.value = false
+  })
+}
+
+fetchData(true)
+
+// 打开详情对话框
+const detail = (row) => {
+  getBizLogDetail(row.id).then((res) => {
+    if (res.code === 200) {
+      ElMessageBox.alert(res.data, '详情', {
+        confirmButtonText: '确定',
+      })
+    }
+  })
+}
+
+// 清空日志
+const cleanAll = () => {
+  ElMessageBox.confirm('确定要清空全部日志吗？', '确认操作', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    delLog(this.query).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        list.value = []
+        total.value = 0
+        // this.fetchData()
+      }
+    })
+  })
+}
+
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+
+// 获取日志类型
+const fetchLogType = () => {
+  getLogType(listQuery).then((response) => {
+    logTypeList.value = response.data
+  })
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
 </script>
 
 <template>
   <div>
     <!-- 布局 -->
-    日志管理
+    <app-container>
+      <!-- 筛选条件 -->
+      <search-area size="small" @search="search">
+        <search-item>
+          <el-input
+            v-model.trim="listQuery.keywords"
+            size="small"
+            placeholder="日志名称"
+            clearable
+          />
+        </search-item>
+        <search-item>
+          <el-date-picker
+            v-model="listQuery.beginTime"
+            type="datetime"
+            size="small"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="选择开始时间"
+          />
+        </search-item>
+        <search-item>
+          <el-date-picker
+            v-model="listQuery.endTime"
+            type="datetime"
+            size="small"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="选择结束时间"
+          />
+        </search-item>
+        <template #btns>
+          <el-button
+            v-if="proxy.hasPerm('/sys/log/biz/delLog')"
+            class="filter-item"
+            size="small"
+            type="info"
+            icon="el-icon-delete"
+            @click="cleanAll"
+          >
+            清空日志
+          </el-button>
+        </template>
+      </search-area>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list"
+        :total="total"
+        :columns="columns"
+        :query="listQuery"
+        :list-loading="listLoading"
+        @change="changePage"
+      >
+        <template #columns>
+          <el-table-column label="操作" width="70" align="center">
+            <template #default="scope">
+              <el-button type="text" size="small" @click="detail(scope.row)">
+                详情
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </app-container>
   </div>
 </template>
 
 <style lang="scss" scoped>
-// 样式
+.table {
+  margin-bottom: 20px;
+}
+
+.pagination-container {
+  margin-bottom: 50px;
+}
 </style>
diff --git a/src/views/system/log/listErrorLog.vue b/src/views/system/log/listErrorLog.vue
new file mode 100644
index 0000000..b17e2c3
--- /dev/null
+++ b/src/views/system/log/listErrorLog.vue
@@ -0,0 +1,151 @@
+<script lang="ts" setup name="LoginLog">
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQueryError } from './log_interface'
+import {
+  delErrorLog,
+  getErrorLogDetail,
+  getErrorLogList,
+} from '@/api/system/log'
+const { proxy } = getCurrentInstance() as any
+const listQuery: IlistQueryError = reactive({
+  keywords: '', // 日志名称
+  beginTime: '', // 开始时间
+  endTime: '', // 结束时间
+  logType: '异常日志', // 日志类型
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+})
+const columns = [
+  { text: '用户', value: 'userName', width: '150' },
+  { text: '时间', value: 'createTime', width: '150' },
+  { text: '详细信息', value: 'message' },
+] // 显示列
+const list = ref([]) // 数据列表
+const total = ref(0)
+const listLoading = ref(true)
+
+// 获取日志数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getErrorLogList(listQuery).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    listLoading.value = false
+  })
+}
+fetchData(true)
+
+// 打开详情对话框
+const detail = (row) => {
+  getErrorLogDetail(row.id).then((res) => {
+    if (res.code === 200) {
+      ElMessageBox.alert(res.data, '详情', {
+        confirmButtonText: '确定',
+        customClass: 'log-info',
+      })
+    }
+  })
+}
+// 清空日志
+const cleanAll = () => {
+  ElMessageBox.confirm('确定要清空全部异常日志吗？', '确认操作', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    delErrorLog(listQuery).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        list.value = []
+        total.value = 0
+      }
+    })
+  })
+}
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
+</script>
+
+<template>
+  <app-container>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-date-picker
+          v-model="listQuery.beginTime"
+          type="datetime"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="选择开始时间"
+        />
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="listQuery.endTime"
+          type="datetime"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="选择结束时间"
+        />
+      </search-item>
+      <template #btns>
+        <el-button
+          v-if="proxy.hasPerm('/sys/log/error/delLog')"
+          class="filter-item"
+          size="small"
+          type="info"
+          icon="el-icon-delete"
+          @click="cleanAll"
+        >
+          清空日志
+        </el-button>
+      </template>
+    </search-area>
+    <normal-table
+      :data="list"
+      :total="total"
+      :columns="columns"
+      :query="listQuery"
+      :list-loading="listLoading"
+      @change="changePage"
+    >
+      <template #columns>
+        <el-table-column label="操作" width="70" align="center">
+          <template #default="scope">
+            <el-button type="text" size="small" @click="detail(scope.row)">
+              详情
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </app-container>
+</template>
+
+<style rel="stylesheet/scss" lang="scss">
+.log-info {
+  width: 800px;
+}
+</style>
diff --git a/src/views/system/log/log_interface.ts b/src/views/system/log/log_interface.ts
new file mode 100644
index 0000000..9269bdd
--- /dev/null
+++ b/src/views/system/log/log_interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  beginTime: string
+  endTime: string
+  // logType: '业务日志',
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IlistQueryError {
+  keywords: string
+  beginTime: string
+  endTime: string
+  logType: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
new file mode 100644
index 0000000..068b97b
--- /dev/null
+++ b/src/views/system/log/loginLog.vue
@@ -0,0 +1,160 @@
+<script lang="ts" setup name="LoginLog">
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQuery } from './log_interface'
+import { delLoginLog, getLoginLogList } from '@/api/system/log'
+const { proxy } = getCurrentInstance() as any
+const listQuery: IlistQuery = {
+  keywords: '',
+  beginTime: '',
+  endTime: '',
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+}
+const columns = [
+  {
+    text: '日志名称',
+    value: 'logName',
+    width: 150,
+  },
+  {
+    text: '用户',
+    value: 'userName',
+  },
+  {
+    text: '登录ip',
+    value: 'ip',
+  },
+  {
+    text: '操作成功与否',
+    value: 'succeed',
+  },
+  {
+    text: '操作时间',
+    value: 'createTime',
+  },
+]
+const list = ref([])
+const total = ref(20)
+const logTypeList = ref(null)
+const listLoading = ref(true)
+const dialogFormVisible = ref(false)
+const dialogStatus = ref('')
+
+// 获取日志数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getLoginLogList(listQuery).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    listLoading.value = false
+  })
+}
+
+fetchData(true)
+
+// 打开详情对话框
+const detail = (row) => {
+  ElMessageBox.alert(row.message, '详情', {
+    confirmButtonText: '确定',
+  })
+}
+
+// 清空日志
+const cleanAll = () => {
+  ElMessageBox.confirm('确定要清空全部日志吗？', '确认操作', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    delLoginLog(this.query).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        list.value = []
+        total.value = 0
+        // this.fetchData()
+      }
+    })
+  })
+}
+
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
+</script>
+
+<template>
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input
+          v-model.trim="listQuery.keywords"
+          size="small"
+          placeholder="日志名称"
+          clearable
+        />
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="listQuery.beginTime"
+          type="datetime"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="选择开始时间"
+        />
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="listQuery.endTime"
+          type="datetime"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="选择结束时间"
+        />
+      </search-item>
+      <template #btns>
+        <el-button
+          v-if="proxy.hasPerm('/sys/loginLog/delLoginLog')"
+          class="filter-item"
+          size="small"
+          type="info"
+          icon="el-icon-delete"
+          @click="cleanAll"
+        >
+          清空日志
+        </el-button>
+      </template>
+    </search-area>
+    <!-- 查询结果Table显示 -->
+    <normal-table
+      :data="list"
+      :total="total"
+      :columns="columns"
+      :query="listQuery"
+      :list-loading="listLoading"
+      @change="changePage"
+    />
+  </app-container>
+</template>

diff --git a/package.json b/package.json
index 8ffa9b7..d85ed1b 100644
--- a/package.json
+++ b/package.json
@@ -89,5 +89,14 @@
     "commitizen": {
       "path": "node_modules/cz-git"
     }
+  },
+  "prettier": {
+    "eslintIntegration": true,
+    "stylelintIntegration": true,
+    "singleQuote": true,
+    "semi": false,
+    "insertPragma": false,
+    "trailingComma": "none",
+    "arrowParens": "avoid"
   }
 }
diff --git a/src/api/system/log.ts b/src/api/system/log.ts
new file mode 100644
index 0000000..acb8fba
--- /dev/null
+++ b/src/api/system/log.ts
@@ -0,0 +1,73 @@
+/**
+ * 日志管理接口
+ */
+import request from '../index'
+// 操作日志查询
+export function getBizLogList(params) {
+  return request({
+    url: 'sys/log/biz/list',
+    method: 'get',
+    params,
+  })
+}
+// 操作日志详情
+export function getBizLogDetail(id: string) {
+  return request({
+    url: `sys/log/biz/detail/${id}`,
+    method: 'get',
+  })
+}
+// 异常日志查询
+export function getErrorLogList(params) {
+  return request({
+    url: 'sys/log/error/list',
+    method: 'get',
+    params,
+  })
+}
+// 异常日志详情
+export function getErrorLogDetail(id: string) {
+  return request({
+    url: `sys/log/error/detail/${id}`,
+    method: 'get',
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'sys/dict/code/logType',
+    method: 'get',
+  })
+}
+
+// 删除业务日志
+export function delLog() {
+  return request({
+    url: 'sys/log/biz/delLog',
+    method: 'post',
+  })
+}
+
+// 删除异常日志
+export function delErrorLog() {
+  return request({
+    url: 'sys/log/error/delLog',
+    method: 'post',
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'sys/loginLog/list',
+    method: 'get',
+    params,
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'sys/loginLog/delLoginLog',
+    method: 'post',
+  })
+}
diff --git a/src/components.d.ts b/src/components.d.ts
index 6baf753..558b652 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -11,7 +11,6 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
-    copy: typeof import('./components/SearchArea/index copy.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
     Editor: typeof import('./components/Editor/index.vue')['default']
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 1d2e9eb..f39f4b2 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -171,6 +171,78 @@
       },
     ],
   },
+  {
+    path: '/business',
+    component: Layout,
+    redirect: '/business/list',
+    name: 'BusinessLog',
+    meta: {
+      title: '业务日志',
+      icon: 'ep:key',
+      auth: '/sys/resource',
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'BusinessList',
+        component: () => import('@/views/system/log/list.log.vue'),
+        meta: {
+          title: '业务日志',
+          auth: '/sys/resource',
+          sidebar: false,
+          breadcrumb: true,
+        },
+      },
+    ],
+  },
+  {
+    path: '/error',
+    component: Layout,
+    redirect: '/error/list',
+    name: 'ErrorLog',
+    meta: {
+      title: '异常日志',
+      icon: 'ep:key',
+      auth: '/sys/role',
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'ErrorList',
+        component: () => import('@/views/system/log/listErrorLog.vue'),
+        meta: {
+          title: '异常日志',
+          auth: '/sys/role',
+          sidebar: false,
+          breadcrumb: true,
+        },
+      },
+    ],
+  },
+  {
+    path: '/loginDiary',
+    component: Layout,
+    redirect: '/loginDiary/list',
+    name: 'loginDiaryLog',
+    meta: {
+      title: '登录日志',
+      icon: 'ep:key',
+      auth: '/sys/role',
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'loginDiaryList',
+        component: () => import('@/views/system/log/LoginLog.vue'),
+        meta: {
+          title: '登录日志',
+          auth: '/sys/role',
+          sidebar: false,
+          breadcrumb: true,
+        },
+      },
+    ],
+  },
 ]
 
 export default routes
diff --git a/src/views/system/log/list.log.vue b/src/views/system/log/list.log.vue
index 3058654..3ada883 100644
--- a/src/views/system/log/list.log.vue
+++ b/src/views/system/log/list.log.vue
@@ -1,14 +1,196 @@
-<script lang="ts" setup name="SystemDictListDict">
-// 逻辑代码
+<script lang="ts" setup name="ListLog">
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQuery } from './log_interface'
+import {
+  delLog,
+  getBizLogDetail,
+  getBizLogList,
+  getLogType,
+} from '@/api/system/log'
+const { proxy } = getCurrentInstance() as any
+const listQuery: IlistQuery = reactive({
+  keywords: '',
+  beginTime: '',
+  endTime: '',
+  // logType: '业务日志',
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+})
+const columns = [
+  {
+    text: '日志名称',
+    value: 'logName',
+    width: 150,
+  },
+  {
+    text: '用户',
+    value: 'userName',
+  },
+  {
+    text: '时间',
+    value: 'createTime',
+  },
+  {
+    text: '详细信息',
+    value: 'message',
+  },
+]
+const list = ref([])
+const total = ref(20)
+const logTypeList = ref(null)
+const listLoading = ref(true)
+const dialogFormVisible = ref(false)
+const dialogStatus = ref('')
+
+// 获取日志数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getBizLogList(listQuery).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    listLoading.value = false
+  })
+}
+
+fetchData(true)
+
+// 打开详情对话框
+const detail = (row) => {
+  getBizLogDetail(row.id).then((res) => {
+    if (res.code === 200) {
+      ElMessageBox.alert(res.data, '详情', {
+        confirmButtonText: '确定',
+      })
+    }
+  })
+}
+
+// 清空日志
+const cleanAll = () => {
+  ElMessageBox.confirm('确定要清空全部日志吗？', '确认操作', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    delLog(this.query).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        list.value = []
+        total.value = 0
+        // this.fetchData()
+      }
+    })
+  })
+}
+
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+
+// 获取日志类型
+const fetchLogType = () => {
+  getLogType(listQuery).then((response) => {
+    logTypeList.value = response.data
+  })
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
 </script>
 
 <template>
   <div>
     <!-- 布局 -->
-    日志管理
+    <app-container>
+      <!-- 筛选条件 -->
+      <search-area size="small" @search="search">
+        <search-item>
+          <el-input
+            v-model.trim="listQuery.keywords"
+            size="small"
+            placeholder="日志名称"
+            clearable
+          />
+        </search-item>
+        <search-item>
+          <el-date-picker
+            v-model="listQuery.beginTime"
+            type="datetime"
+            size="small"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="选择开始时间"
+          />
+        </search-item>
+        <search-item>
+          <el-date-picker
+            v-model="listQuery.endTime"
+            type="datetime"
+            size="small"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="选择结束时间"
+          />
+        </search-item>
+        <template #btns>
+          <el-button
+            v-if="proxy.hasPerm('/sys/log/biz/delLog')"
+            class="filter-item"
+            size="small"
+            type="info"
+            icon="el-icon-delete"
+            @click="cleanAll"
+          >
+            清空日志
+          </el-button>
+        </template>
+      </search-area>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list"
+        :total="total"
+        :columns="columns"
+        :query="listQuery"
+        :list-loading="listLoading"
+        @change="changePage"
+      >
+        <template #columns>
+          <el-table-column label="操作" width="70" align="center">
+            <template #default="scope">
+              <el-button type="text" size="small" @click="detail(scope.row)">
+                详情
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </app-container>
   </div>
 </template>
 
 <style lang="scss" scoped>
-// 样式
+.table {
+  margin-bottom: 20px;
+}
+
+.pagination-container {
+  margin-bottom: 50px;
+}
 </style>
diff --git a/src/views/system/log/listErrorLog.vue b/src/views/system/log/listErrorLog.vue
new file mode 100644
index 0000000..b17e2c3
--- /dev/null
+++ b/src/views/system/log/listErrorLog.vue
@@ -0,0 +1,151 @@
+<script lang="ts" setup name="LoginLog">
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQueryError } from './log_interface'
+import {
+  delErrorLog,
+  getErrorLogDetail,
+  getErrorLogList,
+} from '@/api/system/log'
+const { proxy } = getCurrentInstance() as any
+const listQuery: IlistQueryError = reactive({
+  keywords: '', // 日志名称
+  beginTime: '', // 开始时间
+  endTime: '', // 结束时间
+  logType: '异常日志', // 日志类型
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+})
+const columns = [
+  { text: '用户', value: 'userName', width: '150' },
+  { text: '时间', value: 'createTime', width: '150' },
+  { text: '详细信息', value: 'message' },
+] // 显示列
+const list = ref([]) // 数据列表
+const total = ref(0)
+const listLoading = ref(true)
+
+// 获取日志数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getErrorLogList(listQuery).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    listLoading.value = false
+  })
+}
+fetchData(true)
+
+// 打开详情对话框
+const detail = (row) => {
+  getErrorLogDetail(row.id).then((res) => {
+    if (res.code === 200) {
+      ElMessageBox.alert(res.data, '详情', {
+        confirmButtonText: '确定',
+        customClass: 'log-info',
+      })
+    }
+  })
+}
+// 清空日志
+const cleanAll = () => {
+  ElMessageBox.confirm('确定要清空全部异常日志吗？', '确认操作', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    delErrorLog(listQuery).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        list.value = []
+        total.value = 0
+      }
+    })
+  })
+}
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
+</script>
+
+<template>
+  <app-container>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-date-picker
+          v-model="listQuery.beginTime"
+          type="datetime"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="选择开始时间"
+        />
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="listQuery.endTime"
+          type="datetime"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="选择结束时间"
+        />
+      </search-item>
+      <template #btns>
+        <el-button
+          v-if="proxy.hasPerm('/sys/log/error/delLog')"
+          class="filter-item"
+          size="small"
+          type="info"
+          icon="el-icon-delete"
+          @click="cleanAll"
+        >
+          清空日志
+        </el-button>
+      </template>
+    </search-area>
+    <normal-table
+      :data="list"
+      :total="total"
+      :columns="columns"
+      :query="listQuery"
+      :list-loading="listLoading"
+      @change="changePage"
+    >
+      <template #columns>
+        <el-table-column label="操作" width="70" align="center">
+          <template #default="scope">
+            <el-button type="text" size="small" @click="detail(scope.row)">
+              详情
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </app-container>
+</template>
+
+<style rel="stylesheet/scss" lang="scss">
+.log-info {
+  width: 800px;
+}
+</style>
diff --git a/src/views/system/log/log_interface.ts b/src/views/system/log/log_interface.ts
new file mode 100644
index 0000000..9269bdd
--- /dev/null
+++ b/src/views/system/log/log_interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  beginTime: string
+  endTime: string
+  // logType: '业务日志',
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IlistQueryError {
+  keywords: string
+  beginTime: string
+  endTime: string
+  logType: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
new file mode 100644
index 0000000..068b97b
--- /dev/null
+++ b/src/views/system/log/loginLog.vue
@@ -0,0 +1,160 @@
+<script lang="ts" setup name="LoginLog">
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQuery } from './log_interface'
+import { delLoginLog, getLoginLogList } from '@/api/system/log'
+const { proxy } = getCurrentInstance() as any
+const listQuery: IlistQuery = {
+  keywords: '',
+  beginTime: '',
+  endTime: '',
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+}
+const columns = [
+  {
+    text: '日志名称',
+    value: 'logName',
+    width: 150,
+  },
+  {
+    text: '用户',
+    value: 'userName',
+  },
+  {
+    text: '登录ip',
+    value: 'ip',
+  },
+  {
+    text: '操作成功与否',
+    value: 'succeed',
+  },
+  {
+    text: '操作时间',
+    value: 'createTime',
+  },
+]
+const list = ref([])
+const total = ref(20)
+const logTypeList = ref(null)
+const listLoading = ref(true)
+const dialogFormVisible = ref(false)
+const dialogStatus = ref('')
+
+// 获取日志数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getLoginLogList(listQuery).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    listLoading.value = false
+  })
+}
+
+fetchData(true)
+
+// 打开详情对话框
+const detail = (row) => {
+  ElMessageBox.alert(row.message, '详情', {
+    confirmButtonText: '确定',
+  })
+}
+
+// 清空日志
+const cleanAll = () => {
+  ElMessageBox.confirm('确定要清空全部日志吗？', '确认操作', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    delLoginLog(this.query).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        list.value = []
+        total.value = 0
+        // this.fetchData()
+      }
+    })
+  })
+}
+
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
+</script>
+
+<template>
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input
+          v-model.trim="listQuery.keywords"
+          size="small"
+          placeholder="日志名称"
+          clearable
+        />
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="listQuery.beginTime"
+          type="datetime"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="选择开始时间"
+        />
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="listQuery.endTime"
+          type="datetime"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="选择结束时间"
+        />
+      </search-item>
+      <template #btns>
+        <el-button
+          v-if="proxy.hasPerm('/sys/loginLog/delLoginLog')"
+          class="filter-item"
+          size="small"
+          type="info"
+          icon="el-icon-delete"
+          @click="cleanAll"
+        >
+          清空日志
+        </el-button>
+      </template>
+    </search-area>
+    <!-- 查询结果Table显示 -->
+    <normal-table
+      :data="list"
+      :total="total"
+      :columns="columns"
+      :query="listQuery"
+      :list-loading="listLoading"
+      @change="changePage"
+    />
+  </app-container>
+</template>
diff --git a/tsconfig.json b/tsconfig.json
index fc53447..a5d7d7b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,16 +10,11 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "esModuleInterop": true,
-    "lib": [
-      "ESNext",
-      "DOM"
-    ],
+    "lib": ["ESNext", "DOM"],
     "skipLibCheck": true,
     "baseUrl": "./",
     "paths": {
-      "@/*": [
-        "src/*"
-      ]
+      "@/*": ["src/*"]
     },
     "types": [
       "vite/client",
@@ -28,12 +23,7 @@
       "vite-plugin-vue-layouts/client"
     ]
   },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.d.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue"
-  ],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [
     {
       "path": "./tsconfig.node.json"