初始化

mokee-gateway-web/backup-on-demand/views-20260612-2236/admin/log/LoginLogList.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="page-wrapper">
+    <!-- 搜索区域 -->
+    <el-card shadow="never" class="search-card">
+      <template #header>
+        <div class="card-header-title">
+          <el-icon><Search /></el-icon>
+          <span>搜索条件</span>
+        </div>
+      </template>
+      <el-form :model="query" inline>
+        <el-form-item label="用户名">
+          <el-input v-model="query.username" placeholder="请输入用户名" clearable />
+        </el-form-item>
+        <el-form-item label="登录状态">
+          <el-select v-model="query.status" placeholder="全部" clearable style="width: 120px">
+            <el-option label="全部" value="" />
+            <el-option label="成功" :value="1" />
+            <el-option label="失败" :value="0" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间范围">
+          <el-date-picker
+            v-model="query.dateRange"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            style="width: 360px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">
+            <el-icon><Search /></el-icon>
+            搜索
+          </el-button>
+          <el-button @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 表格 -->
+    <el-card shadow="never">
+      <el-table :data="tableData" border stripe v-loading="loading" style="width: 100%">
+        <el-table-column prop="username" label="用户名" width="120" />
+        <el-table-column prop="loginIp" label="登录IP" width="150" />
+        <el-table-column prop="createdAt" label="登录时间" width="180">
+          <template #default="{ row }">
+            {{ row.createdAt ? new Date(row.createdAt).toLocaleString('zh-CN') : '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="90" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.status === 1 ? 'success' : 'danger'" effect="dark" size="small">
+              {{ row.status === 1 ? '成功' : '失败' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="browser" label="浏览器" min-width="140" show-overflow-tooltip />
+        <el-table-column prop="os" label="操作系统" min-width="150" show-overflow-tooltip />
+        <el-table-column prop="failReason" label="失败原因" min-width="180" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.failReason || '-' }}
+          </template>
+        </el-table-column>
+        <template #empty>
+          <el-empty description="暂无登录日志" :image-size="100" />
+        </template>
+      </el-table>
+
+      <div class="pagination-wrapper">
+        <el-pagination
+          v-model:current-page="query.page"
+          v-model:page-size="query.pageSize"
+          :total="total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          background
+          @current-change="fetchData"
+          @size-change="fetchData"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+import request from '@/utils/request'
+
+/** 登录日志类型 */
+interface LoginLogItem {
+  username: string
+  loginIp: string
+  loginTime: string
+  status: number
+  browser: string
+  os: string
+  failReason: string
+}
+
+// --- 查询 ---
+const query = reactive({
+  page: 1,
+  pageSize: 10,
+  username: '',
+  status: '' as string | number,
+  dateRange: [] as string[],
+})
+
+const tableData = ref<LoginLogItem[]>([])
+const total = ref(0)
+const loading = ref(false)
+
+async function fetchData() {
+  loading.value = true
+  try {
+    const params: Record<string, unknown> = {
+      page: query.page,
+      pageSize: query.pageSize,
+    }
+    if (query.username) params.username = query.username
+    if (query.status !== '') params.status = query.status
+    if (query.dateRange && query.dateRange.length === 2) {
+      params.startTime = query.dateRange[0]
+      params.endTime = query.dateRange[1]
+    }
+
+    const res = await request.post('/zgapi/v1/admin/log/login/page', params)
+    tableData.value = res.data?.records ?? []
+    total.value = res.data?.total ?? 0
+  } catch {
+    // ignore
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleSearch() {
+  query.page = 1
+  fetchData()
+}
+
+function handleReset() {
+  query.username = ''
+  query.status = ''
+  query.dateRange = []
+  query.page = 1
+  fetchData()
+}
+
+// 初始化
+fetchData()
+</script>
+
+<style scoped>
+.page-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.card-header-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.pagination-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+
+@media (max-width: 768px) {
+  .page-wrapper { gap: 10px; }
+  .page-toolbar { flex-direction: column; gap: 10px; }
+  .page-toolbar .el-select,
+  .page-toolbar .el-date-picker { width: 100% !important; }
+}
+</style>