add dark mode

add audit conn log
2024-10-18 15:01:39 +08:00
parent 0ccfc8e154
commit d7291d81a4
13 changed files with 252 additions and 5 deletions
@@ -0,0 +1,16 @@
+import request from '@/utils/request'
+
+export function list (params) {
+  return request({
+    url: '/audit_conn/list',
+    params,
+  })
+}
+
+export function remove (data) {
+  return request({
+    url: '/audit_conn/delete',
+    method: 'post',
+    data,
+  })
+}
@@ -1,8 +1,21 @@
 <template>
  <div class="setting">
-    <div>
+    <div class="menu-item">
      <el-button size="small" @click="changeLang" style="width: 100px">{{ T('ChangeLang') }}</el-button>
    </div>
+    <div class="menu-item">
+        <el-switch
+            v-model="isDark"
+            style="--el-switch-on-color:#18222c"
+            >
+          <template #active-action>
+           <el-icon><Moon/></el-icon>
+          </template>
+          <template #inactive-action>
+            <el-icon ><Sunny color="#000"/></el-icon>
+          </template>
+        </el-switch>
+    </div>
    <el-dropdown class="menu-item">
      <div class="title">
        <!--        <el-image class="avatar" :src="user.avatar"></el-image>-->
@@ -30,6 +43,8 @@
  import changePwdDialog from '@/components/changePwdDialog.vue'
  import { ref } from 'vue'
  import { T } from '@/utils/i18n'
+  import { useDark } from "@vueuse/core"
+  import {Sunny, Moon} from '@element-plus/icons'

  const userStore = useUserStore()
  const user = userStore
@@ -47,6 +62,8 @@
  const changeLang = () => {
    appStore.changeLang()
  }
+  const isDark = useDark();
+  // const toggleDark = useToggle(isDark)
 </script>

 <style lang="scss" scoped>
@@ -55,7 +72,9 @@
  display: flex;
  align-items: center;
  justify-content: space-around;
-
+  .menu-item {
+    margin-left: 10px;
+  }
  .title {
    color: #fff;
    display: flex;
@@ -7,6 +7,7 @@ import { router } from '@/router'
 import 'normalize.css/normalize.css'
 import { pinia } from '@/store'
 import '@/permission'
+import 'element-plus/theme-chalk/dark/css-vars.css'
 import '@/styles/style.scss'
 import * as ElementIcons from '@element-plus/icons'

@@ -130,6 +130,12 @@ export const asyncRoutes = [
        meta: { title: 'LoginLog', icon: 'List' /*keepAlive: true*/ },
        component: () => import('@/views/login/log.vue'),
      },
+      {
+        path: '/auditConn',
+        name: 'AuditConn',
+        meta: { title: 'AuditConnLog', icon: 'Tickets' /*keepAlive: true*/ },
+        component: () => import('@/views/audit/connList.vue'),
+      },
    ],
  },
 ]
@@ -37,3 +37,7 @@ $sideBarWidth: 210px;
    margin-right: 5px;
  }
 }
+html.dark {
+  /* 自定义深色背景颜色 */
+  //--el-bg-color: #626aef;
+}
@@ -350,5 +350,21 @@
  },
  "Timeout": {
    "One": "Timeout"
+  },
+  "AuditConnLog": {
+    "One": "Connection Log"
+  },
+  "Peer": {
+    "One": "Peer",
+    "Other": "Peers"
+  },
+  "FromPeer": {
+    "One": "From Peer"
+  },
+  "FromName": {
+    "One": "From Name"
+  },
+  "CloseTime": {
+    "One": "Close Time"
  }
 }
@@ -337,5 +337,20 @@
  },
  "Timeout": {
    "One": "超时"
+  },
+  "AuditConnLog": {
+    "One": "连接日志"
+  },
+  "Peer": {
+    "One": "设备"
+  },
+  "FromPeer": {
+    "One": "来源设备"
+  },
+  "FromName": {
+    "One": "来源名称"
+  },
+  "CloseTime": {
+    "One": "关闭时间"
  }
 }
@@ -23,3 +23,25 @@ export function timeAgo (time) {
    return T('YearsAgo', { param: num }, num)
  }
 }
