create-simpleadmin-ui 2.0.0

package/template/src/views/monitor/loginlog/index.vue

@@ -0,0 +1,366 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Refresh, Search, Key, View, Delete } from '@element-plus/icons-vue'
+import { get, del } from '@/utils/request'
+import AppPage from '@/components/AppPage.vue'
+import { formatDateTime } from '@/utils/datetime'
+
+interface LoginLogItem {
+  id: number
+  userName?: string
+  ipAddress?: string
+  browser?: string
+  os?: string
+  status: number
+  msg?: string
+  loginTime?: string
+}
+
+const loading = ref(false)
+const total = ref(0)
+const list = ref<LoginLogItem[]>([])
+const detailVisible = ref(false)
+const current = ref<LoginLogItem | null>(null)
+
+const query = reactive({
+  pageIndex: 1,
+  pageSize: 10,
+  keyword: '',
+  status: undefined as number | undefined,
+})
+
+const stats = reactive({ total: 0, ok: 0, fail: 0 })
+
+async function loadStats(pageTotal?: number) {
+  const base = { pageIndex: 1, pageSize: 1, keyword: query.keyword || undefined }
+  const unfiltered = query.status === undefined || query.status === null
+  try {
+    const tasks: Promise<void>[] = []
+    if (unfiltered && pageTotal != null) {
+      stats.total = pageTotal
+    } else {
+      tasks.push(
+        get<{ total: number }>('/login-logs', base).then((all) => {
+          stats.total = all.total
+        }),
+      )
+    }
+    tasks.push(
+      get<{ total: number }>('/login-logs', { ...base, status: 0 }).then((r) => {
+        stats.ok = r.total
+      }),
+      get<{ total: number }>('/login-logs', { ...base, status: 1 }).then((r) => {
+        stats.fail = r.total
+      }),
+    )
+    await Promise.all(tasks)
+  } catch {
+    stats.total = total.value
+  }
+}
+
+async function load() {
+  loading.value = true
+  try {
+    const params: Record<string, unknown> = {
+      pageIndex: query.pageIndex,
+      pageSize: query.pageSize,
+      keyword: query.keyword || undefined,
+    }
+    if (query.status !== undefined && query.status !== null) params.status = query.status
+    const data = await get<{ total: number; items: LoginLogItem[] }>('/login-logs', params)
+    total.value = data.total
+    list.value = data.items || []
+    await loadStats(data.total)
+  } finally {
+    loading.value = false
+  }
+}
+
+function search() {
+  query.pageIndex = 1
+  load()
+}
+
+function resetQuery() {
+  query.keyword = ''
+  query.status = undefined
+  query.pageIndex = 1
+  load()
+}
+
+function openDetail(row: LoginLogItem) {
+  current.value = { ...row }
+  detailVisible.value = true
+}
+
+async function remove(row: LoginLogItem) {
+  await ElMessageBox.confirm(`确认删除账号「${row.userName || row.id}」的登录日志？`, '提示', {
+    type: 'warning',
+  })
+  await del('/login-logs', { ids: [row.id] })
+  ElMessage.success('已删除')
+  load()
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <AppPage title="登录日志" description="登录成功与失败记录，便于安全审计">
+    <div class="mon-stats">
+      <div class="mon-stats__item">
+        <span class="mon-stats__num">{{ stats.total }}</span>
+        <span class="mon-stats__label">全部记录</span>
+      </div>
+      <div class="mon-stats__item mon-stats__item--ok">
+        <span class="mon-stats__num">{{ stats.ok }}</span>
+        <span class="mon-stats__label">登录成功</span>
+      </div>
+      <div class="mon-stats__item mon-stats__item--fail">
+        <span class="mon-stats__num">{{ stats.fail }}</span>
+        <span class="mon-stats__label">登录失败</span>
+      </div>
+      <div class="mon-stats__item mon-stats__item--hit">
+        <span class="mon-stats__num">{{ total }}</span>
+        <span class="mon-stats__label">当前筛选</span>
+      </div>
+    </div>
+
+    <div class="toolbar">
+      <el-input
+        v-model="query.keyword"
+        clearable
+        placeholder="搜索账号 / IP"
+        style="width: 200px"
+        @keyup.enter="search"
+      />
+      <el-select v-model="query.status" clearable placeholder="状态" style="width: 120px" @change="search">
+        <el-option label="成功" :value="0" />
+        <el-option label="失败" :value="1" />
+      </el-select>
+      <el-button type="primary" :icon="Search" @click="search">查询</el-button>
+      <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
+    </div>
+
+    <div class="table-wrap" v-loading="loading">
+      <el-table :data="list" border stripe empty-text="暂无登录日志">
+        <el-table-column label="账号" min-width="140" show-overflow-tooltip>
+          <template #default="{ row }">
+            <div class="name-cell">
+              <span class="name-cell__icon" :data-ok="row.status === 0">
+                <el-icon :size="14"><Key /></el-icon>
+              </span>
+              <strong>{{ row.userName || '—' }}</strong>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="IP" width="140" show-overflow-tooltip>
+          <template #default="{ row }">
+            <code class="mono">{{ row.ipAddress || '—' }}</code>
+          </template>
+        </el-table-column>
+        <el-table-column prop="browser" label="浏览器" min-width="140" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.browser || '—' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="os" label="系统" min-width="120" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.os || '—' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="88" align="center">
+          <template #default="{ row }">
+            <el-tag size="small" :type="row.status === 0 ? 'success' : 'danger'">
+              {{ row.status === 0 ? '成功' : '失败' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="msg" label="消息" min-width="140" show-overflow-tooltip>
+          <template #default="{ row }">
+            <span :class="row.status === 0 ? 'muted' : 'fail-msg'">{{ row.msg || '—' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="时间" width="170" class-name="is-datetime" show-overflow-tooltip>
+          <template #default="{ row }">
+            <span class="datetime-cell">{{ formatDateTime(row.loginTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="180" fixed="right" align="center">
+          <template #default="{ row }">
+            <div class="row-actions">
+              <el-button size="small" type="primary" :icon="View" @click="openDetail(row)">详情</el-button>
+              <el-button
+                size="small"
+                type="danger"
+                :icon="Delete"
+                v-permission="'monitor:loginlog:remove'"
+                @click="remove(row)"
+              >
+                删除
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div class="pager">
+      <el-pagination
+        background
+        layout="total, sizes, prev, pager, next"
+        :total="total"
+        v-model:current-page="query.pageIndex"
+        v-model:page-size="query.pageSize"
+        :page-sizes="[10, 20, 50]"
+        @current-change="load"
+        @size-change="
+          () => {
+            query.pageIndex = 1
+            load()
+          }
+        "
+      />
+    </div>
+
+    <el-dialog
+      v-model="detailVisible"
+      title="登录日志详情"
+      width="520px"
+      class="sa-dialog"
+      append-to-body
+      align-center
+      destroy-on-close
+    >
+      <template v-if="current">
+        <el-descriptions :column="1" border>
+          <el-descriptions-item label="账号">{{ current.userName || '—' }}</el-descriptions-item>
+          <el-descriptions-item label="IP">{{ current.ipAddress || '—' }}</el-descriptions-item>
+          <el-descriptions-item label="浏览器">{{ current.browser || '—' }}</el-descriptions-item>
+          <el-descriptions-item label="系统">{{ current.os || '—' }}</el-descriptions-item>
+          <el-descriptions-item label="状态">
+            <el-tag size="small" :type="current.status === 0 ? 'success' : 'danger'">
+              {{ current.status === 0 ? '成功' : '失败' }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="消息">{{ current.msg || '—' }}</el-descriptions-item>
+          <el-descriptions-item label="时间">{{ formatDateTime(current.loginTime) }}</el-descriptions-item>
+        </el-descriptions>
+      </template>
+      <template #footer>
+        <el-button @click="detailVisible = false">关闭</el-button>
+      </template>
+    </el-dialog>
+  </AppPage>
+</template>
+
+<style scoped lang="scss">
+.mon-stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 14px;
+}
+.mon-stats__item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 14px 16px;
+  border-radius: 14px;
+  border: 1px solid var(--sa-border);
+  background: var(--sa-panel);
+  box-shadow: var(--sa-shadow);
+}
+.mon-stats__num {
+  font-size: 22px;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  color: var(--sa-ink);
+  font-variant-numeric: tabular-nums;
+}
+.mon-stats__label {
+  font-size: 12px;
+  color: var(--sa-ink-muted);
+}
+.mon-stats__item--ok .mon-stats__num {
+  color: var(--sa-accent);
+}
+.mon-stats__item--fail .mon-stats__num {
+  color: #be123c;
+}
+.mon-stats__item--hit .mon-stats__num {
+  color: #0369a1;
+}
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 14px;
+  padding: 12px 14px;
+  background: var(--sa-toolbar-bg);
+  border: 1px solid var(--sa-border);
+  border-radius: var(--sa-radius-sm);
+}
+.table-wrap {
+  border: 1px solid var(--sa-border);
+  border-radius: 14px;
+  overflow: hidden;
+  background: var(--sa-panel);
+  box-shadow: var(--sa-shadow);
+}
+.name-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.name-cell__icon {
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+  background: #fef2f2;
+  color: #dc2626;
+}
+.name-cell__icon[data-ok='true'] {
+  background: var(--sa-accent-soft);
+  color: var(--sa-accent);
+}
+.name-cell strong {
+  font-size: 13px;
+  font-weight: 650;
+}
+.mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  color: var(--sa-ink-secondary);
+  background: var(--sa-toolbar-bg);
+  padding: 1px 6px;
+  border-radius: 6px;
+}
+.muted {
+  color: var(--sa-ink-muted);
+}
+.fail-msg {
+  color: #be123c;
+}
+.pager {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 14px;
+}
+@media (max-width: 900px) {
+  .mon-stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+</style>
+
+<style>
+.sa-dialog.el-dialog {
+  width: min(520px, calc(100vw - 32px)) !important;
+}
+</style>

package/template/src/views/monitor/online/index.vue

@@ -0,0 +1,298 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Refresh, Search, Connection, SwitchButton } from '@element-plus/icons-vue'
+import { get, del } from '@/utils/request'
+import AppPage from '@/components/AppPage.vue'
+import { formatDateTime } from '@/utils/datetime'
+import { useUserStore } from '@/stores/user'
+
+interface OnlineUser {
+  jti: string
+  userId: number
+  userName: string
+  nickName?: string
+  ipAddress?: string
+  loginTime: string
+}
+
+const loading = ref(false)
+const list = ref<OnlineUser[]>([])
+const keyword = ref('')
+const selected = ref<OnlineUser[]>([])
+const userStore = useUserStore()
+
+const filtered = computed(() => {
+  const q = keyword.value.trim().toLowerCase()
+  if (!q) return list.value
+  return list.value.filter(
+    (u) =>
+      u.userName?.toLowerCase().includes(q) ||
+      u.nickName?.toLowerCase().includes(q) ||
+      u.ipAddress?.toLowerCase().includes(q),
+  )
+})
+
+const stats = computed(() => {
+  const total = list.value.length
+  const shown = filtered.value.length
+  const me = list.value.filter((u) => isSelf(u)).length
+  return { total, shown, me }
+})
+
+async function load() {
+  loading.value = true
+  try {
+    list.value = (await get<OnlineUser[]>('/online-users')) || []
+    selected.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+function onSelectionChange(rows: OnlineUser[]) {
+  selected.value = rows
+}
+
+function isSelf(row: OnlineUser) {
+  const u = userStore.userInfo
+  if (!u) return false
+  return row.userId === u.userId || row.userName === u.userName
+}
+
+async function forceLogout(rows: OnlineUser[]) {
+  if (!rows.length) {
+    ElMessage.warning('请选择要强退的用户')
+    return
+  }
+  const others = rows.filter((r) => !isSelf(r))
+  if (!others.length) {
+    ElMessage.warning('不能强制退出当前登录会话')
+    return
+  }
+  const names = others.map((r) => r.userName || r.nickName).join('、')
+  await ElMessageBox.confirm(`确认强制下线：${names}？`, '强退确认', { type: 'warning' })
+  await del('/online-users', others.map((r) => r.jti) as unknown as object)
+  ElMessage.success('已强制下线')
+  load()
+}
+
+function forceOne(row: OnlineUser) {
+  forceLogout([row])
+}
+
+function forceSelected() {
+  forceLogout(selected.value)
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <AppPage title="在线用户" description="查看当前会话，支持强制下线">
+    <div class="mon-stats">
+      <div class="mon-stats__item">
+        <span class="mon-stats__num">{{ stats.total }}</span>
+        <span class="mon-stats__label">在线会话</span>
+      </div>
+      <div class="mon-stats__item mon-stats__item--hit">
+        <span class="mon-stats__num">{{ stats.shown }}</span>
+        <span class="mon-stats__label">当前筛选</span>
+      </div>
+      <div class="mon-stats__item mon-stats__item--ok">
+        <span class="mon-stats__num">{{ stats.me || 0 }}</span>
+        <span class="mon-stats__label">我的会话</span>
+      </div>
+      <div class="mon-stats__item mon-stats__item--sel">
+        <span class="mon-stats__num">{{ selected.length }}</span>
+        <span class="mon-stats__label">已选择</span>
+      </div>
+    </div>
+
+    <div class="toolbar">
+      <el-input
+        v-model="keyword"
+        clearable
+        placeholder="搜索账号 / 昵称 / IP"
+        style="width: 240px"
+        :prefix-icon="Search"
+      />
+      <el-button type="primary" :icon="Refresh" @click="load">刷新</el-button>
+      <div class="toolbar__spacer" />
+      <el-button
+        type="danger"
+        plain
+        :icon="SwitchButton"
+        :disabled="!selected.length"
+        v-permission="'monitor:online:forceLogout'"
+        @click="forceSelected"
+      >
+        批量强退
+      </el-button>
+    </div>
+
+    <div class="table-wrap" v-loading="loading">
+      <el-table
+        :data="filtered"
+        border
+        stripe
+        empty-text="当前没有在线用户"
+        row-key="jti"
+        @selection-change="onSelectionChange"
+      >
+        <el-table-column type="selection" width="48" :selectable="(row: OnlineUser) => !isSelf(row)" />
+        <el-table-column label="账号" min-width="140" show-overflow-tooltip>
+          <template #default="{ row }">
+            <div class="name-cell">
+              <span class="name-cell__icon" :data-self="isSelf(row)">
+                <el-icon :size="14"><Connection /></el-icon>
+              </span>
+              <div class="name-cell__text">
+                <strong>{{ row.userName }}</strong>
+                <el-tag v-if="isSelf(row)" size="small" type="success" effect="plain">当前</el-tag>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="nickName" label="昵称" min-width="120" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.nickName || '—' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="IP" width="140" show-overflow-tooltip>
+          <template #default="{ row }">
+            <code class="mono">{{ row.ipAddress || '—' }}</code>
+          </template>
+        </el-table-column>
+        <el-table-column label="登录时间" width="170" class-name="is-datetime" show-overflow-tooltip>
+          <template #default="{ row }">
+            <span class="datetime-cell">{{ formatDateTime(row.loginTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="会话 Id" min-width="160" show-overflow-tooltip>
+          <template #default="{ row }">
+            <code class="mono">{{ row.jti }}</code>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="110" fixed="right" align="center">
+          <template #default="{ row }">
+            <div class="row-actions">
+              <el-button
+                size="small"
+                type="danger"
+                :icon="SwitchButton"
+                :disabled="isSelf(row)"
+                v-permission="'monitor:online:forceLogout'"
+                @click="forceOne(row)"
+              >
+                强退
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </AppPage>
+</template>
+
+<style scoped lang="scss">
+.mon-stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 14px;
+}
+.mon-stats__item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 14px 16px;
+  border-radius: 14px;
+  border: 1px solid var(--sa-border);
+  background: var(--sa-panel);
+  box-shadow: var(--sa-shadow);
+}
+.mon-stats__num {
+  font-size: 22px;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  color: var(--sa-ink);
+  font-variant-numeric: tabular-nums;
+}
+.mon-stats__label {
+  font-size: 12px;
+  color: var(--sa-ink-muted);
+}
+.mon-stats__item--ok .mon-stats__num {
+  color: var(--sa-accent);
+}
+.mon-stats__item--hit .mon-stats__num {
+  color: #0369a1;
+}
+.mon-stats__item--sel .mon-stats__num {
+  color: #b45309;
+}
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 14px;
+  padding: 12px 14px;
+  background: var(--sa-toolbar-bg);
+  border: 1px solid var(--sa-border);
+  border-radius: var(--sa-radius-sm);
+}
+.toolbar__spacer {
+  flex: 1;
+}
+.table-wrap {
+  border: 1px solid var(--sa-border);
+  border-radius: 14px;
+  overflow: hidden;
+  background: var(--sa-panel);
+  box-shadow: var(--sa-shadow);
+}
+.name-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.name-cell__icon {
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+  background: #eff6ff;
+  color: #2563eb;
+  flex-shrink: 0;
+}
+.name-cell__icon[data-self='true'] {
+  background: var(--sa-accent-soft);
+  color: var(--sa-accent);
+}
+.name-cell__text {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+.name-cell strong {
+  font-size: 13px;
+  font-weight: 650;
+}
+.mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  color: var(--sa-ink-secondary);
+  background: var(--sa-toolbar-bg);
+  padding: 1px 6px;
+  border-radius: 6px;
+}
+@media (max-width: 900px) {
+  .mon-stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+</style>