refactor(F006-W17.5): 3 个日志页标准化 (LogError/LogLogin/LogOperation 套 PageHeader+SearchBar)
- 最后 3 个老写法 list 页收尾, 全部 list 页风格 100% 统一 - rr-page-header div -> <PageHeader> 组件 - rr-filters-row div + el-input -> <SearchBar> 组件 (fields 配置) - DataTable 加 :page-sizes=[10,20,50,100] (W17.3.7 统一规范) - limit 默认 20 -> 10 (W17.3.6 pager 字号统一) - 清理不再使用的老 style class (rr-page-*/rr-filters-row/rr-*-input) - 业务逻辑全保留 (method tag/status 映射/详情弹窗/errorInfo 预览)
This commit is contained in:
Sisyphus
parent
18aa3410b6
commit
557db07231
@ -2,12 +2,16 @@
|
||||
/**
|
||||
* F006 错误日志 - W4.16
|
||||
*
|
||||
* W17.5: 套 PageHeader/SearchBar 标准化模板 (limit 10 + :page-sizes)
|
||||
*
|
||||
* 后端: GET /sys/log/error/page
|
||||
* 字段: id/module/requestUri/requestMethod/requestParams/userAgent/ip/errorInfo/createDate
|
||||
*/
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { httpGet } from '@/utils/request'
|
||||
import DataTable from '@/components/DataTable/DataTable.vue'
|
||||
import PageHeader from '@/components/PageHeader/PageHeader.vue'
|
||||
import SearchBar from '@/components/SearchBar/SearchBar.vue'
|
||||
|
||||
interface LogEntry {
|
||||
id: string
|
||||
@ -27,7 +31,7 @@ const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
const page = ref(1)
|
||||
const limit = ref(20)
|
||||
const limit = ref(10)
|
||||
const filters = ref({ module: '' })
|
||||
|
||||
const detailVisible = ref(false)
|
||||
@ -91,20 +95,16 @@ onMounted(load)
|
||||
|
||||
<template>
|
||||
<div class="rr-sys-log-error">
|
||||
<div class="rr-page-header">
|
||||
<div class="rr-page-titles">
|
||||
<h2 class="rr-page-title">错误日志</h2>
|
||||
<p class="rr-page-sub">共 {{ total }} 条错误记录</p>
|
||||
</div>
|
||||
<div class="rr-page-actions">
|
||||
<el-button @click="onReset" class="rr-btn-secondary">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<PageHeader title="错误日志" :sub="`共 ${total} 条错误记录`" />
|
||||
|
||||
<div class="rr-filters-row">
|
||||
<el-input v-model="filters.module" placeholder="模块名" clearable class="rr-module-input" size="small" @keyup.enter="onSearch" />
|
||||
<el-button class="rr-btn-secondary" size="small" @click="onSearch">查询</el-button>
|
||||
</div>
|
||||
<SearchBar
|
||||
v-model:filters="filters"
|
||||
:fields='[
|
||||
{ key: "module", label: "模块名", type: "text", placeholder: "模块名" }
|
||||
]'
|
||||
@search="onSearch"
|
||||
@reset="onReset"
|
||||
/>
|
||||
|
||||
<div class="rr-list-card">
|
||||
<DataTable
|
||||
@ -123,6 +123,7 @@ onMounted(load)
|
||||
:page="page"
|
||||
:limit="limit"
|
||||
:show-pagination="true"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:error="error"
|
||||
empty-text="暂无错误日志"
|
||||
borderless
|
||||
@ -193,13 +194,6 @@ onMounted(load)
|
||||
|
||||
<style scoped>
|
||||
.rr-sys-log-error { padding: 16px; }
|
||||
.rr-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
|
||||
.rr-page-titles { display: flex; flex-direction: column; gap: 2px; }
|
||||
.rr-page-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--el-text-color-primary); }
|
||||
.rr-page-sub { margin: 0; font-size: 12px; color: var(--el-text-color-secondary); }
|
||||
.rr-page-actions { display: flex; gap: 8px; }
|
||||
.rr-filters-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 12px 16px; background: var(--el-fill-color-light); border-radius: 8px; }
|
||||
.rr-module-input { width: 180px; }
|
||||
.rr-list-card { background: var(--el-bg-color); border-radius: 12px; padding: 4px; }
|
||||
.rr-time { font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace; font-size: 12px; color: var(--el-text-color-regular); }
|
||||
.rr-mono-sm { font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace; font-size: 11px; color: var(--el-text-color-regular); }
|
||||
|
||||
@ -2,6 +2,8 @@
|
||||
/**
|
||||
* F006 登录日志 - W4.14
|
||||
*
|
||||
* W17.5: 套 PageHeader/SearchBar 标准化模板 (limit 10 + :page-sizes)
|
||||
*
|
||||
* 后端: GET /sys/log/login/page
|
||||
* 字段: id/operation/status/userAgent/ip/creatorName/createDate
|
||||
*
|
||||
@ -10,6 +12,8 @@
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { httpGet } from '@/utils/request'
|
||||
import DataTable from '@/components/DataTable/DataTable.vue'
|
||||
import PageHeader from '@/components/PageHeader/PageHeader.vue'
|
||||
import SearchBar from '@/components/SearchBar/SearchBar.vue'
|
||||
|
||||
interface LogEntry {
|
||||
id: string
|
||||
@ -38,7 +42,7 @@ const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
const page = ref(1)
|
||||
const limit = ref(20)
|
||||
const limit = ref(10)
|
||||
|
||||
const filters = ref({ creatorName: '', ip: '' })
|
||||
|
||||
@ -92,35 +96,17 @@ onMounted(load)
|
||||
|
||||
<template>
|
||||
<div class="rr-sys-log-login">
|
||||
<div class="rr-page-header">
|
||||
<div class="rr-page-titles">
|
||||
<h2 class="rr-page-title">登录日志</h2>
|
||||
<p class="rr-page-sub">共 {{ total }} 条登录记录</p>
|
||||
</div>
|
||||
<div class="rr-page-actions">
|
||||
<el-button @click="onReset" class="rr-btn-secondary">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<PageHeader title="登录日志" :sub="`共 ${total} 条登录记录`" />
|
||||
|
||||
<div class="rr-filters-row">
|
||||
<el-input
|
||||
v-model="filters.creatorName"
|
||||
placeholder="用户名搜索"
|
||||
clearable
|
||||
class="rr-name-input"
|
||||
size="small"
|
||||
@keyup.enter="onSearch"
|
||||
<SearchBar
|
||||
v-model:filters="filters"
|
||||
:fields='[
|
||||
{ key: "creatorName", label: "用户名", type: "text", placeholder: "用户名搜索" },
|
||||
{ key: "ip", label: "IP", type: "text", placeholder: "IP 搜索" }
|
||||
]'
|
||||
@search="onSearch"
|
||||
@reset="onReset"
|
||||
/>
|
||||
<el-input
|
||||
v-model="filters.ip"
|
||||
placeholder="IP 搜索"
|
||||
clearable
|
||||
class="rr-ip-input"
|
||||
size="small"
|
||||
@keyup.enter="onSearch"
|
||||
/>
|
||||
<el-button class="rr-btn-secondary" size="small" @click="onSearch">查询</el-button>
|
||||
</div>
|
||||
|
||||
<div class="rr-list-card">
|
||||
<DataTable
|
||||
@ -138,6 +124,7 @@ onMounted(load)
|
||||
:page="page"
|
||||
:limit="limit"
|
||||
:show-pagination="true"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:error="error"
|
||||
empty-text="暂无登录日志"
|
||||
borderless
|
||||
@ -167,14 +154,6 @@ onMounted(load)
|
||||
|
||||
<style scoped>
|
||||
.rr-sys-log-login { padding: 16px; }
|
||||
.rr-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
|
||||
.rr-page-titles { display: flex; flex-direction: column; gap: 2px; }
|
||||
.rr-page-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--el-text-color-primary); }
|
||||
.rr-page-sub { margin: 0; font-size: 12px; color: var(--el-text-color-secondary); }
|
||||
.rr-page-actions { display: flex; gap: 8px; }
|
||||
.rr-filters-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 12px 16px; background: var(--el-fill-color-light); border-radius: 8px; }
|
||||
.rr-name-input { width: 200px; }
|
||||
.rr-ip-input { width: 200px; }
|
||||
.rr-list-card { background: var(--el-bg-color); border-radius: 12px; padding: 4px; }
|
||||
.rr-time { font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace; font-size: 12px; color: var(--el-text-color-regular); }
|
||||
</style>
|
||||
@ -2,6 +2,8 @@
|
||||
/**
|
||||
* F006 操作日志 - W4.14
|
||||
*
|
||||
* W17.5: 套 PageHeader/SearchBar 标准化模板 (limit 10 + :page-sizes)
|
||||
*
|
||||
* 后端: GET /sys/log/operation/page
|
||||
* 字段: id/module/operation/requestUri/requestMethod/requestParams/requestTime/userAgent/ip/status/creatorName/createDate
|
||||
*
|
||||
@ -10,6 +12,8 @@
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { httpGet } from '@/utils/request'
|
||||
import DataTable from '@/components/DataTable/DataTable.vue'
|
||||
import PageHeader from '@/components/PageHeader/PageHeader.vue'
|
||||
import SearchBar from '@/components/SearchBar/SearchBar.vue'
|
||||
|
||||
interface LogEntry {
|
||||
id: string
|
||||
@ -37,7 +41,7 @@ const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
const page = ref(1)
|
||||
const limit = ref(20)
|
||||
const limit = ref(10)
|
||||
|
||||
const filters = ref({ creatorName: '', module: '' })
|
||||
|
||||
@ -103,35 +107,17 @@ onMounted(load)
|
||||
|
||||
<template>
|
||||
<div class="rr-sys-log-operation">
|
||||
<div class="rr-page-header">
|
||||
<div class="rr-page-titles">
|
||||
<h2 class="rr-page-title">操作日志</h2>
|
||||
<p class="rr-page-sub">共 {{ total }} 条操作记录</p>
|
||||
</div>
|
||||
<div class="rr-page-actions">
|
||||
<el-button @click="onReset" class="rr-btn-secondary">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<PageHeader title="操作日志" :sub="`共 ${total} 条操作记录`" />
|
||||
|
||||
<div class="rr-filters-row">
|
||||
<el-input
|
||||
v-model="filters.creatorName"
|
||||
placeholder="操作用户"
|
||||
clearable
|
||||
class="rr-name-input"
|
||||
size="small"
|
||||
@keyup.enter="onSearch"
|
||||
<SearchBar
|
||||
v-model:filters="filters"
|
||||
:fields='[
|
||||
{ key: "creatorName", label: "操作用户", type: "text", placeholder: "操作用户" },
|
||||
{ key: "module", label: "模块名", type: "text", placeholder: "模块名" }
|
||||
]'
|
||||
@search="onSearch"
|
||||
@reset="onReset"
|
||||
/>
|
||||
<el-input
|
||||
v-model="filters.module"
|
||||
placeholder="模块名"
|
||||
clearable
|
||||
class="rr-module-input"
|
||||
size="small"
|
||||
@keyup.enter="onSearch"
|
||||
/>
|
||||
<el-button class="rr-btn-secondary" size="small" @click="onSearch">查询</el-button>
|
||||
</div>
|
||||
|
||||
<div class="rr-list-card">
|
||||
<DataTable
|
||||
@ -151,6 +137,7 @@ onMounted(load)
|
||||
:page="page"
|
||||
:limit="limit"
|
||||
:show-pagination="true"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:error="error"
|
||||
empty-text="暂无操作日志"
|
||||
borderless
|
||||
@ -191,14 +178,6 @@ onMounted(load)
|
||||
|
||||
<style scoped>
|
||||
.rr-sys-log-operation { padding: 16px; }
|
||||
.rr-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
|
||||
.rr-page-titles { display: flex; flex-direction: column; gap: 2px; }
|
||||
.rr-page-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--el-text-color-primary); }
|
||||
.rr-page-sub { margin: 0; font-size: 12px; color: var(--el-text-color-secondary); }
|
||||
.rr-page-actions { display: flex; gap: 8px; }
|
||||
.rr-filters-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 12px 16px; background: var(--el-fill-color-light); border-radius: 8px; }
|
||||
.rr-name-input { width: 180px; }
|
||||
.rr-module-input { width: 180px; }
|
||||
.rr-list-card { background: var(--el-bg-color); border-radius: 12px; padding: 4px; }
|
||||
.rr-time { font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace; font-size: 12px; color: var(--el-text-color-regular); }
|
||||
.rr-mono-sm { font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace; font-size: 11px; color: var(--el-text-color-regular); }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user