From 701df6c8cdc1a0bee7d531490da40b296073c7e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E5=87=A4=E5=90=89?= <baifengji@163.com>
Date: Sat, 5 Jul 2025 16:06:03 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=AE=A1=E8=AE=A1=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=B7=A6=E4=BE=A7=E8=8F=9C=E5=8D=95=E6=96=B0=E5=A2=9E=E9=80=89?=
 =?UTF-8?q?=E9=A1=B9=EF=BC=9A=E6=93=8D=E4=BD=9C=E8=AE=B0=E5=BD=95=E3=80=81?=
 =?UTF-8?q?=E6=B6=88=E6=AF=92=E8=AE=B0=E5=BD=95=EF=BC=8C=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=8E=BB=E9=99=A4=E6=B6=88=E6=AF=92=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E9=85=8D=E7=BD=AE=E9=80=89=E9=A1=B9=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/audit/History.vue         | 205 ++++++++++++++++++++++++++++++
 src/components/audit/OperationRecord.vue | 140 ++++++++++++++++++++
 src/components/setting/History.vue       | 206 ------------------------------
 src/stores/auditStore.ts                 |  21 +++
 src/stores/settingStore.ts               |   4 -
 src/views/audit/index.vue                | 212 ++++++++++++++-----------------
 src/views/setting/index.vue              |   4 +-
 7 files changed, 461 insertions(+), 331 deletions(-)
 create mode 100644 src/components/audit/History.vue
 create mode 100644 src/components/audit/OperationRecord.vue
 delete mode 100644 src/components/setting/History.vue
 create mode 100644 src/stores/auditStore.ts

