🎨客户端链接信息

src/utils/http/index.js

@@ -3,7 +3,7 @@ import { resReject, resResolve, reqReject, reqResolve } from './interceptors'
 
 export function createAxios(options = {}) {
   const defaultOptions = {
-    timeout: 12000,
+    timeout: 120000,
   }
   const service = axios.create({
     ...defaultOptions,

src/views/workbench/api.js

@@ -0,0 +1,7 @@
+import { request } from '@/utils'
+
+export default {
+  logsList: (params) => request.get('/dashboard/request/list',{ params }), // 操作日志列表
+  dailyPoetry: () => request.get('/dashboard/daily-poetry'), // 每日诗词
+  clientConnections: () => request.get('/dashboard/connections') // 客户端链接信息
+}

src/views/workbench/index.vue

@@ -10,18 +10,228 @@
           </div>
         </div>
 
-        <p class="mt-20 text-14 opacity-60">一个人几乎可以在任何他怀有无限热忱的事情上成功。</p>
+        <p class="mt-40 text-14 opacity-60" style="cursor: pointer" @click="dailyPoe">{{ dailyPoetry.content || '莫向外求，但从心觅，行有不得，反求诸己。' }}</p>
-        <p class="mt-12 text-right text-12 opacity-40">—— 查尔斯·史考伯</p>
+        <p class="mt-32 text-right text-12 opacity-40">—— {{ dailyPoetry.author || '佚名' }}</p>
       </n-card>
       <n-card class="ml-12 w-70%">
-
+        <n-data-table
+          remote
+          :columns="tableColumns"
+          :data="tableData.data"
+          :pagination="paginate"
+        />
       </n-card>
     </div>
+    <n-card>
+      <n-data-table
+        remote
+        :columns="connectionsColumns"
+        :data="connectionsData.data"
+      />
+    </n-card>
   </AppPage>
 </template>
 
 <script setup>
 import { useUserStore } from '@/store'
-
+import api from '@/views/workbench/api'
+import { debounce } from '@/utils'
+import { NTag } from 'naive-ui'
 const userStore = useUserStore()
+
+// 表格表头
+const tableColumns = [
+  {
+    title: '用户名称',
+    key: 'username',
+    align: 'center',
+    titleAlign: 'center'
+  },
+  {
+    title: '客户端IP',
+    key: 'clientIP',
+    align: 'center',
+    titleAlign: 'center'
+  },
+  {
+    title: '请求方法',
+    key: 'method',
+    align: 'center',
+    titleAlign: 'center'
+  },
+  {
+    title: '请求主机',
+    key: 'host',
+    align: 'center',
+    titleAlign: 'center'
+  },
+  {
+    title: '请求地址',
+    key: 'uri',
+    align: 'center',
+    titleAlign: 'center'
+  },
+  {
+    title: '状态码',
+    key: 'statusCode',
+    align: 'center',
+    titleAlign: 'center'
+  },
+  {
+    title: '请求时间',
+    key: 'createdAt',
+    align: 'center',
+    titleAlign: 'center'
+  },
+]
+// 链接信息列表
+const connectionsColumns = [
+  {
+    title: '客户端名称',
+    key: 'name',
+    align: 'center',
+    titleAlign: 'center'
+  },
+  {
+    title: '联系邮箱',
+    key: 'email',
+    align: 'center',
+    titleAlign: 'center'
+  },
+  {
+    title: '客户端IP',
+    key: 'ipAllocation',
+    align: 'center',
+    titleAlign: 'center'
+  },
+  {
+    title: '端点',
+    key: 'connectEndpoint',
+    align: 'center',
+    titleAlign: 'center'
+  },
+  {
+    title: '是否在线',
+    key: 'online',
+    align: 'center',
+    titleAlign: 'center',
+    render: (row) => {
+      switch (row.online) {
+        case true:
+          return h(NTag,{
+            type: 'info',
+          },{
+            default: () => '在线'
+          })
+        case false:
+          return h(NTag,{
+            type: 'warning',
+          },{
+            default: () => '离线'
+          })
+      }
+    }
+  },
+  {
+    title: '接受流量',
+    key: 'receiveBytes',
+    align: 'center',
+    titleAlign: 'center'
+  },
+  {
+    title: '传输流量',
+    key: 'transmitBytes',
+    align: 'center',
+    titleAlign: 'center'
+  },
+  {
+    title: '最后握手时间',
+    key: 'lastHandAt',
+    align: 'center',
+    titleAlign: 'center'
+  }
+]
+
+// 表格数据
+const tableData = ref({
+  data: []
+})
+
+// 链接数据
+const connectionsData = ref({
+  data: []
+})
+
+const dailyPoetry = ref({
+  author: '',
+  content: ''
+})
+
+// 页码控件
+const paginate = reactive({
+  page: 1,
+  pageSize: 2,
+  itemCount: 0,
+  pageCount: 0,
+  onChange: (page) => {
+    paginate.page = page;
+    getLogsList()
+  }
+})
+
+// 获取操作日志列表
+async function getLogsList() {
+  try {
+    const res = await api.logsList({
+      current: paginate.page,
+      size: paginate.pageSize,
+    })
+    if (res.data.code === 200) {
+      tableData.value.data = res.data.data.records;
+      paginate.itemCount = res.data.data.total;
+      paginate.pageCount = res.data.data.totalPage;
+      connectionList()
+    }
+  }catch (error) {
+    return error
+  }
+}
+
+// 每日诗词
+const dailyPoe = debounce(() => {
+  getDailyPoetry()
+},800)
+
+// 获取每日诗词
+function getDailyPoetry() {
+  try {
+    api.dailyPoetry().then(res => {
+      if (res.data.code === 200) {
+        dailyPoetry.value.author = res.data.data.author;
+        dailyPoetry.value.content = res.data.data.content;
+      }
+    })
+  }catch (error) {
+    return error
+  }
+}
+
+const connectionList = debounce(() => {
+  getClientConnections()
+},300)
+
+// 获取客户端链接列表
+async function getClientConnections() {
+  try {
+    const res = await api.clientConnections()
+    if (res.data.code === 200) {
+      connectionsData.value.data = res.data.data;
+    }
+  }catch (e) {
+    return e
+  }
+}
+
+getLogsList()
+dailyPoe()
 </script>