feat(user-center): 优化登录日志页面布局与交互
- 增加页面面包屑导航，提升用户路径感知 - 使用通用卡片样式包裹内容，视觉更统一 - 保持原有搜索表单功能，调整部分细节结构 - 修正搜索按钮图标显示错误，保持图标一致性 - 细化表格列模板，完善操作区域按钮显示 - 优化组件嵌套结构，增强页面语义化和可维护性
This commit is contained in:
danial
@@ -1,124 +1,128 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<a-row>
|
||||
<a-col :flex="1">
|
||||
<a-form
|
||||
:model="formModel"
|
||||
:label-col-props="{ span: 6 }"
|
||||
:wrapper-col-props="{ span: 18 }"
|
||||
label-align="left"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="8">
|
||||
<a-form-item field="loginName" label="登录名">
|
||||
<a-input
|
||||
v-model="formModel.loginName"
|
||||
placeholder="请输入登录名"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item field="status" label="登录状态">
|
||||
<a-select
|
||||
v-model="formModel.status"
|
||||
placeholder="请选择登录状态"
|
||||
allow-clear
|
||||
>
|
||||
<a-option :value="1">登录成功</a-option>
|
||||
<a-option :value="0">登录失败</a-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item field="dateRange" label="登录时间">
|
||||
<a-range-picker
|
||||
v-model="formModel.dateRange"
|
||||
style="width: 100%"
|
||||
:shortcuts="dateShortcuts"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-col>
|
||||
<a-divider style="height: 42px" direction="vertical" />
|
||||
<a-col flex="172px" style="text-align: right">
|
||||
<a-space direction="horizontal" :size="18">
|
||||
<a-button type="primary" @click="search">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="reset">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-divider style="margin-top: 0" />
|
||||
|
||||
<a-table
|
||||
row-key="id"
|
||||
:loading="loading"
|
||||
:pagination="{
|
||||
current: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
total: pagination.total,
|
||||
pageSizeOptions: [10, 20, 50, 100],
|
||||
showPageSize: true,
|
||||
showTotal: true,
|
||||
showJumper: true
|
||||
}"
|
||||
:columns="columns"
|
||||
:data="renderData"
|
||||
:scroll="{ x: 1400 }"
|
||||
@page-change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
>
|
||||
<template #index="{ rowIndex }">
|
||||
{{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
|
||||
</template>
|
||||
<template #status="{ record }">
|
||||
<a-tag v-if="record.status === 1" color="green">登录成功</a-tag>
|
||||
<a-tag v-else-if="record.status === 0" color="red">登录失败</a-tag>
|
||||
<a-tag v-else color="gray">未知</a-tag>
|
||||
</template>
|
||||
<template #browser="{ record }">
|
||||
<a-tooltip :content="record.userAgent">
|
||||
<span>{{ record.browser || '-' }}</span>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template #os="{ record }">
|
||||
<span>{{ record.os || '-' }}</span>
|
||||
</template>
|
||||
<template #operations="{ record }">
|
||||
<a-space size="small">
|
||||
<a-tooltip content="查看详情">
|
||||
<a-button size="small" @click="showDetail(record)">
|
||||
<div class="container">
|
||||
<Breadcrumb :items="['核销中心', '登录日志']" />
|
||||
<a-card class="general-card" title="登录日志">
|
||||
<a-row>
|
||||
<a-col :flex="1">
|
||||
<a-form
|
||||
:model="formModel"
|
||||
:label-col-props="{ span: 6 }"
|
||||
:wrapper-col-props="{ span: 18 }"
|
||||
label-align="left"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="8">
|
||||
<a-form-item field="loginName" label="登录名">
|
||||
<a-input
|
||||
v-model="formModel.loginName"
|
||||
placeholder="请输入登录名"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item field="status" label="登录状态">
|
||||
<a-select
|
||||
v-model="formModel.status"
|
||||
placeholder="请选择登录状态"
|
||||
allow-clear
|
||||
>
|
||||
<a-option :value="1">登录成功</a-option>
|
||||
<a-option :value="0">登录失败</a-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item field="dateRange" label="登录时间">
|
||||
<a-range-picker
|
||||
v-model="formModel.dateRange"
|
||||
style="width: 100%"
|
||||
:shortcuts="dateShortcuts"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-col>
|
||||
<a-divider style="height: 42px" direction="vertical" />
|
||||
<a-col flex="172px" style="text-align: right">
|
||||
<a-space direction="horizontal" :size="18">
|
||||
<a-button type="primary" @click="search">
|
||||
<template #icon>
|
||||
<icon-eye />
|
||||
<icon-search />
|
||||
</template>
|
||||
搜索
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-button @click="reset">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-divider style="margin-top: 0" />
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<DetailModal
|
||||
v-model:visible="detailModalVisible"
|
||||
:login-log-id="selectedLoginLogId"
|
||||
/>
|
||||
</a-card>
|
||||
<a-table
|
||||
row-key="id"
|
||||
:loading="loading"
|
||||
:pagination="{
|
||||
current: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
total: pagination.total,
|
||||
pageSizeOptions: [10, 20, 50, 100],
|
||||
showPageSize: true,
|
||||
showTotal: true,
|
||||
showJumper: true
|
||||
}"
|
||||
:columns="columns"
|
||||
:data="renderData"
|
||||
:scroll="{ x: 1400 }"
|
||||
@page-change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
>
|
||||
<template #index="{ rowIndex }">
|
||||
{{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
|
||||
</template>
|
||||
<template #status="{ record }">
|
||||
<a-tag v-if="record.status === 1" color="green">登录成功</a-tag>
|
||||
<a-tag v-else-if="record.status === 0" color="red">登录失败</a-tag>
|
||||
<a-tag v-else color="gray">未知</a-tag>
|
||||
</template>
|
||||
<template #browser="{ record }">
|
||||
<a-tooltip :content="record.userAgent">
|
||||
<span>{{ record.browser || '-' }}</span>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template #os="{ record }">
|
||||
<span>{{ record.os || '-' }}</span>
|
||||
</template>
|
||||
<template #operations="{ record }">
|
||||
<a-space size="small">
|
||||
<a-tooltip content="查看详情">
|
||||
<a-button size="small" @click="showDetail(record)">
|
||||
<template #icon>
|
||||
<icon-eye />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<DetailModal
|
||||
v-model:visible="detailModalVisible"
|
||||
:login-log-id="selectedLoginLogId"
|
||||
/>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, onMounted, computed } from 'vue';
|
||||
import Breadcrumb from '@/components/breadcrumb/index.vue';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import type { Pagination } from '@/types/global';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
|
||||
Reference in New Issue
Block a user