wireguard-dashboard-admin/src/views/dashboard/index.vue

<script setup lang="ts">
import { useServerStoreHook } from "@/store/modules/server";
import { getSystemLog } from "@/api/dashboard";
import { reactive } from "vue";
import { getClientConnects, offlineClient } from "@/api/clients";
import { Refresh } from "@element-plus/icons-vue";
import { message } from "@/utils/message";

defineOptions({
  name: "Dashboard"
});

const systemLogForm = reactive({
  current: 1,
  size: 5
});

const systemLogTableData = reactive({
  total: 0,
  data: []
});

const clientConnectsData = reactive({
  data: []
});

// 请求操作日志记录
const getSystemLogHandler = () => {
  getSystemLog(systemLogForm).then(res => {
    if (res.code === 200) {
      systemLogTableData.data = res.data.records;
      systemLogTableData.total = res.data.total;
    }
  });
};

// 定义分页相关事件
const pageChange = (page: number, size: number) => {
  systemLogForm.size = size;
  systemLogForm.current = page;
  getSystemLogHandler();
};

// 获取客户端链接状态列表
const getClientsStatus = () => {
  getClientConnects().then(res => {
    if (res.code === 200) {
      clientConnectsData.data = res.data;
    }
  });
};

// 刷新列表
const refreshClick = (eventStr: string) => {
  switch (eventStr) {
    case "systemLog":
      getSystemLogHandler();
      break;
    case "clientStatus":
      getClientsStatus();
      break;
  }
};

const initServerInfo = () => {
  useServerStoreHook().getServerApi();
};

// 强制下线客户端
const offlineClientHandler = (clientID: string) => {
  offlineClient(clientID).then(res => {
    if (res.code === 200) {
      message("下线客户端成功", { type: "success" });
      getClientsStatus();
    }
  });
};

initServerInfo();
getSystemLogHandler();
getClientsStatus();
</script>

<template>
  <div>
    <el-card style="max-width: 100%">
      <template #header>
        <div class="card-header">
          <span>操作日志</span>
          <el-button
            style="float: right"
            type="primary"
            :icon="Refresh"
            @click="refreshClick('systemLog')"
            >刷新</el-button
          >
        </div>
      </template>
      <el-table
        :data="systemLogTableData.data"
        align="center"
        :border="true"
        style="width: 100%"
      >
        <el-table-column
          prop="username"
          label="用户名称"
          min-width="80"
          align="center"
        />
        <el-table-column
          prop="clientIP"
          label="客户端IP"
          min-width="80"
          align="center"
        >
          <template #default="scope">
            <el-tag effect="dark">{{ scope.row.clientIP }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="method"
          label="操作方法"
          min-width="80"
          align="center"
        >
          <template #default="scope">
            <el-tag v-if="scope.row.method === 'POST'" effect="dark">{{
              scope.row.method
            }}</el-tag>
            <el-tag
              v-if="scope.row.method === 'PUT'"
              type="warning"
              effect="dark"
              >{{ scope.row.method }}</el-tag
            >
            <el-tag
              v-if="scope.row.method === 'DELETE'"
              type="danger"
              effect="dark"
              >{{ scope.row.method }}</el-tag
            >
            <el-tag
              v-if="scope.row.method === 'GET'"
              type="info"
              effect="dark"
              >{{ scope.row.method }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="host"
          label="请求主机"
          min-width="80"
          align="center"
        />
        <el-table-column
          prop="uri"
          label="操作路径"
          min-width="80"
          align="center"
        />
        <el-table-column
          prop="statusCode"
          label="响应状态码"
          min-width="80"
          align="center"
        >
          <template #default="scope">
            <el-tag
              v-if="scope.row.statusCode === 200"
              type="success"
              effect="dark"
              >{{ scope.row.statusCode }}</el-tag
            >
            <el-tag v-else type="danger" effect="dark">{{
              scope.row.statusCode
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="createdAt"
          label="操作时间"
          min-width="80"
          align="center"
        />
      </el-table>
      <template #footer>
        <el-pagination
          small
          background
          layout="total,prev,pager,next"
          :page-size="systemLogForm.size"
          :total="systemLogTableData.total"
          @change="pageChange"
        />
      </template>
    </el-card>
    <el-card style="max-width: 100%; margin-top: 10px">
      <template #header>
        <div class="card-header">
          <span>客户端链接状态</span>
          <el-button
            style="float: right"
            type="primary"
            :icon="Refresh"
            @click="refreshClick('clientStatus')"
            >刷新</el-button
          >
        </div>
      </template>
      <el-table
        :data="clientConnectsData.data"
        align="center"
        :border="true"
        style="width: 100%"
      >
        <el-table-column
          prop="name"
          label="客户端名称"
          min-width="80"
          align="center"
        />
        <el-table-column
          prop="email"
          label="联系邮箱"
          min-width="80"
          align="center"
        />
        <el-table-column
          prop="ipAllocation"
          label="客户端IP"
          min-width="80"
          align="center"
        />
        <el-table-column
          prop="endpoint"
          label="端点"
          min-width="80"
          align="center"
        />
        <el-table-column
          prop="received"
          label="接受流量"
          min-width="80"
          align="center"
        />
        <el-table-column
          prop="transmitted"
          label="传输流量"
          min-width="80"
          align="center"
        />
        <el-table-column
          prop="isOnline"
          label="是否在线"
          min-width="80"
          align="center"
        >
          <template #default="scope">
            <el-tag v-if="scope.row.isOnline" type="success">在线</el-tag>
            <el-tag v-else type="warning">离线</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="lastHandShake"
          label="最后握手时间"
          min-width="80"
          align="center"
        />
        <el-table-column label="操作" min-width="80" align="center">
          <template #default="scope">
            <el-button
              v-if="scope.row.isOnline"
              type="primary"
              @click="offlineClientHandler(scope.row.id)"
              >下线</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>