视图修改、接口修改

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

@@ -1,60 +1,65 @@
 <template>
-  <div class="login-logs">
-    <div class="filter-bar">
-      <el-input 
-        v-model="searchKeyword" 
-        placeholder="搜索用户名..."
-        style="width: 200px"
-        clearable
+  <AdminLayout title="登录日志" subtitle="登录日志管理">
+    <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"
       />
-      <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>
+  </AdminLayout>
 </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';
-
+import { AdminLayout } from '@/views/admin';
+defineOptions({
+  name: 'LoginLogsView'
+});
 const searchKeyword = ref('');
 const loginStatus = ref('');
 const dateRange = ref<[Date, Date] | null>(null);