# 用户登录日志

<cite>
**Referenced Files in This Document**  
- [index.vue](file://src/views/user-center/login-log/index.vue)
- [detail-modal.vue](file://src/views/user-center/login-log/components/detail-modal.vue)
- [kami-api-sys-user-login-log-v1-login-log-query-req.ts](file://src/api/generated/models/kami-api-sys-user-login-log-v1-login-log-query-req.ts)
- [kami-api-sys-user-login-log-v1-login-log-query-res.ts](file://src/api/generated/models/kami-api-sys-user-login-log-v1-login-log-query-res.ts)
- [kami-internal-model-entity-v1-sys-user-login-log.ts](file://src/api/generated/models/kami-internal-model-entity-v1-sys-user-login-log.ts)
- [default-api.ts](file://src/api/generated/apis/default-api.ts)
</cite>

## 目录

1. [简介](#简介)
2. [功能概述](#功能概述)
3. [用户界面](#用户界面)
4. [数据模型](#数据模型)
5. [API接口](#api接口)
6. [组件分析](#组件分析)
7. [交互流程](#交互流程)

## 简介

用户登录日志功能为系统管理员提供了查看和管理用户登录历史的界面。该功能允许管理员通过多种条件查询用户的登录记录，包括登录名、登录状态和时间范围等，并可以查看单条登录记录的详细信息。

**Section sources**

- [index.vue](file://src/views/user-center/login-log/index.vue#L1-L335)

## 功能概述

用户登录日志功能主要包含两个核心部分：登录日志列表展示和登录日志详情查看。管理员可以通过搜索表单筛选登录记录，系统会根据筛选条件展示相应的登录日志列表。每条记录包含登录名、IP地址、登录地点、浏览器、操作系统、登录状态等关键信息。点击"查看详情"按钮可以查看某条登录记录的完整详细信息。

该功能支持分页显示，每页可显示10、20、50或100条记录，并提供了搜索、重置和分页导航等操作功能。搜索表单支持登录名模糊匹配、登录状态筛选（登录成功/登录失败）以及时间范围选择，其中时间选择器提供了"今天"、"昨天"、"最近7天"和"最近30天"等快捷选项。

**Section sources**

- [index.vue](file://src/views/user-center/login-log/index.vue#L1-L335)

## 用户界面

用户登录日志界面采用标准的列表页面布局，包含搜索区域、操作按钮和数据表格三部分。

### 搜索区域

搜索区域包含三个字段：

- **登录名**：文本输入框，用于输入要查询的用户名
- **登录状态**：下拉选择框，可选择"登录成功"或"登录失败"
- **登录时间**：日期范围选择器，支持选择开始时间和结束时间

### 操作按钮

操作区域包含两个按钮：

- **搜索**：根据当前搜索条件查询登录日志
- **重置**：清空所有搜索条件并重新加载数据

### 数据表格

数据表格展示登录日志的核心信息，包含以下列：

- 序号
- 登录名
- 登录IP
- 登录地点
- 浏览器（带tooltip显示完整的User Agent）
- 操作系统
- 登录状态（以标签形式显示，绿色表示成功，红色表示失败）
- 登录时长
- 登录时间
- 操作（包含"查看详情"按钮）

**Section sources**

- [index.vue](file://src/views/user-center/login-log/index.vue#L1-L335)

## 数据模型

用户登录日志功能涉及多个数据模型，这些模型定义了前端与后端交互的数据结构。

### 请求模型

`KamiApiSysUserLoginLogV1LoginLogQueryReq` 接口定义了查询登录日志的请求参数：

```typescript
export interface KamiApiSysUserLoginLogV1LoginLogQueryReq {
  userId?: string;
  loginName?: string;
  status?: number;
  startTime?: string;
  endTime?: string;
  current: number;
  pageSize: KamiApiSysUserLoginLogV1LoginLogQueryReqPageSizeEnum;
}
```

其中 `pageSize` 枚举定义了可选的每页显示数量：

```typescript
export enum KamiApiSysUserLoginLogV1LoginLogQueryReqPageSizeEnum {
  NUMBER_5 = 5,
  NUMBER_10 = 10,
  NUMBER_15 = 15,
  NUMBER_20 = 20,
  NUMBER_50 = 50,
  NUMBER_100 = 100
}
```

### 响应模型

`KamiApiSysUserLoginLogV1LoginLogQueryRes` 接口定义了查询登录日志的响应数据结构：

```typescript
export interface KamiApiSysUserLoginLogV1LoginLogQueryRes {
  total?: number;
  list?: Array<KamiInternalModelEntityV1SysUserLoginLog>;
}
```

### 登录日志实体

`KamiInternalModelEntityV1SysUserLoginLog` 接口定义了单条登录日志的详细信息：

```typescript
export interface KamiInternalModelEntityV1SysUserLoginLog {
  id?: number;
  userId?: string;
  loginName?: string;
  ipAddr?: string;
  loginLocation?: string;
  userAgent?: string;
  browser?: string;
  os?: string;
  createdAt?: string;
  status?: number;
  message?: string;
  loginTime?: string;
  module?: string;
}
```

**Section sources**

- [kami-api-sys-user-login-log-v1-login-log-query-req.ts](file://src/api/generated/models/kami-api-sys-user-login-log-v1-login-log-query-req.ts#L14-L52)
- [kami-api-sys-user-login-log-v1-login-log-query-res.ts](file://src/api/generated/models/kami-api-sys-user-login-log-v1-login-log-query-res.ts#L19-L21)
- [kami-internal-model-entity-v1-sys-user-login-log.ts](file://src/api/generated/models/kami-internal-model-entity-v1-sys-user-login-log.ts#L15-L47)

## API接口

用户登录日志功能通过两个API接口与后端进行数据交互。

### 查询登录日志列表

`apiSysUserLoginLogListGet` 接口用于获取登录日志列表数据。该接口接受分页参数和筛选条件，返回分页的登录日志数据。

**接口参数：**

- `current`: 当前页码
- `pageSize`: 每页数量
- `userId`: 用户ID（可选）
- `loginName`: 登录名（可选）
- `status`: 登录状态（可选）
- `startTime`: 开始时间（可选）
- `endTime`: 结束时间（可选）

**返回数据：**

- `total`: 总记录数
- `list`: 登录日志数据列表

### 查询登录日志详情

`apiSysUserLoginLogDetailGet` 接口用于获取单条登录日志的详细信息。该接口仅需要传入登录日志的ID即可获取完整的详细信息。

**接口参数：**

- `id`: 登录日志ID

**返回数据：**

- `data`: 登录日志详细信息

**Section sources**

- [default-api.ts](file://src/api/generated/apis/default-api.ts#L29456-L29472)
- [default-api.ts](file://src/api/generated/apis/default-api.ts#L29440-L29447)

## 组件分析

用户登录日志功能由两个主要Vue组件构成：主列表组件和详情模态框组件。

### 主列表组件 (index.vue)

主列表组件负责展示登录日志列表和处理用户交互。该组件包含以下核心功能：

- **状态管理**：使用`ref`和`reactive`定义组件状态，包括搜索表单数据、分页信息、表格数据和加载状态
- **数据获取**：`fetchData`方法负责调用API获取登录日志数据，并处理响应结果
- **搜索功能**：`search`方法重置页码并执行新的搜索
- **重置功能**：`reset`方法清空所有搜索条件并重新加载数据
- **分页处理**：`onPageChange`和`onPageSizeChange`方法处理分页变化
- **详情查看**：`showDetail`方法在用户点击"查看详情"时触发，显示详情模态框

```mermaid
flowchart TD
A[组件初始化] --> B[获取数据]
B --> C{数据获取成功?}
C --> |是| D[更新表格数据]
C --> |否| E[显示错误消息]
D --> F[显示数据]
E --> F
F --> G[用户交互]
G --> H{用户操作}
H --> |搜索| I[执行搜索]
H --> |重置| J[重置表单]
H --> |分页| K[更新分页]
H --> |查看详情| L[显示详情模态框]
I --> B
J --> B
K --> B
L --> M[详情模态框]
```

**Diagram sources**

- [index.vue](file://src/views/user-center/login-log/index.vue#L268-L333)

**Section sources**

- [index.vue](file://src/views/user-center/login-log/index.vue#L123-L335)

### 详情模态框组件 (detail-modal.vue)

详情模态框组件负责展示单条登录日志的详细信息。该组件的主要特点包括：

- **属性接收**：通过`props`接收`visible`（显示状态）和`loginLogId`（登录日志ID）两个参数
- **事件发射**：通过`emit`发射`update:visible`事件来控制模态框的显示和隐藏
- **数据获取**：`fetchDetail`方法根据传入的ID获取登录日志详情
- **数据格式化**：`formatDateTime`方法将ISO格式的日期时间转换为本地化显示格式
- **生命周期监听**：使用`watch`监听`visible`属性的变化，当模态框显示时自动获取详情数据

```mermaid
classDiagram
class DetailModal {
+visible : boolean
+loginLogId : number
-loading : boolean
-loginLogData : KamiInternalModelEntityV1SysUserLoginLog
+fetchDetail(id : number) : Promise~void~
+formatDateTime(dateTime : string) : string
+handleCancel() : void
}
DetailModal --> KamiInternalModelEntityV1SysUserLoginLog : "显示"
DetailModal --> apiClient : "调用"
```

**Diagram sources**

- [detail-modal.vue](file://src/views/user-center/login-log/components/detail-modal.vue#L87-L166)

**Section sources**

- [detail-modal.vue](file://src/views/user-center/login-log/components/detail-modal.vue#L87-L166)

## 交互流程

用户登录日志功能的交互流程如下：

1. **页面初始化**：组件挂载时自动调用`fetchData`方法获取第一页的登录日志数据
2. **搜索流程**：
   - 用户填写搜索条件并点击"搜索"按钮
   - 执行`search`方法，重置页码为1并调用`fetchData`
   - 根据当前表单值构建请求参数
   - 调用`apiSysUserLoginLogListGet`接口获取数据
   - 更新表格数据和分页信息
3. **重置流程**：
   - 用户点击"重置"按钮
   - 执行`reset`方法，清空所有搜索条件
   - 调用`fetchData`重新加载数据
4. **分页流程**：
   - 用户切换页码或每页数量
   - 触发`onPageChange`或`onPageSizeChange`方法
   - 调用`fetchData`获取新页码的数据
5. **查看详情流程**：
   - 用户点击某条记录的"查看详情"按钮
   - 执行`showDetail`方法，设置`selectedLoginLogId`并显示详情模态框
   - 详情模态框组件监听到`visible`变为true，调用`fetchDetail`获取详情数据
   - 在模态框中展示详细信息

```mermaid
sequenceDiagram
participant User as 用户
participant List as 主列表组件
participant Detail as 详情模态框
participant API as 后端API
User->>List : 页面加载
List->>API : apiSysUserLoginLogListGet(current=1, pageSize=20)
API-->>List : 返回第一页数据
List->>User : 显示登录日志列表
User->>List : 输入搜索条件并点击搜索
List->>API : apiSysUserLoginLogListGet(搜索参数)
API-->>List : 返回匹配的数据
List->>User : 更新列表显示
User->>List : 点击"查看详情"
List->>Detail : 显示模态框，传入ID
Detail->>API : apiSysUserLoginLogDetailGet(id)
API-->>Detail : 返回详细信息
Detail->>User : 显示详细信息
```

**Diagram sources**

- [index.vue](file://src/views/user-center/login-log/index.vue#L268-L333)
- [detail-modal.vue](file://src/views/user-center/login-log/components/detail-modal.vue#L110-L129)

**Section sources**

- [index.vue](file://src/views/user-center/login-log/index.vue#L268-L333)
- [detail-modal.vue](file://src/views/user-center/login-log/components/detail-modal.vue#L110-L129)
