diff --git a/.gitignore b/.gitignore
index a547bf3..75a23ea 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,4 @@
 # Logs
-logs
-*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
diff --git a/src/views/system/logs/index.vue b/src/views/system/logs/index.vue
new file mode 100644
index 0000000..8093430
--- /dev/null
+++ b/src/views/system/logs/index.vue
@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { ElMessage } from "element-plus";
+import { useSystemLogStore } from '../../../stores/systemLog';
+import { markRaw } from 'vue';
+import { Download, Delete } from "@element-plus/icons-vue";
+
+interface LogEntry {
+  id: number;
+  type: string;
+  user: string;
+  action: string;
+  ip: string;
+  status: string;
+  detail: string;
+  createTime: string;
+}
+
+const systemLogStore = useSystemLogStore();
+
+// 日志类型选项
+const logTypes = [
+  { label: "用户操作", value: "用户操作" },
+  { label: "系统配置", value: "系统配置" },
+  { label: "数据操作", value: "数据操作" },
+  { label: "异常警告", value: "异常警告" },
+];
+
+// 状态选项
+const statusOptions = [
+  { label: "成功", value: "成功" },
+  { label: "失败", value: "失败" },
+  { label: "警告", value: "警告" },
+];
+
+// 获取状态标签类型
+const getStatusType = (status: string) => {
+  switch (status) {
+    case "成功":
+      return "success";
+    case "失败":
+      return "danger";
+    case "警告":
+      return "warning";
+    default:
+      return "info";
+  }
+};
+
+// 导出日志
+const handleExport = () => {
+  console.log("导出日志:", searchForm.value);
+};
+
+// 清空日志
+const handleClear = () => {
+  systemLogStore.clearLogs();
+  ElMessage.success('日志已清空');
+};
+
+// 搜索条件
+const searchForm = ref({
+  dateRange: [],
+  type: "",
+  user: "",
+  status: "",
+});
+
+// 分页配置
+const currentPage = ref(1);
+const pageSize = ref(10);
+
+// 重置搜索
+const resetSearch = () => {
+  searchForm.value = {
+    dateRange: [],
+    type: "",
+    user: "",
+    status: "",
+  };
+};
+
+const icons = {
+  Download: markRaw(Download),
+  Delete: markRaw(Delete)
+};
+</script>
+
+<template>
+  <div class="logs-container">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <span>系统日志</span>
+          <div class="header-btns">
+            <el-button type="primary" @click="handleExport">
+              <el-icon><component :is="icons.Download" /></el-icon>
+              导出日志
+            </el-button>
+            <el-button type="danger" @click="handleClear">
+              <el-icon><component :is="icons.Delete" /></el-icon>
+              清空日志
+            </el-button>
+          </div>
+        </div>
+      </template>
+
+      <!-- 搜索表单 -->
+      <el-form :model="searchForm" inline class="search-form">
+        <el-form-item label="时间范围">
+          <el-date-picker
+            v-model="searchForm.dateRange"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            value-format="YYYY-MM-DD HH:mm:ss"
+          />
+        </el-form-item>
+        <el-form-item label="日志类型">
+          <el-select v-model="searchForm.type" placeholder="请选择" clearable>
+            <el-option
+              v-for="item in logTypes"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="操作人">
+          <el-input v-model="searchForm.user" placeholder="请输入" clearable />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="searchForm.status" placeholder="请选择" clearable>
+            <el-option
+              v-for="item in statusOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary">搜索</el-button>
+          <el-button @click="resetSearch">重置</el-button>
+        </el-form-item>
+      </el-form>
+
+      <!-- 日志表格 -->
+      <el-table :data="systemLogStore.getLogs" style="width: 100%">
+        <el-table-column prop="id" label="ID" width="80" />
+        <el-table-column prop="type" label="日志类型" width="120" />
+        <el-table-column prop="user" label="操作人" width="120" />
+        <el-table-column prop="action" label="操作" width="120" />
+        <el-table-column prop="ip" label="IP地址" width="140" />
+        <el-table-column prop="status" label="状态" width="100">
+          <template #default="{ row }">
+            <el-tag :type="getStatusType(row.status)" size="small">
+              {{ row.status }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="detail"
+          label="详细信息"
+          min-width="200"
+          show-overflow-tooltip
+        />
+        <el-table-column prop="createTime" label="操作时间" width="180" />
+      </el-table>
+
+      <!-- 分页器 -->
+      <div class="pagination-container">
+        <el-pagination
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="systemLogStore.getLogs.length"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "../../../styles/variables.scss";
+
+.logs-container {
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    span {
+      font-size: 16px;
+      font-weight: 500;
+      color: $text-primary;
+    }
+
+    .header-btns {
+      .el-button {
+        margin-left: 12px;
+      }
+    }
+  }
+
+  .search-form {
+    margin-bottom: 20px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid $border-color;
+  }
+
+  .pagination-container {
+    margin-top: 20px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  :deep(.el-card) {
+    border: none;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  }
+}
+</style>