sqxp/docs/原型图/web/登录日志.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>叁强鲜配 - 登录日志</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f7fa; color: #303133; }
        .topbar { height: 60px; background: linear-gradient(135deg, #1989fa 0%, #07c160 100%); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; color: white; }
        .topbar-logo h1 { font-size: 22px; font-weight: 600; }
        .topbar-logo span { font-size: 13px; opacity: 0.85; }
        .topbar-user { display: flex; align-items: center; gap: 16px; }
        .main-container { display: flex; min-height: calc(100vh - 60px); }
        .sidebar { width: 220px; background: #fff; border-right: 1px solid #e4e7ed; padding: 16px 0; }
        .menu-item { padding: 14px 24px; cursor: pointer; display: flex; align-items: center; gap: 12px; color: #606266; font-size: 14px; }
        .menu-item:hover { background: #f5f7fa; color: #1989fa; }
        .menu-item.active { background: #ecf5ff; color: #1989fa; border-right: 3px solid #1989fa; }
        .content { flex: 1; padding: 24px; }
        .breadcrumb { font-size: 13px; color: #909399; margin-bottom: 8px; }
        .card { background: #fff; border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
        .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #ebeef5; }
        .card-title { font-size: 16px; font-weight: 600; }
        .search-bar { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
        .search-item { display: flex; align-items: center; gap: 8px; }
        .search-label { font-size: 14px; color: #606266; }
        .status-tag { padding: 4px 12px; border-radius: 4px; font-size: 12px; }
        .status-tag.success { background: #f0f9eb; color: #07c160; }
        .status-tag.danger { background: #fef0f0; color: #ee0a24; }
        .time-cell { font-size: 13px; color: #606266; }
    </style>
</head>
<body>
    <div id="app">
        <div class="topbar">
            <div class="topbar-logo"><h1>叁强鲜配</h1><span>运营管理后台</span></div>
            <div class="topbar-user"><el-avatar :size="32" style="background:#fff;color:#1989fa;">管</el-avatar><span>管理员</span></div>
        </div>
        <div class="main-container">
            <div class="sidebar">
                <div class="menu-item"><el-icon><Setting /></el-icon><span>系统设置</span></div>
                <div class="menu-item active"><el-icon><Timer /></el-icon><span>登录日志</span></div>
                <div class="menu-item"><el-icon><Document /></el-icon><span>操作日志</span></div>
            </div>
            <div class="content">
                <div class="breadcrumb">首页 / 系统设置 / 登录日志</div>
                <div class="card">
                    <div class="card-header"><span class="card-title">登录日志列表</span></div>
                    <div class="search-bar">
                        <div class="search-item">
                            <span class="search-label">用户名</span>
                            <el-input placeholder="请输入用户名" style="width:160px" />
                        </div>
                        <div class="search-item">
                            <span class="search-label">角色</span>
                            <el-select placeholder="全部" style="width:120px">
                                <el-option label="全部" value="" />
                                <el-option label="运营人员" value="admin" />
                                <el-option label="供应商" value="supplier" />
                                <el-option label="客户" value="client" />
                                <el-option label="配送员" value="deliver" />
                            </el-select>
                        </div>
                        <div class="search-item">
                            <span class="search-label">结果</span>
                            <el-select placeholder="全部" style="width:100px">
                                <el-option label="全部" value="" />
                                <el-option label="成功" value="success" />
                                <el-option label="失败" value="failed" />
                            </el-select>
                        </div>
                        <div class="search-item">
                            <el-date-picker type="daterange" placeholder="登录时间" style="width:240px" />
                        </div>
                        <el-button type="primary">搜索</el-button>
                        <el-button>重置</el-button>
                    </div>
                    <el-table :data="logList" style="width:100%">
                        <el-table-column prop="username" label="用户名" width="120" />
                        <el-table-column prop="realName" label="真实姓名" width="100" />
                        <el-table-column prop="role" label="角色" width="100">
                            <template #default="{ row }">
                                <el-tag v-if="row.role==='admin'" size="small" type="primary">运营</el-tag>
                                <el-tag v-else-if="row.role==='supplier'" size="small" type="warning">供应商</el-tag>
                                <el-tag v-else-if="row.role==='client'" size="small" type="success">客户</el-tag>
                                <el-tag v-else size="small">配送员</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="loginTime" label="登录时间" width="160">
                            <template #default="{ row }">
                                <span class="time-cell">{{ row.loginTime }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="logoutTime" label="登出时间" width="160">
                            <template #default="{ row }">
                                <span class="time-cell">{{ row.logoutTime || '-' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="ipAddress" label="IP地址" width="140" />
                        <el-table-column prop="result" label="登录结果" width="100">
                            <template #default="{ row }">
                                <span :class="'status-tag ' + (row.result==='success'?'success':'danger')">
                                    {{ row.result==='success'?'成功':'失败' }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="failReason" label="失败原因" width="150">
                            <template #default="{ row }">
                                <span style="color:#ee0a24;font-size:12px;">{{ row.failReason || '-' }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination style="margin-top:20px;justify-content:flex-end" :total="100" :page-size="10" layout="total, prev, pager, next" />
                </div>
            </div>
        </div>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script>
        const { createApp } = Vue;
        const app = createApp({
            setup() {
                const logList = [
                    { username: 'admin', realName: '系统管理员', role: 'admin', loginTime: '2026-03-19 08:30:25', logoutTime: '2026-03-19 18:00:00', ipAddress: '192.168.1.100', result: 'success', failReason: '' },
                    { username: 'sup001', realName: '张伟', role: 'supplier', loginTime: '2026-03-19 09:15:00', logoutTime: '', ipAddress: '192.168.1.105', result: 'success', failReason: '' },
                    { username: 'client001', realName: '王小明', role: 'client', loginTime: '2026-03-19 10:20:00', logoutTime: '2026-03-19 10:35:00', ipAddress: '10.0.0.50', result: 'success', failReason: '' },
                    { username: 'admin', realName: '系统管理员', role: 'admin', loginTime: '2026-03-19 08:25:10', logoutTime: '', ipAddress: '192.168.1.100', result: 'failed', failReason: '密码错误' },
                    { username: 'deliver001', realName: '李建', role: 'deliver', loginTime: '2026-03-18 14:00:00', logoutTime: '2026-03-18 20:00:00', ipAddress: '10.0.0.30', result: 'success', failReason: '' }
                ];
                return { logList };
            }
        });
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html>