路由更新

schoolNewsWeb/src/views/admin/manage/logs/LoginLogsView.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="login-logs">
+    <div class="filter-bar">
+      <el-input 
+        v-model="searchKeyword" 
+        placeholder="搜索用户名..."
+        style="width: 200px"
+        clearable
+      />
+      <el-select v-model="loginStatus" placeholder="登录状态" style="width: 150px" clearable>
+        <el-option label="成功" value="success" />
+        <el-option label="失败" value="failed" />
+      </el-select>
+      <el-date-picker
+        v-model="dateRange"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      />
+      <el-button type="primary" @click="handleSearch">查询</el-button>
+      <el-button @click="handleExport">导出</el-button>
+      <el-button type="danger" @click="handleClear">清空日志</el-button>
+    </div>
+
+    <el-table :data="logs" style="width: 100%">
+      <el-table-column prop="username" label="用户名" width="120" />
+      <el-table-column prop="ipAddress" label="IP地址" width="140" />
+      <el-table-column prop="location" label="登录地点" width="150" />
+      <el-table-column prop="browser" label="浏览器" width="120" />
+      <el-table-column prop="os" label="操作系统" width="120" />
+      <el-table-column prop="status" label="状态" width="100">
+        <template #default="{ row }">
+          <el-tag :type="row.status === 'success' ? 'success' : 'danger'">
+            {{ row.status === 'success' ? '成功' : '失败' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="message" label="信息" min-width="150" />
+      <el-table-column prop="loginTime" label="登录时间" width="180" />
+    </el-table>
+
+    <el-pagination
+      v-model:current-page="currentPage"
+      v-model:page-size="pageSize"
+      :total="total"
+      layout="total, sizes, prev, pager, next, jumper"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { ElInput, ElSelect, ElOption, ElDatePicker, ElButton, ElTable, ElTableColumn, ElTag, ElPagination, ElMessage, ElMessageBox } from 'element-plus';
+
+const searchKeyword = ref('');
+const loginStatus = ref('');
+const dateRange = ref<[Date, Date] | null>(null);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
+const logs = ref<any[]>([]);
+
+onMounted(() => {
+  loadLogs();
+});
+
+function loadLogs() {
+  // TODO: 加载登录日志
+}
+
+function handleSearch() {
+  currentPage.value = 1;
+  loadLogs();
+}
+
+function handleExport() {
+  // TODO: 导出日志
+  ElMessage.info('导出功能开发中');
+}
+
+async function handleClear() {
+  try {
+    await ElMessageBox.confirm('确定要清空所有登录日志吗？此操作不可恢复！', '警告', {
+      type: 'warning'
+    });
+    // TODO: 清空日志
+    ElMessage.success('日志已清空');
+  } catch {
+    // 取消操作
+  }
+}
+
+function handleSizeChange(val: number) {
+  pageSize.value = val;
+  loadLogs();
+}
+
+function handleCurrentChange(val: number) {
+  currentPage.value = val;
+  loadLogs();
+}
+</script>
+
+<style lang="scss" scoped>
+.login-logs {
+  padding: 20px;
+}
+
+.filter-bar {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 20px;
+  align-items: center;
+}
+
+.el-table {
+  margin-bottom: 20px;
+}
+</style>
+