fix bugs & add batchdelete peer & add peer to ab

src/api/address_book.js

@@ -37,9 +37,9 @@ export function remove (data) {
   })
 }
 
-export function changePwd (data) {
+export function batchCreate (data) {
   return request({
-    url: '/address_book/changePwd',
+    url: '/address_book/batchCreate',
     method: 'post',
     data,
   })

src/api/peer.js

@@ -36,3 +36,11 @@ export function remove (data) {
     data,
   })
 }
+
+export function batchRemove (data) {
+  return request({
+    url: '/peer/batchDelete',
+    method: 'post',
+    data,
+  })
+}

src/store/app.js

@@ -11,7 +11,7 @@ export const useAppStore = defineStore({
       sideIsCollapse: false,
       logo,
       lang: localStorage.getItem('lang') || 'zh-CN',
-      locale: zhCn,
+      locale: localStorage.getItem('lang') === 'en' ? en : zhCn,
     },
   }),
 

src/styles/style.scss

@@ -18,3 +18,13 @@ $sideBarWidth: 210px;
   max-width: 600px;
   margin: 20px auto;
 }
+
+.list-query {
+  .el-select {
+    --el-select-width: 160px;
+  }
+
+  .el-input {
+    --el-input-width: 160px;
+  }
+}

src/utils/file.js

@@ -32,3 +32,26 @@ export function utf8_to_b64(str) {
 export function b64_to_utf8 (str) {
   return decodeURIComponent(escape(window.atob(str)))
 }
+
+export function jsonToCsv (data) {
+  let csv = ''
+  let keys = Object.keys(data[0])
+  csv += keys.join(',') + '\n'
+  data.forEach(row => {
+    csv += keys.map(key => `"${row[key]}"`).join(',') + '\n'
+  })
+  return new Blob([csv], { type: 'text/csv' })
+}
+
+export function downBlob (blob, filename) {
+  const url = window.URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename
+  document.body.appendChild(a)
+  a.click()
+  setTimeout(() => {
+    window.URL.revokeObjectURL(url)
+    document.body.removeChild(a)
+  })
+}

src/utils/i18n.js

@@ -1,17 +1,16 @@
 import en from '@/utils/i18n/en.json'
 import zhCN from '@/utils/i18n/zh_CN.json'
 import { useAppStore } from '@/store/app'
-import { pinia } from '@/store'
 
 export function T (key, params, num = 0) {
-  const appStore = useAppStore(pinia)
+  const appStore = useAppStore()
   const lang = appStore.setting.lang
   const trans = lang === 'zh-CN' ? zhCN : en
   const tran = trans[key]
   if (!tran) {
     return key
   }
-  const msg = num > 0 ? (tran.Other ? tran.Other : tran.One) : tran.One
+  const msg = num > 1 ? (tran.Other ? tran.Other : tran.One) : tran.One
   //msg 是这样 {name} is name
   //params 是这样 {name: 'zhangsan'}
   //替换

src/utils/i18n/en.json

@@ -232,5 +232,55 @@
   },
   "LoginLog": {
     "One": "Login Log"
+  },
+  "LastOnlineTime": {
+    "One": "Last Online Time"
+  },
+  "JustNow": {
+    "One": "Just Now"
+  },
+  "MinutesAgo": {
+    "One": "{param} Minute Ago",
+    "Other": "{param} Minutes Ago"
+  },
+  "HoursAgo": {
+    "One": "{param} Hour Ago",
+    "Other": "{param} Hours Ago"
+  },
+  "DaysAgo": {
+    "One": "{param} Day Ago",
+    "Other": "{param} Days Ago"
+  },
+  "MonthsAgo": {
+    "One": "{param} Month Ago",
+    "Other": "{param} Months Ago"
+  },
+  "YearsAgo": {
+    "One": "{param} Year Ago",
+    "Other": "{param} Years Ago"
+  },
+  "MinutesLess": {
+    "One": "Less than {param} minute",
+    "Other": "Less than {param} minutes"
+  },
+  "HoursLess": {
+    "One": "Less than {param} hour",
+    "Other": "Less than {param} hours"
+  },
+  "DaysLess": {
+    "One": "Less than {param} day",
+    "Other": "Less than {param} days"
+  },
+  "Export": {
+    "One": "Export"
+  },
+  "AddToAddressBook": {
+    "One": "Add To Address Book"
+  },
+  "BatchDelete": {
+    "One": "Batch Delete"
+  },
+  "PleaseSelectData": {
+    "One": "Please select data"
   }
 }

src/utils/i18n/zh_CN.json

