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