+
+export function formatTime (unix, format = 'yyyy-MM-dd hh:mm:ss') {
+  let date = new Date(unix)
+  let o = {
+    'M+': date.getMonth() + 1,
+    'd+': date.getDate(),
+    'h+': date.getHours(),
+    'm+': date.getMinutes(),
+    's+': date.getSeconds(),
+    'q+': Math.floor((date.getMonth() + 3) / 3),
+    S: date.getMilliseconds(),
+  }
+  if (/(y+)/.test(format)) {
+    format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
+  }
+  for (let k in o) {
+    if (new RegExp('(' + k + ')').test(format)) {
+      format = format.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))
+    }
+  }
+  return format
+}
@@ -30,7 +30,11 @@
    <el-card class="list-body" shadow="hover">
      <!--      <el-tag type="danger" style="margin-bottom: 10px">不建议在此操作地址簿，可能会造成数据不同步</el-tag>-->
      <el-table :data="listRes.list" v-loading="listRes.loading" border>
-        <el-table-column prop="id" label="id" align="center" width="200"/>
+        <el-table-column prop="id" label="id" align="center" width="200">
+          <template #default="{row}">
+            <span>{{ row.id }} <el-icon @click="handleClipboard(row.id, $event)"><CopyDocument/></el-icon></span>
+          </template>
+        </el-table-column>
        <el-table-column :label="T('Owner')" align="center" width="200">
          <template #default="{row}">
            <span v-if="row.user_id"> <el-tag>{{ allUsers?.find(u => u.id === row.user_id)?.username }}</el-tag> </span>
@@ -162,6 +166,8 @@
  import shareByWebClient from '@/views/address_book/components/shareByWebClient.vue'
  import { connectByClient } from '@/utils/peer'
  import { useAppStore } from '@/store/app'
+  import { handleClipboard } from '@/utils/clipboard'
+  import { CopyDocument } from '@element-plus/icons'

  const appStore = useAppStore()
  const route = useRoute()
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <el-card class="list-query" shadow="hover">
+      <el-form inline label-width="80px">
+        <el-form-item :label="T('Peer')">
+          <el-input v-model="listQuery.peer_id" clearable></el-input>
+        </el-form-item>
+        <el-form-item :label="T('FromPeer')">
+          <el-input v-model="listQuery.from_peer" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handlerQuery">筛选</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card class="list-body" shadow="hover">
+      <!--      <el-tag type="danger" style="margin-bottom: 10px">不建议在此操作地址簿，可能会造成数据不同步</el-tag>-->
+      <el-table :data="listRes.list" v-loading="listRes.loading" border>
+        <el-table-column prop="id" label="id" align="center" width="100"/>
+        <el-table-column :label="T('Peer')" prop="peer_id" align="center" width="120"/>
+        <el-table-column :label="T('FromPeer')" prop="from_peer" align="center" width="120"/>
+        <el-table-column :label="T('FromName')" prop="from_name" align="center" width="120"/>
+        <el-table-column prop="uuid" label="uuid" align="center" width="120" show-overflow-tooltip/>
+        <el-table-column prop="created_at" :label="T('CreatedAt')" align="center"/>
+        <el-table-column :label="T('CloseTime')" prop="close_time" align="center"/>
+        <el-table-column :label="T('Actions')" align="center" width="400">
+          <template #default="{row}">
+            <el-button type="danger" @click="del(row)">{{ T('Delete') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-card class="list-page" shadow="hover">
+      <el-pagination background
+                     layout="prev, pager, next, sizes, jumper"
+                     :page-sizes="[10,20,50,100]"
+                     v-model:page-size="listQuery.page_size"
+                     v-model:current-page="listQuery.page"
+                     :total="listRes.total">
+      </el-pagination>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+  import { onActivated, onMounted, watch } from 'vue'
+  import { useRepositories } from '@/views/audit/reponsitories'
+  import { T } from '@/utils/i18n'
+
+  const {
+    listRes,
+    listQuery,
+    getList,
+    handlerQuery,
+    del,
+  } = useRepositories()
+
+  onMounted(getList)
+  onActivated(getList)
+
+  watch(() => listQuery.page, getList)
+
+  watch(() => listQuery.page_size, handlerQuery)
+
+</script>
+
+<style scoped lang="scss">
+
+</style>
@@ -0,0 +1,61 @@
+import { reactive } from 'vue'
+import { list, remove } from '@/api/audit'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useRoute } from 'vue-router'
+import {formatTime} from '@/utils/time'
+export function useRepositories () {
+  const listRes = reactive({
+    list: [], total: 0, loading: false,
+  })
+  const listQuery = reactive({
+    page: 1,
+    page_size: 10,
+    peer_id: null,
+    from_peer: null,
+  })
+
+  const getList = async () => {
+    listRes.loading = true
+    const res = await list(listQuery).catch(_ => false)
+    listRes.loading = false
+    if (res) {
+      listRes.list = res.data.list.map(item => {
+        item.close_time = item.close_time ? formatTime(item.close_time*1000) : '-'
+        return item
+      })
+      listRes.total = res.data.total
+    }
+  }
+  const handlerQuery = () => {
+    if (listQuery.page === 1) {
+      getList()
+    } else {
+      listQuery.page = 1
+    }
+  }
+
+  const del = async (row) => {
+    const cf = await ElMessageBox.confirm('确定删除么?', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }).catch(_ => false)
+    if (!cf) {
+      return false
+    }
+
+    const res = await remove({ id: row.id }).catch(_ => false)
+    if (res) {
+      ElMessage.success('操作成功')
+      getList()
+    }
+  }
+
+  return {
+    listRes,
+    listQuery,
+    getList,
+    handlerQuery,
+    del,
+  }
+}
@@ -20,7 +20,11 @@
    <el-card class="list-body" shadow="hover">
      <!--      <el-tag type="danger" style="margin-bottom: 10px">不建议在此操作地址簿，可能会造成数据不同步</el-tag>-->
      <el-table :data="listRes.list" v-loading="listRes.loading" border>