@@ -232,5 +232,47 @@
   },
   "LoginLog": {
     "One": "登录日志"
+  },
+  "LastOnlineTime": {
+    "One": "最后在线时间"
+  },
+  "JustNow": {
+    "One": "刚刚"
+  },
+  "MinutesAgo": {
+    "One": "{param} 分钟前"
+  },
+  "HoursAgo": {
+    "One": "{param} 小时前"
+  },
+  "DaysAgo": {
+    "One": "{param} 天前"
+  },
+  "MonthsAgo": {
+    "One": "{param} 月前"
+  },
+  "YearsAgo": {
+    "One": "{param} 年前"
+  },
+  "MinutesLess": {
+    "One": "{param} 分钟内"
+  },
+  "HoursLess": {
+    "One": "{param} 小时内"
+  },
+  "DaysLess": {
+    "One": "{param} 天内"
+  },
+  "Export": {
+    "One": "导出"
+  },
+  "AddToAddressBook": {
+    "One": "添加到地址簿"
+  },
+  "BatchDelete": {
+    "One": "批量删除"
+  },
+  "PleaseSelectData": {
+    "One": "请选择数据"
   }
 }

src/utils/time.js

@@ -0,0 +1,25 @@
+import { T } from '@/utils/i18n'
+
+export function timeAgo (time) {
+  let now = new Date().getTime()
+  let after = new Date(time).getTime()
+  let dis = now - after
+  if (dis < 60 * 1000) {
+    return T('JustNow')
+  } else if (dis < 60 * 60 * 1000) {
+    const num = Math.floor(dis / (60 * 1000))
+    return T('MinutesAgo', { param: num }, num)
+  } else if (dis < 24 * 60 * 60 * 1000) {
+    const num = Math.floor(dis / (60 * 60 * 1000))
+    return T('HoursAgo', { param: num }, num)
+  } else if (dis < 30 * 24 * 60 * 60 * 1000) {
+    const num = Math.floor(dis / (24 * 60 * 60 * 1000))
+    return T('DaysAgo', { param: num }, num)
+  } else if (dis < 12 * 30 * 24 * 60 * 60 * 1000) {
+    const num = Math.floor(dis / (30 * 24 * 60 * 60 * 1000))
+    return T('MonthsAgo', { param: num }, num)
+  } else {
+    const num = Math.floor(dis / (12 * 30 * 24 * 60 * 60 * 1000))
+    return T('YearsAgo', { param: num }, num)
+  }
+}

src/views/address_book/index.js

@@ -1,13 +1,9 @@
 import { reactive, ref } from 'vue'
 import { create, list, remove, update } from '@/api/address_book'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { useRoute } from 'vue-router'
 import { T } from '@/utils/i18n'
 
