From d1cae61cdda233ab8d423ab59cb5178e67115bf0 Mon Sep 17 00:00:00 2001
From: danial <danial@gmail.com>
Date: Fri, 14 Nov 2025 23:07:10 +0800
Subject: [PATCH] =?UTF-8?q?feat(user-center):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=E6=97=A5=E5=BF=97=E9=A1=B5=E9=9D=A2=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E4=B8=8E=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 增加页面面包屑导航，提升用户路径感知
- 使用通用卡片样式包裹内容，视觉更统一
- 保持原有搜索表单功能，调整部分细节结构
- 修正搜索按钮图标显示错误，保持图标一致性
- 细化表格列模板，完善操作区域按钮显示
- 优化组件嵌套结构，增强页面语义化和可维护性
---
 src/views/user-center/login-log/index.vue | 228 +++++++++++-----------
 1 file changed, 116 insertions(+), 112 deletions(-)

diff --git a/src/views/user-center/login-log/index.vue b/src/views/user-center/login-log/index.vue
index 33b9a70..c94c6aa 100644
--- a/src/views/user-center/login-log/index.vue
+++ b/src/views/user-center/login-log/index.vue
@@ -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';