-        <el-table-column prop="id" label="id" align="center" width="200"/>
+        <el-table-column prop="id" label="id" align="center" width="200">
+          <template #default="{row}">
+            <span>{{ row.id }} <el-icon @click="handleClipboard(row.id, $event)"><CopyDocument/></el-icon></span>
+          </template>
+        </el-table-column>
        <el-table-column prop="username" :label="T('Username')" align="center" width="150"/>
        <el-table-column prop="hostname" :label="T('Hostname')" align="center" width="150"/>
        <el-table-column prop="platform" :label="T('Platform')" align="center" width="120"/>
@@ -134,6 +138,8 @@
  import shareByWebClient from '@/views/address_book/components/shareByWebClient.vue'
  import { useAppStore } from '@/store/app'
  import { connectByClient } from '@/utils/peer'
+  import { handleClipboard } from '@/utils/clipboard'
+  import { CopyDocument } from '@element-plus/icons'

  const appStore = useAppStore()
  const tagList = ref([])
@@ -30,7 +30,11 @@
    <el-card class="list-body" shadow="hover">
      <el-table :data="listRes.list" v-loading="listRes.loading" border size="small" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"/>
-        <el-table-column prop="id" label="id" align="center" width="150"/>
+        <el-table-column prop="id" label="id" align="center" width="150">
+          <template #default="{row}">
+            <span>{{ row.id }} <el-icon @click="handleClipboard(row.id, $event)"><CopyDocument/></el-icon></span>
+          </template>
+        </el-table-column>
        <el-table-column prop="cpu" label="cpu" align="center" width="100" show-overflow-tooltip/>
        <el-table-column prop="hostname" :label="T('Hostname')" align="center" width="120"/>
        <el-table-column prop="memory" :label="T('Memory')" align="center" width="120"/>
@@ -169,6 +173,8 @@
  import { batchCreate } from '@/api/address_book'
  import { useAppStore } from '@/store/app'
  import { connectByClient } from '@/utils/peer'
+  import { CopyDocument } from '@element-plus/icons'
+  import { handleClipboard } from '@/utils/clipboard'

  const appStore = useAppStore()
  const listRes = reactive({