-export function useRepositories () {
+export function useRepositories (user_id) {
-  const route = useRoute()
-  const user_id = route.query?.user_id
-
   const listRes = reactive({
     list: [], total: 0, loading: false,
   })
@@ -15,7 +11,10 @@ export function useRepositories () {
     page: 1,
     page_size: 10,
     is_my: 0,
-    user_id: user_id ? parseInt(user_id) : null,
+    id: null,
+    user_id: null,
+    username: null,
+    hostname: null,
   })
 
   const getList = async () => {
@@ -75,6 +74,7 @@ export function useRepositories () {
     'sameServer': false,
     'tags': [],
     'user_id': null,
+    user_ids: [],
     'username': '',
   })
 

src/views/address_book/index.vue

@@ -12,6 +12,15 @@
             ></el-option>
           </el-select>
         </el-form-item>
+        <el-form-item :label="T('Id')">
+          <el-input v-model="listQuery.id" clearable></el-input>
+        </el-form-item>
+        <el-form-item :label="T('Username')">
+          <el-input v-model="listQuery.username" clearable></el-input>
+        </el-form-item>
+        <el-form-item :label="T('Hostname')">
+          <el-input v-model="listQuery.hostname" clearable></el-input>
+        </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
           <el-button type="danger" @click="toAdd">{{ T('Add') }}</el-button>
@@ -80,12 +89,12 @@
         <el-form-item :label="T('Hostname')" prop="hostname">
           <el-input v-model="formData.hostname"></el-input>
         </el-form-item>
-        <el-form-item :label="T('LoginName')" prop="loginName">
+        <!--        <el-form-item :label="T('LoginName')" prop="loginName">
                   <el-input v-model="formData.loginName"></el-input>
                 </el-form-item>
                 <el-form-item :label="T('Password')" prop="password">
                   <el-input v-model="formData.password"></el-input>
-        </el-form-item>
+                </el-form-item>-->
         <el-form-item :label="T('Platform')" prop="platform">
           <el-select v-model="formData.platform">
             <el-option
@@ -140,7 +149,9 @@
   import { useRepositories } from '@/views/address_book/index'
   import { toWebClientLink } from '@/utils/webclient'
   import { T } from '@/utils/i18n'
+  import { useRoute } from 'vue-router'
 
+  const route = useRoute()
   const { allUsers, getAllUsers } = loadAllUsers()
   getAllUsers()
   const changeUser = (v) => {
@@ -167,10 +178,13 @@
     toEdit,
     toAdd,
     submit,
-    activeChange,
     currentColor,
   } = useRepositories()
 
+  if (route.query?.user_id) {
+    listQuery.user_id = parseInt(route.query.user_id)
+  }
+
   onMounted(getList)
   onActivated(getList)
 

src/views/my/address_book/index.vue

@@ -2,6 +2,15 @@
   <div>
     <el-card class="list-query" shadow="hover">
       <el-form inline label-width="80px">
+        <el-form-item :label="T('Id')">
+          <el-input v-model="listQuery.id" clearable></el-input>
+        </el-form-item>
+        <el-form-item :label="T('Username')">
+          <el-input v-model="listQuery.username" clearable></el-input>
+        </el-form-item>
+        <el-form-item :label="T('Hostname')">
+          <el-input v-model="listQuery.hostname" clearable></el-input>
+        </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
           <el-button type="danger" @click="toAdd">{{ T('Add') }}</el-button>
@@ -55,12 +64,12 @@
         <el-form-item :label="T('Hostname')" prop="hostname">
           <el-input v-model="formData.hostname"></el-input>
         </el-form-item>
-        <el-form-item :label="T('LoginName')" prop="loginName">
+        <!--        <el-form-item :label="T('LoginName')" prop="loginName">
                   <el-input v-model="formData.loginName"></el-input>
-        </el-form-item>
+                </el-form-item>-->
-        <el-form-item :label="T('Password')" prop="password">
+        <!--        <el-form-item :label="T('Password')" prop="password">
                           <el-input v-model="formData.password"></el-input>
-        </el-form-item>
+                        </el-form-item>-->
         <el-form-item :label="T('Platform')" prop="platform">
           <el-select v-model="formData.platform">
             <el-option
@@ -150,9 +159,6 @@
 </script>
 
 <style scoped lang="scss">
-.list-query .el-select {
-  --el-select-width: 160px;
-}
 
 .colors {
   display: flex;

src/views/peer/index.vue

@@ -1,15 +1,29 @@
 <template>
   <div>
     <el-card class="list-query" shadow="hover">
-      <el-form inline label-width="80px">
+      <el-form inline label-width="150px">
+        <el-form-item :label="T('LastOnlineTime')">
+          <el-select v-model="listQuery.time_ago" clearable>
+            <el-option
+                v-for="item in timeFilters"
+                :key="item.value"
+                :label="item.text"
+                :value="item.value"
+                :disabled="item.value === 0"
+            ></el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
           <el-button type="danger" @click="toAdd">{{ T('Add') }}</el-button>
+          <el-button type="success" @click="toExport">{{ T('Export') }}</el-button>
+          <el-button type="danger" @click="toBatchDelete">{{ T('BatchDelete') }}</el-button>
         </el-form-item>
       </el-form>
     </el-card>
     <el-card class="list-body" shadow="hover">
-      <el-table :data="listRes.list" v-loading="listRes.loading" border size="small">
+      <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"/>
         <el-table-column prop="cpu" label="cpu" align="center"/>
         <el-table-column prop="hostname" :label="T('Hostname')" align="center"/>
@@ -17,12 +31,21 @@
         <el-table-column prop="os" :label="T('Os')" align="center"/>
         <el-table-column prop="username" :label="T('Username')" align="center"/>
         <el-table-column prop="uuid" :label="T('Uuid')" align="center"/>
-        <el-table-column prop="version" :label="T('Version')" align="center"/>
+        <el-table-column prop="version" :label="T('Version')" align="center" width="80"/>
         <el-table-column prop="created_at" :label="T('CreatedAt')" align="center"/>
         <el-table-column prop="updated_at" :label="T('UpdatedAt')" align="center"/>
-        <el-table-column :label="T('Actions')" align="center" width="400">
+        <el-table-column prop="last_online_time" :label="T('LastOnlineTime')" align="center">
+          <template #default="{row}">
+            <div class="last_oline_time">
+              <span> {{ row.last_online_time ? timeAgo(row.last_online_time * 1000) : '-' }}</span> <span class="dot" :class="{red: timeDis(row.last_online_time) >= 60, green: timeDis(row.last_online_time)< 60}"></span>
+            </div>
+
+          </template>
+        </el-table-column>
+        <el-table-column :label="T('Actions')" align="center" width="500">
           <template #default="{row}">
             <el-button type="success" @click="toWebClientLink(row)">Web-Client</el-button>
+            <el-button type="primary" @click="toAddressBook(row)">{{ T('AddToAddressBook') }}</el-button>
             <el-button @click="toEdit(row)">{{ T('Edit') }}</el-button>
             <el-button type="danger" @click="del(row)">{{ T('Delete') }}</el-button>
           </template>
@@ -71,15 +94,73 @@
         </el-form-item>
       </el-form>
     </el-dialog>
+
+    <el-dialog v-model="ABFormVisible" width="800" :title="T('Create')">
+      <el-form class="dialog-form" ref="form" :model="ABFormData" label-width="120px">
+        <el-form-item :label="T('Owner')" prop="user_ids" required>
+          <el-select v-model="ABFormData.user_ids" multiple>
+            <el-option
+                v-for="item in allUsers"
+                :key="item.id"
+                :label="item.username"
+                :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="id" prop="id" required>
+          <el-input v-model="ABFormData.id"></el-input>
+        </el-form-item>
+        <el-form-item :label="T('Username')" prop="username">
+          <el-input v-model="ABFormData.username"></el-input>
+        </el-form-item>
+        <el-form-item :label="T('Alias')" prop="alias">
+          <el-input v-model="ABFormData.alias"></el-input>
+        </el-form-item>
+        <el-form-item :label="T('Hostname')" prop="hostname">
+          <el-input v-model="ABFormData.hostname"></el-input>
+        </el-form-item>
+        <el-form-item :label="T('Platform')" prop="platform">
+          <el-select v-model="ABFormData.platform">
+            <el-option
+                v-for="item in ABPlatformList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item :label="T('Tags')" prop="tags">
+          <el-select v-model="ABFormData.tags" multiple>
+            <el-option
+                v-for="item in tagList"
+                :key="item.name"
+                :label="item.name"
+                :value="item.name"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="ABFormVisible = false">{{ T('Cancel') }}</el-button>
+          <el-button @click="ABSubmit" type="primary">{{ T('Submit') }}</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
-  import { onActivated, onMounted, reactive, ref, watch } from 'vue'
+  import { computed, onActivated, onMounted, reactive, ref, watch } from 'vue'
-  import { create, list, remove, update } from '@/api/peer'
+  import { batchRemove, create, list, remove, update } from '@/api/peer'
   import { ElMessage, ElMessageBox } from 'element-plus'
   import { toWebClientLink } from '@/utils/webclient'
   import { T } from '@/utils/i18n'
+  import { timeAgo } from '@/utils/time'
+  import { jsonToCsv, downBlob } from '@/utils/file'
+  import { useRepositories as useABRepositories } from '@/views/address_book/index'
+  import { loadAllUsers } from '@/global'
+  import { list as fetchTagList } from '@/api/tag'
+  import { batchCreate } from '@/api/address_book'
 
   const listRes = reactive({
     list: [], total: 0, loading: false,
@@ -87,6 +168,7 @@
   const listQuery = reactive({
     page: 1,
     page_size: 10,
+    time_ago: null,
   })
 
   const getList = async () => {
@@ -129,12 +211,6 @@
 
   watch(() => listQuery.page_size, handlerQuery)
 
-  const platformList = [
-    { label: 'Windows', value: 'Windows' },
-    { label: 'Linux', value: 'Linux' },
-    { label: 'Mac OS', value: 'Mac OS' },
-    { label: 'Android', value: 'Android' },
-  ]
   const formVisible = ref(false)
   const formData = reactive({
     row_id: 0,
@@ -178,33 +254,137 @@
     }
   }
 
+  const timeDis = (time) => {
+    let now = new Date().getTime()
+    let after = new Date(time * 1000).getTime()
+    return (now - after) / 1000
+  }
+
+  const timeFilters = computed(() => [
+    { text: T('MinutesLess', { param: 1 }, 1), value: -60 },
+    { text: T('HoursLess', { param: 1 }, 1), value: -3600 },
+    { text: T('DaysLess', { param: 1 }, 1), value: -86400 },
+    { text: '---------', value: 0 },
+    { text: T('MinutesAgo', { param: 1 }, 1), value: 60 },
+    { text: T('HoursAgo', { param: 1 }, 1), value: 3600 },
+    { text: T('DaysAgo', { param: 1 }, 1), value: 86400 },
+    { text: T('MonthsAgo', { param: 1 }, 1), value: 2592000 },
+    // { text: T('YearsAgo', { param: 1 }, 1), value: 31536000 },
+  ])
+
+  const toExport = async () => {
+    const q = { ...listQuery }
+    q.page_size = 10000
+    q.page = 1
+    const res = await list(q).catch(_ => false)
+    if (res) {
+      const data = res.data.list.map(item => {
+        item.last_online_time = item.last_online_time ? new Date(item.last_online_time * 1000).toLocaleString() : '-'
+        return item
+      })
+      const csv = jsonToCsv(data)
+      downBlob(csv, 'peers.csv')
+    }
+  }
+
+  const {
+    platformList: ABPlatformList,
+    formVisible: ABFormVisible,
+    formData: ABFormData,
+  } = useABRepositories()
+  const toAddressBook = (peer) => {
+    ABFormData.id = peer.id
+    ABFormData.username = peer.username
+    ABFormData.hostname = peer.hostname
+    //匹配os
+    if (peer.os.indexOf('windows') !== -1) {
+      ABFormData.platform = ABPlatformList.find(item => item.label === 'Windows').value
+    } else if (peer.os.indexOf('linux') !== -1) {
+      ABFormData.platform = ABPlatformList.find(item => item.label === 'Linux').value
+    } else if (peer.os.indexOf('android') !== -1) {
+      ABFormData.platform = ABPlatformList.find(item => item.label === 'Android').value
+    } else if (peer.os.indexOf('mac') !== -1) {
+      ABFormData.platform = ABPlatformList.find(item => item.label === 'Mac OS').value
+    }
+    ABFormData.uuid = peer.uuid
+    ABFormVisible.value = true
+
+  }
+  const ABSubmit = async () => {
+    const res = await batchCreate(ABFormData).catch(_ => false)
+    if (res) {
+      ElMessage.success(T('OperationSuccess'))
+      ABFormVisible.value = false
+    }
+  }
+
+  const { allUsers, getAllUsers } = loadAllUsers()
+  const tagList = ref([])
+  const fetchTagListData = async (user_id) => {
+    const res = await fetchTagList({ user_id }).catch(_ => false)
+    if (res) {
+      const ls = []
+      res.data.list.map(item => {
+        if (!ls.includes(item.name)) {
+          ls.push(item.name)
+        }
+      })
+      tagList.value = ls.map(item => ({ name: item }))
+    }
+  }
+  onMounted(getAllUsers)
+  onMounted(fetchTagListData)
+
+  const multipleSelection = ref([])
+  const handleSelectionChange = (val) => {
+    multipleSelection.value = val
+  }
+  const toBatchDelete = async () => {
+    if (!multipleSelection.value.length) {
+      ElMessage.warning(T('PleaseSelectData'))
+      return false
+    }
+    const cf = await ElMessageBox.confirm(T('Confirm?', { param: T('BatchDelete') }), {
+      confirmButtonText: T('Confirm'),
+      cancelButtonText: T('Cancel'),
+      type: 'warning',
+    }).catch(_ => false)
+    if (!cf) {
+      return false
+    }
+
+    const res = await batchRemove({ row_ids: multipleSelection.value.map(i => i.row_id) }).catch(_ => false)
+    if (res) {
+      ElMessage.success(T('OperationSuccess'))
+      getList()
+    }
+  }
 </script>
 
 <style scoped lang="scss">
 .list-query .el-select {
-  --el-select-width: 160px;
+  --el-select-width: 180px;
 }
 
-.colors {
+.last_oline_time {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .colorbox {
-    width: 50px;
-    height: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
+}
 
 .dot {
-      width: 10px;
+  width: 6px;
-      height: 10px;
+  height: 6px;
   display: block;
   border-radius: 50%;
-    }
+  margin-left: 10px;
+
+  &.red {
+    background-color: red;
   }
 
+  &.green {
+    background-color: green;
+  }
 }
-
 </style>

src/views/tag/index.js

@@ -22,6 +22,10 @@ export function useRepositories () {
     // color 是十进制的数字,先转成16进制
     let hex = color.toString(16)
     console.log('hex', hex)
+    if (hex.length < 8) {
+      //前面补0
+      hex = '0'.repeat(8 - hex.length) + hex
+    }
     //前两位是透明度
     let alpha = hex.slice(0, 2)
     //后六位是颜色
@@ -51,6 +55,7 @@ export function useRepositories () {
     if (b.length === 1) {
       b = '0' + b
     }
+    console.log('to f color', alpha + r + g + b, parseInt(alpha + r + g + b, 16))
     return parseInt(alpha + r + g + b, 16)
   }