From d7291d81a4830bcc858a3040df11252c500f7dcf Mon Sep 17 00:00:00 2001
From: ljw <84855512@qq.com>
Date: Fri, 18 Oct 2024 15:01:39 +0800
Subject: [PATCH] add dark mode add audit conn log

---
 src/api/audit.js                        | 16 ++++++
 src/layout/components/setting/index.vue | 23 ++++++++-
 src/main.js                             |  1 +
 src/router/index.js                     |  6 +++
 src/styles/style.scss                   |  4 ++
 src/utils/i18n/en.json                  | 16 ++++++
 src/utils/i18n/zh_CN.json               | 15 ++++++
 src/utils/time.js                       | 22 ++++++++
 src/views/address_book/index.vue        |  8 ++-
 src/views/audit/connList.vue            | 69 +++++++++++++++++++++++++
 src/views/audit/reponsitories.js        | 61 ++++++++++++++++++++++
 src/views/my/address_book/index.vue     |  8 ++-
 src/views/peer/index.vue                |  8 ++-
 13 files changed, 252 insertions(+), 5 deletions(-)
 create mode 100644 src/api/audit.js
 create mode 100644 src/views/audit/connList.vue
 create mode 100644 src/views/audit/reponsitories.js

diff --git a/src/api/audit.js b/src/api/audit.js
new file mode 100644
index 0000000..acda64a
--- /dev/null
+++ b/src/api/audit.js
@@ -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,
+  })
+}
diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue
index e185316..22933bc 100644
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -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;
diff --git a/src/main.js b/src/main.js
index a1fd926..52764b2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -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'
 
diff --git a/src/router/index.js b/src/router/index.js
index 08e052d..71ad9f0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -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'),
+      },
     ],
   },
 ]
diff --git a/src/styles/style.scss b/src/styles/style.scss
index b30bd9f..47ae7d0 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -37,3 +37,7 @@ $sideBarWidth: 210px;
     margin-right: 5px;
   }
 }
+html.dark {
+  /* 自定义深色背景颜色 */
+  //--el-bg-color: #626aef;
+}
diff --git a/src/utils/i18n/en.json b/src/utils/i18n/en.json
index 8a4c4c7..8da331d 100644
--- a/src/utils/i18n/en.json
+++ b/src/utils/i18n/en.json
@@ -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"
   }
 }
diff --git a/src/utils/i18n/zh_CN.json b/src/utils/i18n/zh_CN.json
index 4e55a58..5e4e6a7 100644
--- a/src/utils/i18n/zh_CN.json
+++ b/src/utils/i18n/zh_CN.json
@@ -337,5 +337,20 @@
   },
   "Timeout": {
     "One": "超时"
+  },
+  "AuditConnLog": {
+    "One": "连接日志"
+  },
+  "Peer": {
+    "One": "设备"
+  },
+  "FromPeer": {
+    "One": "来源设备"
+  },
+  "FromName": {
+    "One": "来源名称"
+  },
+  "CloseTime": {
+    "One": "关闭时间"
   }
 }
diff --git a/src/utils/time.js b/src/utils/time.js
index c06cdcf..e808459 100644
--- a/src/utils/time.js
+++ b/src/utils/time.js
@@ -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
+}
diff --git a/src/views/address_book/index.vue b/src/views/address_book/index.vue
index d5ceee8..c1222d8 100644
--- a/src/views/address_book/index.vue
+++ b/src/views/address_book/index.vue
@@ -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()
diff --git a/src/views/audit/connList.vue b/src/views/audit/connList.vue
new file mode 100644
index 0000000..7593c35
--- /dev/null
+++ b/src/views/audit/connList.vue
@@ -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>
diff --git a/src/views/audit/reponsitories.js b/src/views/audit/reponsitories.js
new file mode 100644
index 0000000..a026789
--- /dev/null
+++ b/src/views/audit/reponsitories.js
@@ -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,
+  }
+}
diff --git a/src/views/my/address_book/index.vue b/src/views/my/address_book/index.vue
index 2c8999c..86c0923 100644
--- a/src/views/my/address_book/index.vue
+++ b/src/views/my/address_book/index.vue
@@ -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([])
diff --git a/src/views/peer/index.vue b/src/views/peer/index.vue
index ca2dea6..d54cddf 100644
--- a/src/views/peer/index.vue
+++ b/src/views/peer/index.vue
@@ -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({