diff --git a/src/components/audit/History.vue b/src/components/audit/History.vue
new file mode 100644
index 0000000..761037d
--- /dev/null
+++ b/src/components/audit/History.vue
@@ -0,0 +1,205 @@
+<script lang="ts" setup>
+// import { useSettingStore } from '@/stores/settingStore'
+import { syncSendCmd } from 'apis/system'
+import { ElMessageBox } from 'element-plus'
+import { FtMessage } from 'libs/message'
+import { computed, onMounted, ref } from 'vue'
+
+import HistoryDetail from '../setting/HistoryDetail.vue'
+// const settingStore = useSettingStore()
+const tableData = ref<string[]>([])
+const selectedRecords = ref<Setting.History[]>([])
+const visible = ref(false)
+const detailData = ref()
+onMounted(() => {
+  getRecord()
+})
+
+const getRecord = () => {
+  const params = {
+    className: 'DisinfectionLogsService',
+    fnName: 'getRecordList',
+    params: {},
+  }
+  syncSendCmd(params).then((res) => {
+    if (res.ackcode === 0 && res.rely && res.rely.length) {
+      const list: string[] = res.rely.map((item: Setting.History) => {
+        return {
+          name: item,
+        }
+      })
+      tableData.value = list
+    }
+  })
+}
+const showDetail = (historyItem: Setting.History) => {
+  const detailParams = {
+    className: 'DisinfectionLogsService',
+    fnName: 'getRecord',
+    params: {
+      logName: historyItem.name,
+    },
+  }
+  syncSendCmd(detailParams).then((res) => {
+    // 把值附给详情的列表
+    detailData.value = res.rely
+    visible.value = true
+  })
+}
+const printDetail = (historyItem: Setting.History) => {
+  FtMessage.info('开始打印!')
+  const detailParams = {
+    className: 'DisinfectionLogsService',
+    fnName: 'printRecord',
+    params: {
+      logName: historyItem.name,
+    },
+  }
+  syncSendCmd(detailParams).then(() => {
+    FtMessage.success('正在打印中!')
+  })
+}
+const onDelHistory = () => {
+  if (!selectedRecords.value.length) {
+    FtMessage.warning('请选择要删除的数据')
+    return
+  }
+  ElMessageBox.confirm('请确认是否删除?', '删除', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    const delParams = {
+      className: 'DisinfectionLogsService',
+      fnName: 'deleteReports',
+      params: {
+        logNames: selectedRecords.value.map(item => item.name),
+      },
+    }
+    syncSendCmd(delParams).then((res) => {
+      if (res.ackcode === 0) {
+        FtMessage.success('删除成功')
+        getRecord()
+      }
+    })
+  })
+}
+const onExportHistory = () => {
+  // if (!selectedRecords.value.length) {
+  //   FtMessage.warning('请选择要导出的数据')
+  //   return
+  // }
+  const exportParams = {
+    className: 'DisinfectionLogsService',
+    fnName: 'exportAllRecord',
+    params: {},
+  }
+  syncSendCmd(exportParams)
+    .then((res) => {
+      if (res.ackcode === 0) {
+        FtMessage.success('导出成功')
+      }
+    })
+    .catch((error) => {
+      console.error('导出记录失败:', error)
+    })
+}
+
+const handleSelectionChange = (rows: Setting.History[]) => {
+  selectedRecords.value = rows
+}
+
+const onClose = () => {
+  visible.value = false
+}
+const deleteBtnVisible = computed(() => {
+  return JSON.parse(localStorage.getItem('user') || '{}')?.roleType?.includes('admin')
+})
+</script>
+
+<template>
+  <div>
+    <div class="history-export">
+      <bt-button type="primary" button-text="全部导出" @click="onExportHistory" />
+      <bt-button v-if="deleteBtnVisible" type="primary" button-text="删除" @click="onDelHistory" />
+    </div>
+    <div class="history-table">
+      <el-table :data="tableData" style="width: 100%" height="100%" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" />
+        <el-table-column type="index" label="序号" width="80" />
+        <el-table-column prop="name" label="消毒日期"/>
+        <el-table-column prop="detail" label="操作" width="200">
+          <template #default="scoped">
+            <div class="user-opera">
+              <el-button class="view-button" @click.stop="showDetail(scoped.row)">
+                查看
+              </el-button>
+              <el-button class="print-button" title="打印" @click.stop="printDetail(scoped.row)">打印</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <ft-dialog v-model="visible" title="消毒详情" width="80vw" @cancel="onClose">
+      <div>
+        <HistoryDetail :data="detailData" />
+      </div>
+    </ft-dialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.user-opera {
+  display: flex;
+  align-items: center;
+}
+.main-content {
+  height: $main-container-height;
+  padding: 10px;
+  background: $gradient-color;
+  .history-export {
+    margin: 10px;
+  }
+  .history-table {
+    height: 73vh;
+    overflow: auto;
+  }
+  .view-button,
+  .delete-button,
+  .print-button {
+    border: none;
+    padding: 4px 8px;
+    border-radius: 3px;
+    cursor: pointer;
+    margin-right: 5px;
+    transition: all 0.3s;
+    font-family: serif;
+  }
+  .print-button {
+    background-color: #e6f0ff;
+    color: #1890ff;
+  }
+  .view-button {
+    background-color: #e6f0ff;
+    color: #1890ff;
+  }
+
+  .view-button:hover {
+    background-color: #1890ff;
+    color: white;
+  }
+  .print-button:hover {
+    background-color: #1890ff;
+    color: white;
+  }
+  .delete-button {
+    background-color: #ffe6e6;
+    color: #ff4d4f;
+  }
+
+  .delete-button:hover {
+    background-color: #ff4d4f;
+    color: white;
+  }
+}
+</style>
diff --git a/src/components/audit/OperationRecord.vue b/src/components/audit/OperationRecord.vue
new file mode 100644
index 0000000..1d9520b
--- /dev/null
+++ b/src/components/audit/OperationRecord.vue
@@ -0,0 +1,140 @@
+<script lang="ts" setup>
+import { sendCmd, syncSendCmd } from 'apis/system'
+import type { TableColumnCtx } from 'element-plus'
+import { onMounted, ref } from 'vue'
+
+import { FtMessage } from '@/libs/message'
+
+/**
+ * 操作记录组件
+ */
+
+// 分页控制
+const pageNum = ref(1) // 当前页码
+const pageSize = ref(10) // 每页显示数量
+const totle = ref(0) // 总记录数
+
+// 表格数据
+const tableData = ref<Audit.AuditItem[]>([]) // 审计日志表格数据
+
+/**
+ * @hook 生命周期钩子 - 组件挂载完成时执行
+ * @description 初始化加载审计日志列表
+ */
+onMounted(() => {
+  getAuditList()
+})
+
+/**
+ * @function 获取审计日志列表
+ * @desc 从服务端获取分页后的审计日志数据
+ */
+const getAuditList = async () => {
+  const params = {
+    className: 'AuditMgrService',
+    fnName: 'getRecords',
+    params: {
+      page: pageNum.value,
+      pageSize: pageSize.value,
+    },
+  }
+  try {
+    const res = await sendCmd(params)
+    tableData.value = res.items || []
+    totle.value = res.total || 0
+  }
+  catch (error) {
+    FtMessage.error('获取日志列表失败')
+    console.error('获取审计日志失败:', error)
+  }
+}
+
+/**
+ * @function 导出全部审计记录
+ * @desc 导出单条审计记录，需先选择一条记录
+ */
+const onExportRecord = () => {
+  // if (selectedUserList.value.length !== 1) {
+  //   FtMessage.warning('请选择一条数据进行导出')
+  //   return
+  // }
+  const params = {
+    className: 'AuditMgrService',
+    fnName: 'exportData',
+  }
+  syncSendCmd(params)
+    .then((res) => {
+      if (res.ackcode === 0) {
+        FtMessage.success('导出成功')
+      }
+    })
+    .catch((error) => {
+      console.error('导出审计记录失败:', error)
+    })
+}
+
+/**
+ * @function 页码变更处理
+ * @param {number} page - 新的页码
+ * @desc 更新页码并重新加载数据
+ */
+const handleCurrentChange = (page: number) => {
+  pageNum.value = page
+  getAuditList()
+}
+
+const formatIndex = (
+  _row: unknown,
+  _column: TableColumnCtx<unknown>,
+  _cellValue: unknown,
+  index: number,
+): number => {
+  return (pageNum.value - 1) * pageSize.value + index + 1
+}
+</script>
+
+<template>
+  <div class="dashboard-container">
+    <main class="main-content">
+      <div class="audit-export">
+        <bt-button type="primary" button-text="全部导出" @click="onExportRecord" />
+      </div>
+      <div class="audit-table">
+        <el-table :data="tableData" style="width: 100%" height="100%">
+          <el-table-column label="序号" width="100" :formatter="formatIndex" />
+          <el-table-column prop="usrName" label="操作人" width="250" />
+          <el-table-column prop="behaviorinfo" label="操作内容" />
+          <el-table-column prop="date" label="操作时间" width="250" />
+        </el-table>
+      </div>
+      <div class="audit-pagination">
+        <el-pagination layout="prev, pager, next" :total="totle" @current-change="handleCurrentChange" />
+      </div>
+    </main>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.main-content {
+  height: $main-container-height;
+  overflow: hidden;
+  background: $gradient-color;
+  box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15);
+  .audit-export {
+    height: 50px;
+    padding: 0 10px;
+    display: flex;
+    align-items: center;
+  }
+  .audit-table {
+    overflow: auto;
+    height: calc(100% - 100px);
+  }
+  .audit-pagination {
+    height: 50px;
+    display: flex;
+    align-items: center;
+    float: right;
+  }
+}
+</style>
diff --git a/src/components/setting/History.vue b/src/components/setting/History.vue
deleted file mode 100644
index 045cffb..0000000
--- a/src/components/setting/History.vue
+++ /dev/null
@@ -1,206 +0,0 @@
-<script lang="ts" setup>
-// import { useSettingStore } from '@/stores/settingStore'
-import { syncSendCmd } from 'apis/system'
-import { ElMessageBox } from 'element-plus'
-import { computed, onMounted, ref } from 'vue'
-
-import { FtMessage } from '@/libs/message'
-
-import HistoryDetail from './HistoryDetail.vue'
-// const settingStore = useSettingStore()
-const tableData = ref<string[]>([])
-const selectedRecords = ref<Setting.History[]>([])
-const visible = ref(false)
-const detailData = ref()
-onMounted(() => {
-  getRecord()
-})
-
-const getRecord = () => {
-  const params = {
-    className: 'DisinfectionLogsService',
-    fnName: 'getRecordList',
-    params: {},
-  }
-  syncSendCmd(params).then((res) => {
-    if (res.ackcode === 0 && res.rely && res.rely.length) {
-      const list: string[] = res.rely.map((item: Setting.History) => {
-        return {
-          name: item,
-        }
-      })
-      tableData.value = list
-    }
-  })
-}
-const showDetail = (historyItem: Setting.History) => {
-  const detailParams = {
-    className: 'DisinfectionLogsService',
-    fnName: 'getRecord',
-    params: {
-      logName: historyItem.name,
-    },
-  }
-  syncSendCmd(detailParams).then((res) => {
-    // 把值附给详情的列表
-    detailData.value = res.rely
-    visible.value = true
-  })
-}
-const printDetail = (historyItem: Setting.History) => {
-  FtMessage.info('开始打印!')
-  const detailParams = {
-    className: 'DisinfectionLogsService',
-    fnName: 'printRecord',
-    params: {
-      logName: historyItem.name,
-    },
-  }
-  syncSendCmd(detailParams).then(() => {
-    FtMessage.success('正在打印中!')
-  })
-}
-const onDelHistory = () => {
-  if (!selectedRecords.value.length) {
-    FtMessage.warning('请选择要删除的数据')
-    return
-  }
-  ElMessageBox.confirm('请确认是否删除?', '删除', {
-    confirmButtonText: '确认',
-    cancelButtonText: '取消',
-    type: 'warning',
-  }).then(() => {
-    const delParams = {
-      className: 'DisinfectionLogsService',
-      fnName: 'deleteReports',
-      params: {
-        logNames: selectedRecords.value.map(item => item.name),
-      },
-    }
-    syncSendCmd(delParams).then((res) => {
-      if (res.ackcode === 0) {
-        FtMessage.success('删除成功')
-        getRecord()
-      }
-    })
-  })
-}
-const onExportHistory = () => {
-  // if (!selectedRecords.value.length) {
-  //   FtMessage.warning('请选择要导出的数据')
-  //   return
-  // }
-  const exportParams = {
-    className: 'DisinfectionLogsService',
-    fnName: 'exportAllRecord',
-    params: {},
-  }
-  syncSendCmd(exportParams)
-    .then((res) => {
-      if (res.ackcode === 0) {
-        FtMessage.success('导出成功')
-      }
-    })
-    .catch((error) => {
-      console.error('导出记录失败:', error)
-    })
-}
-
-const handleSelectionChange = (rows: Setting.History[]) => {
-  selectedRecords.value = rows
-}
-
-const onClose = () => {
-  visible.value = false
-}
-const deleteBtnVisible = computed(() => {
-  return JSON.parse(localStorage.getItem('user') || '{}')?.roleType?.includes('admin')
-})
-</script>
-
-<template>
-  <div>
-    <div class="history-export">
-      <bt-button type="primary" button-text="全部导出" @click="onExportHistory" />
-      <bt-button v-if="deleteBtnVisible" type="primary" button-text="删除" @click="onDelHistory" />
-    </div>
-    <div class="history-table">
-      <el-table :data="tableData" style="width: 100%" height="100%" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" />
-        <el-table-column type="index" label="序号" width="80" />
-        <el-table-column prop="name" label="消毒日期"/>
-        <el-table-column prop="detail" label="操作" width="200">
-          <template #default="scoped">
-            <div class="user-opera">
-              <el-button class="view-button" @click.stop="showDetail(scoped.row)">
-                查看
-              </el-button>
-              <el-button class="print-button" title="打印" @click.stop="printDetail(scoped.row)">打印</el-button>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <ft-dialog v-model="visible" title="消毒详情" width="80vw" @cancel="onClose">
-      <div>
-        <HistoryDetail :data="detailData" />
-      </div>
-    </ft-dialog>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.user-opera {
-  display: flex;
-  align-items: center;
-}
-.main-content {
-  height: $main-container-height;
-  padding: 10px;
-  background: $gradient-color;
-  .history-export {
-    margin: 10px;
-  }
-  .history-table {
-    height: 73vh;
-    overflow: auto;
-  }
-  .view-button,
-  .delete-button,
-  .print-button {
-    border: none;
-    padding: 4px 8px;
-    border-radius: 3px;
-    cursor: pointer;
-    margin-right: 5px;
-    transition: all 0.3s;
-    font-family: serif;
-  }
-  .print-button {
-    background-color: #e6f0ff;
-    color: #1890ff;
-  }
-  .view-button {
-    background-color: #e6f0ff;
-    color: #1890ff;
-  }
-
-  .view-button:hover {
-    background-color: #1890ff;
-    color: white;
-  }
-  .print-button:hover {
-    background-color: #1890ff;
-    color: white;
-  }
-  .delete-button {
-    background-color: #ffe6e6;
-    color: #ff4d4f;
-  }
-
-  .delete-button:hover {
-    background-color: #ff4d4f;
-    color: white;
-  }
-}
-</style>
diff --git a/src/stores/auditStore.ts b/src/stores/auditStore.ts
new file mode 100644
index 0000000..31f2d07
--- /dev/null
+++ b/src/stores/auditStore.ts
@@ -0,0 +1,21 @@
+import { defineStore } from 'pinia'
+/**
+ * 审计模块
+ */
+export const useAuditStore = defineStore('audit', () => {
+  // 设置菜单配置
+  const auditMenus = [{
+    name: '操作记录',
+    code: 'history',
+    roleType: 'admin',
+  }, {
+    name: '消毒记录',
+    code: 'operationRecord',
+    roleType: 'admin,maintainer',
+  }]
+  const historyList: Record<string, string>[] = []
+  return {
+    auditMenus,
+    historyList,
+  }
+})
diff --git a/src/stores/settingStore.ts b/src/stores/settingStore.ts
index 3f0c1e5..4c3051e 100644
--- a/src/stores/settingStore.ts
+++ b/src/stores/settingStore.ts
@@ -8,10 +8,6 @@ import { ref } from 'vue'
 export const useSettingStore = defineStore('setting', () => {
   // 设置菜单配置
   const settingMenus = [{
-    name: '消毒历史记录',
-    code: 'history',
-    roleType: 'admin,maintainer',
-  }, {
     name: '消毒默认配置',
     code: 'defaultFormula',
     roleType: 'admin,maintainer',
diff --git a/src/views/audit/index.vue b/src/views/audit/index.vue
index 1c78a91..117949c 100644
--- a/src/views/audit/index.vue
+++ b/src/views/audit/index.vue
@@ -1,115 +1,42 @@
 <script lang="ts" setup>
-import { sendCmd, syncSendCmd } from 'apis/system'
-import type { TableColumnCtx } from 'element-plus'
-import { onMounted, ref } from 'vue'
+import History from 'components/audit/History.vue'
+import OperationRecord from 'components/audit/OperationRecord.vue'
+import { useAuditStore } from 'stores/auditStore'
+import { ref } from 'vue'
 
-import { FtMessage } from '@/libs/message'
-
-/**
- * 审计日志管理组件
- * @description 展示审计日志列表，支持分页和单条记录导出功能
- */
-
-// 分页控制
-const pageNum = ref(1) // 当前页码
-const pageSize = ref(10) // 每页显示数量
-const totle = ref(0) // 总记录数
-
-// 表格数据
-const tableData = ref<Audit.AuditItem[]>([]) // 审计日志表格数据
-
-/**
- * @hook 生命周期钩子 - 组件挂载完成时执行
- * @description 初始化加载审计日志列表
- */
-onMounted(() => {
-  getAuditList()
-})
-
-/**
- * @function 获取审计日志列表
- * @desc 从服务端获取分页后的审计日志数据
- */
-const getAuditList = async () => {
-  const params = {
-    className: 'AuditMgrService',
-    fnName: 'getRecords',
-    params: {
-      page: pageNum.value,
-      pageSize: pageSize.value,
-    },
-  }
-  try {
-    const res = await sendCmd(params)
-    tableData.value = res.items || []
-    totle.value = res.total || 0
-  }
-  catch (error) {
-    FtMessage.error('获取日志列表失败')
-    console.error('获取审计日志失败:', error)
-  }
-}
-
-/**
- * @function 导出全部审计记录
- * @desc 导出单条审计记录，需先选择一条记录
- */
-const onExportRecord = () => {
-  // if (selectedUserList.value.length !== 1) {
-  //   FtMessage.warning('请选择一条数据进行导出')
-  //   return
-  // }
-  const params = {
-    className: 'AuditMgrService',
-    fnName: 'exportData',
-  }
-  syncSendCmd(params)
-    .then((res) => {
-      if (res.ackcode === 0) {
-        FtMessage.success('导出成功')
-      }
-    })
-    .catch((error) => {
-      console.error('导出审计记录失败:', error)
-    })
-}
-
-/**
- * @function 页码变更处理
- * @param {number} page - 新的页码
- * @desc 更新页码并重新加载数据
- */
-const handleCurrentChange = (page: number) => {
-  pageNum.value = page
-  getAuditList()
-}
-
-const formatIndex = (
-  _row: unknown,
-  _column: TableColumnCtx<unknown>,
-  _cellValue: unknown,
-  index: number,
-): number => {
-  return (pageNum.value - 1) * pageSize.value + index + 1
+const auditStore = useAuditStore()
+const currentUserRoleType = JSON.parse(localStorage.getItem('user') || '{}')?.roleType
+const auditMenus = auditStore.auditMenus.filter((item): boolean => item.roleType.includes(currentUserRoleType))
+const selectedMenuCode = ref('history')
+// 选择菜单项的方法
+const selectItem = (menuCode: string) => {
+  selectedMenuCode.value = menuCode
 }
 </script>
 
 <template>
   <div class="dashboard-container">
     <main class="main-content">
-      <div class="audit-export">
-        <bt-button type="primary" button-text="全部导出" @click="onExportRecord" />
+      <div class="setting-left">
+        <div class="menu-container">
+          <ul class="menu-container">
+            <li
+              v-for="item in auditMenus"
+              :key="item.code"
+              :class="{ active: selectedMenuCode === item.code }"
+              class="setting-menu-li menu-item"
+              @click="selectItem(item.code)"
+            >
+              {{ item.name }}
+            </li>
+          </ul>
+        </div>
       </div>
-      <div class="audit-table">
-        <el-table :data="tableData" style="width: 100%" height="100%">
-          <el-table-column label="序号" width="100" :formatter="formatIndex" />
-          <el-table-column prop="usrName" label="操作人" width="250" />
-          <el-table-column prop="behaviorinfo" label="操作内容" />
-          <el-table-column prop="date" label="操作时间" width="250" />
-        </el-table>
-      </div>
-      <div class="audit-pagination">
-        <el-pagination layout="prev, pager, next" :total="totle" @current-change="handleCurrentChange" />
+      <div class="setting-right">
+        <History v-if="selectedMenuCode === 'history'" />
+        <div v-if="selectedMenuCode === 'operationRecord'">
+          <OperationRecord />
+        </div>
       </div>
     </main>
   </div>
@@ -117,25 +44,74 @@ const formatIndex = (
 
 <style lang="scss" scoped>
 .main-content {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
   height: $main-container-height;
+  gap: 10px;
   overflow: hidden;
-  background: $gradient-color;
-  box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15);
-  .audit-export {
-    height: 50px;
-    padding: 0 10px;
-    display: flex;
-    align-items: center;
+  .setting-left {
+    background: linear-gradient(180deg, rgba(147, 203, 255, 0.01) 50%, #ffffff 24%);
+    box-shadow: 0 0 4px #0000001f;
+    border-radius: 10px;
+    border: 1px solid #e1e1e1;
+    overflow: hidden;
   }
-  .audit-table {
-    overflow: auto;
-    height: calc(100% - 100px);
+  .setting-right {
+    grid-column: 2 / 4;
+    box-shadow: 0 1px 5px 0 rgba(9, 39, 62, 0.15);
+    background: #ffffff;
+    border: 1px solid #e1e1e1;
+    background: $gradient-color;
+    border-radius: 10px;
+    overflow: hidden;
+    padding: 10px;
   }
-  .audit-pagination {
-    height: 50px;
-    display: flex;
-    align-items: center;
-    float: right;
+}
+.menu-container {
+  padding: 5px 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  .setting-menu-li {
+    font-size: 18px;
   }
 }
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+li {
+  padding: 15px 15px;
+  font-size: 15px;
+  display: flex;
+  align-items: center;
+  //border-radius: 10px;
+  height: 60px;
+  border-left: 5px solid #fff;
+  transition: border-left-color 0.3s ease;
+}
+li.active {
+  border-left: 5px solid #2892f3;
+  // color: #e6f7ff;
+  background: #e8f3ff;
+  //border-radius: 10px;
+  color: #2892f3;
+}
+
+.menu-container {
+  width: 100%; /* 占满父容器 */
+  background: #fff;
+  // border: 1px solid #eee;
+  overflow: hidden; /* 配合圆角，避免阴影/边框溢出 */
+}
+.menu-item {
+  padding: 14px 20px; /* 更大触摸区域 */
+  font-size: 15px; /* 适配手机阅读 */
+  border-bottom: 1px solid #f5f5f5;
+}
+/* 最后一项去掉分隔线 */
+.menu-item:last-child {
+  border-bottom: none;
+}
 </style>
diff --git a/src/views/setting/index.vue b/src/views/setting/index.vue
index fd52f15..8380ed9 100644
--- a/src/views/setting/index.vue
+++ b/src/views/setting/index.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import History from 'components/setting/History.vue'
 import { ref } from 'vue'
 
 import FormulaConfig from '@/components/formula/FormulaConfig.vue'
@@ -11,7 +10,7 @@ import { useSettingStore } from '@/stores/settingStore'
 const settingStore = useSettingStore()
 const currentUserRoleType = JSON.parse(localStorage.getItem('user') || '{}')?.roleType
 const settingMenus = settingStore.settingMenus.filter((item): boolean => item.roleType.includes(currentUserRoleType))
-const selectedMenuCode = ref('history')
+const selectedMenuCode = ref('defaultFormula')
 // 选择菜单项的方法
 const selectItem = (menuCode: string) => {
   selectedMenuCode.value = menuCode
@@ -37,7 +36,6 @@ const selectItem = (menuCode: string) => {
         </div>
       </div>
       <div class="setting-right">
-        <History v-if="selectedMenuCode === 'history'" />
         <div v-if="selectedMenuCode === 'defaultFormula'">
           <FormulaConfig type="setting" :formula-name-visible="false" />
         </div>