From 557db0723100b4cb3b93d24f6cd76722ea33e9df Mon Sep 17 00:00:00 2001
From: Sisyphus <sisyphus@direv.local>
Date: Thu, 9 Jul 2026 11:07:19 +0800
Subject: [PATCH] =?UTF-8?q?refactor(F006-W17.5):=203=20=E4=B8=AA=E6=97=A5?=
 =?UTF-8?q?=E5=BF=97=E9=A1=B5=E6=A0=87=E5=87=86=E5=8C=96=20(LogError/LogLo?=
 =?UTF-8?q?gin/LogOperation=20=E5=A5=97=20PageHeader+SearchBar)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 最后 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 预览)
---
 src/modules/sys/LogErrorView.vue     | 36 ++++++++-----------
 src/modules/sys/LogLoginView.vue     | 53 +++++++++-------------------
 src/modules/sys/LogOperationView.vue | 53 +++++++++-------------------
 3 files changed, 47 insertions(+), 95 deletions(-)

diff --git a/src/modules/sys/LogErrorView.vue b/src/modules/sys/LogErrorView.vue
index b67d90d..d0b2689 100644
--- a/src/modules/sys/LogErrorView.vue
+++ b/src/modules/sys/LogErrorView.vue
@@ -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); }
diff --git a/src/modules/sys/LogLoginView.vue b/src/modules/sys/LogLoginView.vue
index 40662d7..28323a1 100644
--- a/src/modules/sys/LogLoginView.vue
+++ b/src/modules/sys/LogLoginView.vue
@@ -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"
-      />
-      <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>
+    <SearchBar
+      v-model:filters="filters"
+      :fields='[
+          { key: "creatorName", label: "用户名", type: "text", placeholder: "用户名搜索" },
+          { key: "ip", label: "IP", type: "text", placeholder: "IP 搜索" }
+      ]'
+      @search="onSearch"
+      @reset="onReset"
+    />
 
     <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>
\ No newline at end of file
diff --git a/src/modules/sys/LogOperationView.vue b/src/modules/sys/LogOperationView.vue
index a7fb89b..78a16dc 100644
--- a/src/modules/sys/LogOperationView.vue
+++ b/src/modules/sys/LogOperationView.vue
@@ -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"
-      />
-      <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: "creatorName", label: "操作用户", type: "text", placeholder: "操作用户" },
+          { key: "module", label: "模块名", type: "text", placeholder: "模块名" }
+      ]'
+      @search="onSearch"
+      @reset="onReset"
+    />
 
     <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); }