add share address book

src/api/address_book.js

@@ -52,4 +52,3 @@ export function shareByWebClient (data) {
     data,
   })
 }
-

src/api/address_book_collection.js

@@ -0,0 +1,39 @@
+import request from '@/utils/request'
+
+export function list (params) {
+  return request({
+    url: '/address_book_collection/list',
+    params,
+  })
+}
+
+export function detail (id) {
+  return request({
+    url: `/address_book_collection/detail/${id}`,
+  })
+}
+
+export function create (data) {
+  return request({
+    url: '/address_book_collection/create',
+    method: 'post',
+    data,
+  })
+}
+
+export function update (data) {
+  return request({
+    url: '/address_book_collection/update',
+    method: 'post',
+    data,
+  })
+}
+
+export function remove (data) {
+  return request({
+    url: '/address_book_collection/delete',
+    method: 'post',
+    data,
+  })
+}
+

src/api/address_book_collection_rule.js

@@ -0,0 +1,46 @@
+import request from '@/utils/request'
+
+export function list (params) {
+  return request({
+    url: '/address_book_collection_rule/list',
+    params,
+  })
+}
+
+export function detail (id) {
+  return request({
+    url: `/address_book_collection_rule/detail/${id}`,
+  })
+}
+
+export function create (data) {
+  return request({
+    url: '/address_book_collection_rule/create',
+    method: 'post',
+    data,
+  })
+}
+
+export function update (data) {
+  return request({
+    url: '/address_book_collection_rule/update',
+    method: 'post',
+    data,
+  })
+}
+
+export function remove (data) {
+  return request({
+    url: '/address_book_collection_rule/delete',
+    method: 'post',
+    data,
+  })
+}
+
+export function batchCreate (data) {
+  return request({
+    url: '/address_book_collection_rule/batchCreate',
+    method: 'post',
+    data,
+  })
+}

src/api/user.js

@@ -74,3 +74,11 @@ export function myOauth () {
     method: 'post',
   })
 }
+
+export function groupUsers (data) {
+  return request({
+    url: '/user/groupUsers',
+    method: 'post',
+    data
+  })
+}

src/components/icons/platform.vue

@@ -0,0 +1,33 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path v-if="props.name==='windows'" :fill="props.color||'currentColor'" d="m0 93.7 183.6-25.3v177.4H0V93.7zm0 324.6 183.6 25.3V268.4H0v149.9zm203.8 28L448 480V268.4H203.8v177.9zm0-380.6v180.1H448V32L203.8 65.7z"/>
+    <path v-if="props.name==='android'" :fill="props.color||'currentColor'"
+          d="M77 179a33 33 0 0 0-25 10 33 33 0 0 0-9 24v143a33 33 0 0 0 10 24 33 33 0 0 0 24 10c9 0 17-3 24-10a33 33 0 0 0 10-24V213c0-9-4-17-10-24a33 33 0 0 0-24-10zM352 51l24-44c1-3 1-5-2-6-3-2-5-1-7 2l-24 43a163 163 0 0 0-133 0L186 3c-2-3-4-4-7-2-2 1-3 3-1 6l23 44c-24 12-43 29-57 51a129 129 0 0 0-21 72h307c0-26-7-50-21-72a146 146 0 0 0-57-51zm-136 63a13 13 0 0 1-10 4 13 13 0 0 1-12-13c0-4 1-7 3-9 3-3 6-4 9-4s7 1 10 4c2 2 3 5 3 9s-1 7-3 9zm140 0a12 12 0 0 1-9 4c-4 0-7-1-9-4a12 12 0 0 1-4-9c0-4 1-7 4-9 2-3 5-4 9-4a12 12 0 0 1 9 4c2 2 3 5 3 9s-1 7-3 9zM124 407c0 10 4 19 11 26s15 10 26 10h24v76c0 9 4 17 10 24s15 10 24 10c10 0 18-3 25-10s10-15 10-24v-76h45v76c0 9 4 17 10 24s15 10 25 10c9 0 17-3 24-10s10-15 10-24v-76h25a35 35 0 0 0 25-10c7-7 11-16 11-26V185H124v222zm352-228a33 33 0 0 0-24 10 33 33 0 0 0-10 24v143a34 34 0 0 0 34 34c10 0 18-3 25-10s10-15 10-24V213c0-9-4-17-10-24a33 33 0 0 0-25-10z"/>
+
+    <path v-if="props.name==='linux'" :fill="props.color||'currentColor'"
+          d="M220.499 479.926c-74.052 0-136.663-53.729-147.853-118.13-.591-3.404-3.789-5.476-7.137-4.626l-50.683 12.879C3.107 373.027-2.913 366.27 1.39 354.971q26.627-69.911 87.656-131.908c30.862-31.352 41.876-59.308 43.591-106.328 1.715-47.02 40.427-84.661 87.862-84.661 47.435 0 86.149 37.641 87.864 84.661 1.715 47.02 12.729 74.976 43.591 106.328q61.027 61.997 87.656 131.908c4.303 11.299-1.717 18.056-13.436 15.078l-50.683-12.879c-3.348-.85-6.546 1.222-7.137 4.626-11.192 64.401-73.801 118.13-147.855 118.13Zm0-251.676c-1.591.049-3.181-.338-4.393-1.113l-50.912-32.578c-6.324-4.004-7.244-11.629-2.051-17.02 5.194-5.388 29.297-12.27 57.356-12.27 28.061 0 52.162 6.882 57.356 12.27 5.193 5.391 4.275 13.016-2.049 17.02l-50.912 32.578c-1.214.775-2.804 1.162-4.395 1.113Zm-44.627-7.73c-38.185 15.381-67.218 55.636-67.218 102.62 0 61.729 50.116 111.847 111.845 111.847s111.845-50.118 111.845-111.847c0-46.986-29.035-87.243-67.225-102.622-1.601-.647-4.082-.416-5.538.516l-27.383 17.52c-.03.021-.062.043-.083.064a20.762 20.762 0 0 1-5.705 2.473c-1.848.49-3.755.73-5.676.73h-.177l-.062-.011-.054.011h-.175c-1.921 0-3.83-.24-5.686-.73a20.7 20.7 0 0 1-5.697-2.473 3.83 3.83 0 0 0-.094-.064l-27.376-17.516c-1.456-.931-3.937-1.165-5.541-.518Z"/>
+    <path v-if="props.name==='mac'" :fill="props.color||'currentColor'"
+          d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/>
+
+  </svg>
+</template>
+
+<script setup>
+  const props = defineProps({
+    name: {
+      type: String,
+      required: true,
+      values: ['windows', 'android', 'mac', 'linux'],
+    },
+    color: {
+      type: String,
+      default: '',
+    },
+  })
+</script>
+
+<style scoped lang="scss">
+svg {
+  display: block;
+}
+</style>

src/router/index.js

@@ -54,6 +54,12 @@ export const asyncRoutes = [
         meta: { title: 'Info', icon: 'User' /*keepAlive: true*/ },
         component: () => import('@/views/my/info.vue'),
       },
+      {
+        path: 'address_book_collection',
+        name: 'MyAddressBookCollection',
+        meta: { title: 'AddressBookName', icon: 'Collection' /*keepAlive: true*/ },
+        component: () => import('@/views/my/address_book/collection.vue'),
+      },
       {
         path: 'address_book',
         name: 'MyAddressBookList',
@@ -105,7 +111,12 @@ export const asyncRoutes = [
         meta: { title: 'UserEdit', hide: true },
         component: () => import('@/views/user/edit.vue'),
       },
-
+      {
+        path: 'addressBookName',
+        name: 'UserAddressBookName',
+        meta: { title: 'AddressBookNameManage', icon: 'Collection' /*keepAlive: true*/ },
+        component: () => import('@/views/address_book/collection.vue'),
+      },
       {
         path: 'addressBook',
         name: 'UserAddressBook',

src/styles/style.scss

@@ -8,6 +8,7 @@ $sideBarWidth: 210px;
   --basicBlack: #000000;
   --basicWhite: #ffffff;
   --primaryColor: #409eff;
+  --tag-bg-color: #efefef;
 }
 
 .list-body {
@@ -37,7 +38,10 @@ $sideBarWidth: 210px;
     margin-right: 5px;
   }
 }
+
 html.dark {
   /* 自定义深色背景颜色 */
   //--el-bg-color: #626aef;
+  --tag-bg-color: #24252b;
+  --basicBlack: #fff;
 }

src/utils/i18n/en.json

@@ -399,5 +399,41 @@
   },
   "ToLocal": {
     "One": "To Local"
+  },
+  "AddressBookName": {
+    "One": "Address Book Name"
+  },
+  "AddRule": {
+    "One": "Add Rule"
+  },
+  "ShareRules": {
+    "One": "Share Rules"
+  },
+  "Rule": {
+    "One": "Rule"
+  },
+  "Read": {
+    "One": "Read"
+  },
+  "ReadWrite": {
+    "One": "Read And Write"
+  },
+  "FullControl": {
+    "One": "Full Control"
+  },
+  "ShareTo": {
+    "One": "Share To"
+  },
+  "MyAddressBook": {
+    "One": "My Address Book"
+  },
+  "AddressBook": {
+    "One": "Address Book"
+  },
+  "AddressBookNameManage": {
+    "One": "Address Book Names"
+  },
+  "MyAddressBookTips": {
+    "One": "\"My Address Book\" is the default of the system, cannot be modified or deleted"
   }
 }

src/utils/i18n/ko.json

@@ -385,5 +385,41 @@
   },
   "ToLocal": {
     "One": "로컬로"
+  },
+  "AddressBookName": {
+    "One": "주소록 이름"
+  },
+  "AddRule": {
+    "One": "규칙 추가"
+  },
+  "ShareRules": {
+    "One": "공유 규칙"
+  },
+  "Rule": {
+    "One": "규칙"
+  },
+  "Read": {
+    "One": "읽기"
+  },
+  "ReadWrite": {
+    "One": "읽기/쓰기"
+  },
+  "FullControl": {
+    "One": "전체 제어"
+  },
+  "ShareTo": {
+    "One": "공유 대상"
+  },
+  "MyAddressBook": {
+    "One": "내 주소록"
+  },
+  "AddressBook": {
+    "One": "주소록"
+  },
+  "AddressBookNameManage": {
+    "One": "주소록 이름 관리"
+  },
+  "MyAddressBookTips": {
+    "One": "\"내 주소록\"은 시스템의 기본값이며 수정하거나 삭제할 수 없습니다."
   }
 }

src/utils/i18n/ru.json

@@ -399,6 +399,42 @@
   },
   "ToLocal": {
     "One": "К локальному"
+  },
+  "AddressBookName": {
+    "One": "Имя адресной книги"
+  },
+  "AddRule": {
+    "One": "Добавить правило"
+  },
+  "ShareRules": {
+    "One": "Правила обмена"
+  },
+  "Rule": {
+    "One": "Правило"
+  },
+  "Read": {
+    "One": "Чтение"
+  },
+  "ReadWrite": {
+    "One": "Чтение и запись"
+  },
+  "FullControl": {
+    "One": "Полный доступ"
+  },
+  "ShareTo": {
+    "One": "Поделиться с"
+  },
+  "MyAddressBook": {
+    "One": "Моя адресная книга"
+  },
+  "AddressBook": {
+    "One": "Адресная книга"
+  },
+  "AddressBookNameManage": {
+    "One": "именами адресных книг"
+  },
+  "MyAddressBookTips": {
+    "One": "«Моя адресная книга» является стандартным для системы, не может быть изменена или удалена"
   }
 }
 

src/utils/i18n/zh_CN.json

@@ -385,5 +385,44 @@
   },
   "ToLocal": {
     "One": "到本地"
+  },
+  "AddressBookName": {
+    "One": "地址簿名称"
+  },
+  "AddressBookCollection": {
+    "One": "地址簿集"
+  },
+  "AddRule": {
+    "One": "添加规则"
+  },
+  "ShareRules": {
+    "One": "分享规则"
+  },
+  "Rule": {
+    "One": "规则"
+  },
+  "Read": {
+    "One": "读取"
+  },
+  "ReadWrite": {
+    "One": "读写"
+  },
+  "FullControl": {
+    "One": "完全控制"
+  },
+  "ShareTo": {
+    "One": "分享给"
+  },
+  "MyAddressBook": {
+    "One": "我的地址簿"
+  },
+  "AddressBook": {
+    "One": "地址簿"
+  },
+  "AddressBookNameManage": {
+    "One": "地址簿名称"
+  },
+  "MyAddressBookTips": {
+    "One": "\"我的地址簿\"是系统默认，不可修改、删除"
   }
 }

src/views/address_book/collection.js

@@ -0,0 +1,95 @@
+import { reactive, ref } from 'vue'
+import { create, list, remove, update } from '@/api/address_book_collection'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { T } from '@/utils/i18n'
+
+export function useRepositories (is_my) {
+  const listRes = reactive({
+    list: [], total: 0, loading: false,
+  })
+  const listQuery = reactive({
+    page: 1,
+    page_size: 10,
+    is_my,
+    name: null,
+    user_id: null,
+  })
+
+  const getList = async () => {
+    listRes.loading = true
+    const res = await list(listQuery).catch(_ => false)
+    listRes.loading = false
+    if (res) {
+      listRes.list = res.data.list
+      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(T('Confirm?', { param: T('Delete') }), {
+      confirmButtonText: T('Confirm'),
+      cancelButtonText: T('Cancel'),
+      type: 'warning',
+    }).catch(_ => false)
+    if (!cf) {
+      return false
+    }
+
+    const res = await remove({ id: row.id }).catch(_ => false)
+    if (res) {
+      ElMessage.success(T('OperationSuccess'))
+      getList()
+    }
+  }
+
+  const formVisible = ref(false)
+  const formData = reactive({
+    id: 0,
+    name: '',
+  })
+
+  const toEdit = (row) => {
+    formVisible.value = true
+    //将row中的数据赋值给formData
+    Object.keys(formData).forEach(key => {
+      formData[key] = row[key]
+    })
+
+  }
+  const toAdd = () => {
+    formVisible.value = true
+    //重置formData
+    Object.keys(formData).forEach(key => {
+      formData[key] = undefined
+    })
+
+  }
+  const submit = async () => {
+    const api = formData.id ? update : create
+    const res = await api(formData).catch(_ => false)
+    if (res) {
+      ElMessage.success(T('OperationSuccess'))
+      formVisible.value = false
+      getList()
+    }
+  }
+  return {
+    listRes,
+    listQuery,
+    getList,
+    handlerQuery,
+    del,
+    formVisible,
+    formData,
+    toEdit,
+    toAdd,
+    submit,
+  }
+}

src/views/address_book/collection.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <el-card class="list-query" shadow="hover">
+      <el-form inline label-width="80px">
+        <el-form-item :label="T('Owner')">
+          <el-select v-model="listQuery.user_id" clearable>
+            <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>
+          <el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
+          <el-button type="danger" @click="toAdd">{{ T('Add') }}</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>
+        <el-table-column prop="id" label="id" align="center"/>
+        <el-table-column prop="user_id" :label="T('Owner')" align="center">
+          <template #default="{row}">
+            <span v-if="row.user_id"> <el-tag>{{ allUsers?.find(u => u.id === row.user_id)?.username }}</el-tag> </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" :label="T('AddressBook')" align="center"/>
+        <el-table-column prop="created_at" :label="T('CreatedAt')" align="center"/>
+        <!--        <el-table-column prop="updated_at" label="更新时间" align="center"/>-->
+        <el-table-column :label="T('Actions')" align="center" class-name="table-actions" width="600" fixed="right">
+          <template #default="{row}">
+            <el-button type="primary" @click="showRules(row)">{{ T('ShareRules') }}</el-button>
+            <el-button @click="toEdit(row)">{{ T('Edit') }}</el-button>
+            <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>
+    <el-dialog v-model="formVisible" width="800" :title="!formData.id?T('Create') :T('Update') ">
+      <el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
+        <el-form-item :label="T('Owner')" prop="user_id" required>
+          <el-select v-model="formData.user_id">
+            <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="T('Name')" prop="name" required>
+          <el-input v-model="formData.name"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="formVisible = false">{{ T('Cancel') }}</el-button>
+          <el-button @click="submit" type="primary">{{ T('Submit') }}</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+    <el-dialog v-model="rulesVisible" :title="T('ShareRules')" destroy-on-close top="5vh" width="80%">
+      <Rule :collection="clickRow" :is_my="0"></Rule>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script setup>
+  import { T } from '@/utils/i18n'
+  import { ref } from 'vue'
+  import { useRepositories } from '@/views/address_book/collection'
+  import { onActivated, onMounted, watch } from 'vue'
+  import Rule from '@/views/address_book/rule.vue'
+  import { loadAllUsers } from '@/global'
+
+  const { allUsers, getAllUsers } = loadAllUsers()
+  getAllUsers()
+  const {
+    listRes,
+    listQuery,
+    getList,
+    handlerQuery,
+    del,
+    formVisible,
+    formData,
+    toEdit,
+    toAdd,
+    submit,
+  } = useRepositories()
+
+  listQuery.is_my = 0
+
+  onMounted(getList)
+  onActivated(getList)
+
+  watch(() => listQuery.page, getList)
+
+  watch(() => listQuery.page_size, handlerQuery)
+
+  const clickRow = ref({})
+  const rulesVisible = ref(false)
+  const showRules = (row) => {
+    clickRow.value = row
+    rulesVisible.value = true
+    console.log('showRules')
+  }
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/address_book/index.js

@@ -1,20 +1,40 @@
-import { reactive, ref } from 'vue'
+import { reactive, ref, watch } from 'vue'
 import { create, list, remove, update } from '@/api/address_book'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { T } from '@/utils/i18n'
+import { useRepositories as useCollectionRepositories } from '@/views/address_book/collection'
+import { useRepositories as useTagRepositories } from '@/views/tag/index'
+import { loadAllUsers } from '@/global'
+
+export function useRepositories (is_my = 0) {
+
+  const { allUsers, getAllUsers } = loadAllUsers()
+
+  const {
+    listRes: collectionListRes,
+    listQuery: collectionListQuery,
+    getList: getCollectionList,
+  } = useCollectionRepositories(is_my)
+  collectionListQuery.page_size = 9999
+  const {
+    listRes: tagListRes,
+    listQuery: tagListQuery,
+    getList: getTagList,
+  } = useTagRepositories(is_my)
+  tagListQuery.page_size = 9999
 
-export function useRepositories (user_id) {
   const listRes = reactive({
     list: [], total: 0, loading: false,
   })
   const listQuery = reactive({
     page: 1,
     page_size: 10,
-    is_my: 0,
+    is_my,
     id: null,
     user_id: null,
     username: null,
     hostname: null,
+    collection_id: null,
   })
 
   const getList = async () => {
@@ -52,10 +72,10 @@ export function useRepositories (user_id) {
   }
 
   const platformList = [
-    { label: 'Windows', value: 'Windows' },
+    { label: 'Windows', value: 'Windows', icon: 'windows' },
-    { label: 'Linux', value: 'Linux' },
+    { label: 'Linux', value: 'Linux', icon: 'linux' },
-    { label: 'Mac OS', value: 'Mac OS' },
+    { label: 'Mac OS', value: 'Mac OS', icon: 'mac' },
-    { label: 'Android', value: 'Android' },
+    { label: 'Android', value: 'Android', icon: 'android' },
   ]
   const formVisible = ref(false)
   const formData = reactive({
@@ -76,6 +96,7 @@ export function useRepositories (user_id) {
     'user_id': null,
     user_ids: [],
     'username': '',
+    collection_id: null,
   })
 
   const toEdit = (row) => {
@@ -84,6 +105,10 @@ export function useRepositories (user_id) {
     Object.keys(formData).forEach(key => {
       formData[key] = row[key]
     })
+    collectionListQuery.user_id = row.user_id
+    getCollectionList()
+    tagListQuery.collection_id = row.collection_id
+    getTagList()
 
   }
   const toAdd = () => {
@@ -126,6 +151,36 @@ export function useRepositories (user_id) {
     shareToWebClientForm.hash = row.hash
     shareToWebClientVisible.value = true
   }
+
+  const changeQueryUser = async (val) => {
+    tagListRes.list = []
+    listQuery.collection_id = null
+    if (!val) {
+      collectionListRes.list = []
+    } else {
+      collectionListQuery.user_id = val
+      getCollectionList()
+    }
+  }
+  const changeUser = async (val) => {
+    tagListRes.list = []
+    formData.tags = []
+    formData.collection_id = 0
+    if (!val) {
+      collectionListRes.list = []
+    } else {
+      collectionListQuery.user_id = val
+      getCollectionList()
+    }
+  }
+  const changeCollection = async (val) => {
+    tagListRes.list = []
+    formData.tags = []
+    tagListQuery.user_id = formData.user_id
+    tagListQuery.collection_id = val
+    getTagList()
+  }
+
   return {
     listRes,
     listQuery,
@@ -141,5 +196,20 @@ export function useRepositories (user_id) {
     shareToWebClientVisible,
     shareToWebClientForm,
     toShowShare,
+
+    collectionListQuery,
+    getCollectionList,
+    collectionListRes,
+
+    tagListQuery,
+    getTagList,
+    tagListRes,
+
+    allUsers,
+    getAllUsers,
+
+    changeQueryUser,
+    changeUser,
+    changeCollection,
   }
 }

src/views/address_book/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <el-card class="list-query" shadow="hover">
-      <el-form inline label-width="80px">
+      <el-form inline label-width="120px">
         <el-form-item :label="T('Owner')">
-          <el-select v-model="listQuery.user_id" clearable>
+          <el-select v-model="listQuery.user_id" clearable @change="changeQueryUser">
             <el-option
                 v-for="item in allUsers"
                 :key="item.id"
@@ -12,6 +12,12 @@
             ></el-option>
           </el-select>
         </el-form-item>
+        <el-form-item :label="T('AddressBookName')">
+          <el-select v-model="listQuery.collection_id" clearable>
+            <el-option :value="0" :label="T('MyAddressBook')"></el-option>
+            <el-option v-for="c in collectionListRes.list" :key="c.id" :label="c.name" :value="c.id"></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>
@@ -32,7 +38,13 @@
       <el-table :data="listRes.list" v-loading="listRes.loading" border>
         <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>
+            <div>
+              <PlatformIcons :name="platformList.find(p=>p.label===row.platform)?.icon" style="width: 20px;height: 20px;display: inline-block" color="var(--basicBlack)"/>
+              {{ row.id }}
+              <el-icon @click="handleClipboard(row.id, $event)">
+                <CopyDocument/>
+              </el-icon>
+            </div>
           </template>
         </el-table-column>
         <el-table-column :label="T('Owner')" align="center" width="200">
@@ -40,10 +52,14 @@
             <span v-if="row.user_id"> <el-tag>{{ allUsers?.find(u => u.id === row.user_id)?.username }}</el-tag> </span>
           </template>
         </el-table-column>
+        <el-table-column prop="collection_id" :label="T('AddressBookName')" align="center" width="150">
+          <template #default="{row}">
+            <span v-if="row.collection_id === 0">{{ T('MyAddressBook') }}</span>
+            <span v-else>{{ row.collection?.name }}</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"/>
         <el-table-column prop="tags" :label="T('Tags')" align="center"/>
         <!--        <el-table-column prop="created_at" label="创建时间" align="center"/>-->
         <!--        <el-table-column prop="updated_at" label="更新时间" align="center"/>-->
@@ -81,6 +97,12 @@
             ></el-option>
           </el-select>
         </el-form-item>
+        <el-form-item :label="T('AddressBookName')">
+          <el-select v-model="formData.collection_id" clearable @change="changeCollection">
+            <el-option :value="0" :label="T('MyAddressBook')"></el-option>
+            <el-option v-for="c in collectionListRes.list" :key="c.id" :label="c.name" :value="c.id"></el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item label="id" prop="id" required>
           <el-input v-model="formData.id"></el-input>
         </el-form-item>
@@ -116,7 +138,7 @@
         <el-form-item :label="T('Tags')" prop="tags">
           <el-select v-model="formData.tags" multiple>
             <el-option
-                v-for="item in tagList"
+                v-for="item in tagListRes.list"
                 :key="item.name"
                 :label="item.name"
                 :value="item.name"
@@ -157,33 +179,21 @@
 
 <script setup>
   import { onActivated, onMounted, reactive, ref, watch } from 'vue'
-  import { list as fetchTagList } from '@/api/tag'
-  import { loadAllUsers } from '@/global'
   import { useRepositories } from '@/views/address_book/index'
   import { toWebClientLink, getPeerSlat } from '@/utils/webclient'
   import { T } from '@/utils/i18n'
   import { useRoute } from 'vue-router'
-  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'
+  import PlatformIcons from '@/components/icons/platform.vue'
+
+
 
   const appStore = useAppStore()
   const route = useRoute()
-  const { allUsers, getAllUsers } = loadAllUsers()
+
-  getAllUsers()
-  const changeUser = (v) => {
-    formData.tags = []
-    fetchTagListData(v)
-  }
-  const tagList = ref([])
-  const fetchTagListData = async (user_id) => {
-    const res = await fetchTagList({ user_id }).catch(_ => false)
-    if (res) {
-      tagList.value = res.data.list
-    }
-  }
 
   const {
     listRes,
@@ -197,15 +207,24 @@
     toEdit,
     toAdd,
     submit,
-    shareToWebClientVisible,
+    // shareToWebClientVisible,
-    shareToWebClientForm,
+    // shareToWebClientForm,
-    toShowShare,
+    // toShowShare,
+    collectionListRes,
+
+    tagListRes,
+
+    allUsers, getAllUsers,
+
+    changeQueryUser,
+    changeUser,
+    changeCollection
   } = useRepositories()
 
   if (route.query?.user_id) {
     listQuery.user_id = parseInt(route.query.user_id)
   }
-
+  onMounted(getAllUsers)
   onMounted(getList)
   onActivated(getList)
 

src/views/address_book/rule.js

@@ -0,0 +1,112 @@
+import { computed, reactive, ref } from 'vue'
+import { create, list, remove, update } from '@/api/address_book_collection_rule'
+import { groupUsers } from '@/api/user'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { T } from '@/utils/i18n'
+import collection from '@element-plus/icons/lib/Collection'
+
+export function useRepositories (is_my) {
+  const listRes = reactive({
+    list: [], total: 0, loading: false,
+  })
+  const listQuery = reactive({
+    page: 1,
+    page_size: 10,
+    collection_id: null,
+    is_my,
+  })
+
+  const getList = async () => {
+    listRes.loading = true
+    const res = await list(listQuery).catch(_ => false)
+    listRes.loading = false
+    if (res) {
+      listRes.list = res.data.list
+      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(T('Confirm?', { param: T('Delete') }), {
+      confirmButtonText: T('Confirm'),
+      cancelButtonText: T('Cancel'),
+      type: 'warning',
+    }).catch(_ => false)
+    if (!cf) {
+      return false
+    }
+
+    const res = await remove({ id: row.id }).catch(_ => false)
+    if (res) {
+      ElMessage.success(T('OperationSuccess'))
+      getList()
+    }
+  }
+
+  const rules = computed(_ => [
+    { label: T('Read'), value: 1 },
+    { label: T('ReadWrite'), value: 2 },
+    { label: T('FullControl'), value: 3 },
+  ])
+
+  const formVisible = ref(false)
+  const formData = reactive({
+    id: 0,
+    collection_id: null,
+    type: 1,
+    rule: 1,
+    to_id: null,
+    user_id: null,
+  })
+
+  const toEdit = (row) => {
+    formVisible.value = true
+    //将row中的数据赋值给formData
+    Object.keys(formData).forEach(key => {
+      formData[key] = row[key]
+    })
+
+  }
+  const toAdd = () => {
+    formVisible.value = true
+
+  }
+  const submit = async () => {
+    const api = formData.id ? update : create
+    const res = await api(formData).catch(_ => false)
+    if (res) {
+      ElMessage.success(T('OperationSuccess'))
+      formVisible.value = false
+      getList()
+    }
+  }
+  const groupUsersList = ref([])
+  const getGroupUsers = async () => {
+    const res = await groupUsers({ user_id: formData.user_id }).catch(_ => false)
+    if (res) {
+      groupUsersList.value = res.data
+    }
+  }
+  return {
+    listRes,
+    listQuery,
+    getList,
+    handlerQuery,
+    del,
+    formVisible,
+    formData,
+    toEdit,
+    toAdd,
+    submit,
+    rules,
+    groupUsersList,
+    getGroupUsers,
+  }
+}

src/views/address_book/rule.vue

@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <el-card class="list-query" shadow="hover">
+      <el-form inline label-width="80px">
+        <el-form-item>
+          <el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
+          <el-button type="danger" @click="toAdd">{{ T('Add') }}</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>
+        <el-table-column prop="rule" :label="T('Rule')" align="center">
+          <template #default="{row}">
+            <div>
+              {{ rules.find(r => r.value === row.rule)?.label }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="to_id" :label="T('ShareTo')" align="center">
+          <template #default="{row}">
+            <div v-if="row.type===1">
+              {{ groupUsersList.find(u => u.id === row.to_id)?.username }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="created_at" :label="T('CreatedAt')" align="center"/>
+        <!--        <el-table-column prop="updated_at" label="更新时间" align="center"/>-->
+        <el-table-column :label="T('Actions')" align="center" class-name="table-actions" width="300" fixed="right">
+          <template #default="{row}">
+            <el-button @click="toEdit(row)">{{ T('Edit') }}</el-button>
+            <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>
+    <el-dialog v-model="formVisible" width="800" :title="!formData.id?T('Create') :T('Update') " :close-on-click-modal="false">
+      <el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
+        <el-form-item :label="T('AddressBookName')">
+          {{ props.collection.name }}
+        </el-form-item>
+        <el-form-item :label="T('Rule')" prop="rule" required>
+          <el-radio-group v-model="formData.rule">
+            <el-radio v-for="item in rules" :key="item.value" :label="item.value">
+              {{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item :label="T('ShareTo')" prop="to_id" required>
+<!--          <el-input-number v-model="formData.to_id"></el-input-number>-->
+          <el-select v-model="formData.to_id">
+            <el-option
+                v-for="item in groupUsersList"
+                :key="item.id"
+                :label="item.username"
+                :value="item.id"
+                :disabled="!item.status"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="formVisible = false">{{ T('Cancel') }}</el-button>
+          <el-button @click="submit" type="primary">{{ T('Submit') }}</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+
+  import { T } from '@/utils/i18n'
+  import { useRepositories } from '@/views/address_book/rule'
+  import { onActivated, onMounted, watch } from 'vue'
+
+  const props = defineProps({
+    collection: {
+      type: Object,
+      required: true,
+    },
+    is_my: {
+      type: Number,
+      default: 0,
+    },
+  })
+  const {
+    listRes,
+    listQuery,
+    getList,
+    handlerQuery,
+    del,
+    formVisible,
+    formData,
+    toEdit,
+    toAdd,
+    submit,
+    rules,
+    groupUsersList,
+    getGroupUsers,
+  } = useRepositories(props.is_my)
+
+  formData.collection_id = props.collection.id
+  formData.user_id = props.collection.user_id
+  listQuery.collection_id = props.collection.id
+
+  onMounted(getGroupUsers)
+  onMounted(getList)
+  onActivated(getList)
+
+  watch(() => listQuery.page, getList)
+
+  watch(() => listQuery.page_size, handlerQuery)
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/my/address_book/collection.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <el-card class="list-query" shadow="hover">
+      <el-form inline label-width="80px">
+        <el-form-item>
+          <el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
+          <el-button type="danger" @click="toAdd">{{ T('Add') }}</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card class="list-body" shadow="hover">
+      <el-tag type="danger" effect="light" style="margin-bottom: 10px">{{T('MyAddressBookTips')}}</el-tag>
+      <el-table :data="listRes.list" v-loading="listRes.loading" border>
+        <!--        <el-table-column prop="id" label="id" align="center"/>-->
+        <el-table-column prop="name" :label="T('Name')" align="center"/>
+        <el-table-column prop="created_at" :label="T('CreatedAt')" align="center"/>
+        <!--        <el-table-column prop="updated_at" label="更新时间" align="center"/>-->
+        <el-table-column :label="T('Actions')" align="center" class-name="table-actions" width="600" fixed="right">
+          <template #default="{row}">
+            <el-button type="primary" @click="showRules(row)">{{ T('ShareRules') }}</el-button>
+            <el-button @click="toEdit(row)">{{ T('Edit') }}</el-button>
+            <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>
+    <el-dialog v-model="formVisible" width="800" :title="!formData.id?T('Create') :T('Update') ">
+      <el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
+        <el-form-item :label="T('Name')" prop="name" required>
+          <el-input v-model="formData.name"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="formVisible = false">{{ T('Cancel') }}</el-button>
+          <el-button @click="submit" type="primary">{{ T('Submit') }}</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+    <el-dialog v-model="rulesVisible" :title="T('ShareRules')" destroy-on-close top="5vh" width="80%">
+      <Rule :collection="clickRow" :is_my="1"></Rule>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script setup>
+  import { T } from '@/utils/i18n'
+  import { ref } from 'vue'
+  import { useRepositories } from '@/views/address_book/collection'
+  import { onActivated, onMounted, watch } from 'vue'
+  import Rule from '@/views/address_book/rule.vue'
+
+  const {
+    listRes,
+    listQuery,
+    getList,
+    handlerQuery,
+    del,
+    formVisible,
+    formData,
+    toEdit,
+    toAdd,
+    submit,
+  } = useRepositories(1)
+
+  onMounted(getList)
+
+  watch(() => listQuery.page, getList)
+
+  watch(() => listQuery.page_size, handlerQuery)
+
+  const clickRow = ref({})
+  const rulesVisible = ref(false)
+  const showRules = (row) => {
+    clickRow.value = row
+    rulesVisible.value = true
+  }
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/my/address_book/index.vue

@@ -1,7 +1,13 @@
 <template>
   <div>
     <el-card class="list-query" shadow="hover">
-      <el-form inline label-width="80px">
+      <el-form inline label-width="120px">
+        <el-form-item :label="T('AddressBookName')">
+          <el-select v-model="listQuery.collection_id" clearable>
+            <el-option :value="0" :label="T('MyAddressBook')"></el-option>
+            <el-option v-for="c in collectionListRes.list" :key="c.id" :label="c.name" :value="c.id"></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>
@@ -22,12 +28,24 @@
       <el-table :data="listRes.list" v-loading="listRes.loading" border>
         <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>
+            <div>
+              <PlatformIcons :name="platformList.find(p=>p.label===row.platform)?.icon" style="width: 20px;height: 20px;display: inline-block" color="var(--basicBlack)"/>
+              {{ row.id }}
+              <el-icon @click="handleClipboard(row.id, $event)">
+                <CopyDocument/>
+              </el-icon>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="collection_id" :label="T('AddressBookName')" align="center" width="150">
+          <template #default="{row}">
+            <span v-if="row.collection_id === 0">{{ T('MyAddressBook') }}</span>
+            <span v-else>{{ collectionListRes.list.find(c => c.id === row.collection_id)?.name }}</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"/>
+        <!--        <el-table-column prop="platform" :label="T('Platform')" align="center" width="120"/>-->
         <el-table-column prop="tags" :label="T('Tags')" align="center"/>
         <!--        <el-table-column prop="created_at" label="创建时间" align="center"/>-->
         <!--        <el-table-column prop="updated_at" label="更新时间" align="center"/>-->
@@ -55,6 +73,12 @@
     </el-card>
     <el-dialog v-model="formVisible" width="800" :title="!formData.row_id?T('Create') :T('Update') ">
       <el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
+        <el-form-item :label="T('AddressBookName')" required prop="collection_id">
+          <el-select v-model="formData.collection_id" clearable @change="changeCollection">
+            <el-option :value="0" :label="T('MyAddressBook')"></el-option>
+            <el-option v-for="c in collectionListRes.list" :key="c.id" :label="c.name" :value="c.id"></el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item label="id" prop="id" required>
           <el-input v-model="formData.id"></el-input>
         </el-form-item>
@@ -90,7 +114,7 @@
         <el-form-item :label="T('Tags')" prop="tags">
           <el-select v-model="formData.tags" multiple>
             <el-option
-                v-for="item in tagList"
+                v-for="item in tagListRes.list"
                 :key="item.name"
                 :label="item.name"
                 :value="item.name"
@@ -130,7 +154,7 @@
 </template>
 
 <script setup>
-  import { onActivated, onMounted, reactive, ref, watch } from 'vue'
+  import { onActivated, onMounted, ref, watch } from 'vue'
   import { list as fetchTagList } from '@/api/tag'
   import { useRepositories } from '@/views/address_book'
   import { toWebClientLink } from '@/utils/webclient'
@@ -140,16 +164,10 @@
   import { connectByClient } from '@/utils/peer'
   import { handleClipboard } from '@/utils/clipboard'
   import { CopyDocument } from '@element-plus/icons'
+  import PlatformIcons from '@/components/icons/platform.vue'
 
+  const is_my = 1
   const appStore = useAppStore()
-  const tagList = ref([])
-  const fetchTagListData = async () => {
-    const res = await fetchTagList({ is_my: 1 }).catch(_ => false)
-    if (res) {
-      tagList.value = res.data.list
-    }
-  }
-  fetchTagListData()
 
   const {
     listRes,
@@ -166,17 +184,20 @@
     shareToWebClientVisible,
     shareToWebClientForm,
     toShowShare,
-  } = useRepositories()
+    // collectionListQuery,
-
+    collectionListRes,
-  listQuery.is_my = 1
+    getCollectionList,
+    tagListRes,
+    changeCollection,
+  } = useRepositories(is_my)
 
+  onMounted(getCollectionList)
   onMounted(getList)
   onActivated(getList)
 
   watch(() => listQuery.page, getList)
 
   watch(() => listQuery.page_size, handlerQuery)
-
 </script>
 
 <style scoped lang="scss">

src/views/my/address_book/indexv2.vue

@@ -0,0 +1,313 @@
+<template>
+  <el-container class="address-book-con">
+    <el-aside width="200px" class="aside">
+      <el-select style="width: 100%;" v-model="listQuery.collection_id" filterable>
+        <el-option :value="0" :label="T('MyAddressBook')"></el-option>
+        <el-option v-for="c in collectionListRes.list" :key="c.id" :label="c.name" :value="c.id"></el-option>
+      </el-select>
+      <div class="aside-tags">
+        <div class="top" style="width: 100%">标签</div>
+        <div v-for="t in tagListRes.list"
+             :key="t.id" class="tag"
+             :class="{checked: checkedTags.includes(t.name)}"
+             :style="{backgroundColor: checkedTags.includes(t.name)?t.color:''}"
+             @click="toggleTag(t)"
+        >
+          <span class="dot" :style="{background:checkedTags.includes(t.name)?'#fff':t.color}"></span> <span>{{ t.name }}</span>
+        </div>
+
+      </div>
+    </el-aside>
+
+    <el-main class="con">
+      <el-card class="list-query" shadow="hover">
+        <el-form inline label-width="80px">
+<!--          <el-form-item :label="T('Name')">
+            <el-select v-model="listQuery.collection_id" clearable>
+              <el-option :value="0" :label="T('MyAddressBook')"></el-option>
+              <el-option v-for="c in collectionListRes.list" :key="c.id" :label="c.name" :value="c.id"></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>
+          </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="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="collection_id" :label="T('Name')" align="center" width="150">
+            <template #default="{row}">
+              <span v-if="row.collection_id === 0">{{ T('MyAddressBook') }}</span>
+              <span v-else>{{ collectionListRes.list.find(c => c.id === row.collection_id)?.name }}</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"/>
+          <el-table-column prop="tags" :label="T('Tags')" align="center"/>
+          <!--        <el-table-column prop="created_at" label="创建时间" align="center"/>-->
+          <!--        <el-table-column prop="updated_at" label="更新时间" align="center"/>-->
+          <el-table-column prop="alias" :label="T('Alias')" align="center" width="150"/>
+          <el-table-column prop="hash" :label="T('Hash')" align="center" width="150" show-overflow-tooltip/>
+          <el-table-column :label="T('Actions')" align="center" class-name="table-actions" width="600" fixed="right">
+            <template #default="{row}">
+              <el-button type="success" @click="connectByClient(row.id)">{{ T('Link') }}</el-button>
+              <el-button v-if="appStore.setting.appConfig.web_client" type="success" @click="toWebClientLink(row)">Web Client</el-button>
+              <el-button v-if="appStore.setting.appConfig.web_client" type="primary" @click="toShowShare(row)">{{ T('ShareByWebClient') }}</el-button>
+              <el-button @click="toEdit(row)">{{ T('Edit') }}</el-button>
+              <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>
+    </el-main>
+
+
+    <el-dialog v-model="formVisible" width="800" :title="!formData.row_id?T('Create') :T('Update') ">
+      <el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
+        <el-form-item label="id" prop="id" required>
+          <el-input v-model="formData.id"></el-input>
+        </el-form-item>
+        <el-form-item :label="T('Username')" prop="username">
+          <el-input v-model="formData.username"></el-input>
+        </el-form-item>
+        <el-form-item :label="T('Alias')" prop="alias">
+          <el-input v-model="formData.alias"></el-input>
+        </el-form-item>
+        <el-form-item :label="T('Hash')" prop="hash">
+          <el-input v-model="formData.hash"></el-input>
+        </el-form-item>
+        <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-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 :label="T('Platform')" prop="platform">
+          <el-select v-model="formData.platform">
+            <el-option
+                v-for="item in platformList"
+                :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="formData.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 label="强制中继" prop="forceAlwaysRelay" required>
+                 <el-switch v-model="formData.forceAlwaysRelay"></el-switch>
+               </el-form-item>
+          <el-form-item label="在线" prop="online">
+                 <el-switch v-model="formData.online"></el-switch>
+               </el-form-item>
+               <el-form-item label="rdp端口" prop="rdpPort">
+                 <el-input v-model="formData.rdpPort"></el-input>
+               </el-form-item>
+               <el-form-item label="rdp用户名" prop="rdpUsername">
+                 <el-input v-model="formData.rdpUsername"></el-input>
+               </el-form-item>
+               <el-form-item label="同一服务器" prop="sameServer">
+                 <el-switch v-model="formData.sameServer"></el-switch>
+               </el-form-item>-->
+
+
+        <el-form-item>
+          <el-button @click="formVisible = false">{{ T('Cancel') }}</el-button>
+          <el-button @click="submit" type="primary">{{ T('Submit') }}</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+    <el-dialog v-model="shareToWebClientVisible" width="900" :close-on-click-modal="false">
+      <shareByWebClient :id="shareToWebClientForm.id"
+                        :hash="shareToWebClientForm.hash"
+                        @cancel="shareToWebClientVisible=false"
+                        @success=""/>
+    </el-dialog>
+  </el-container>
+</template>
+
+<script setup>
+  import { onActivated, onMounted, reactive, ref, watch } from 'vue'
+  import { list as fetchTagList } from '@/api/tag'
+  import { useRepositories } from '@/views/address_book'
+  import { useRepositories as useCollectionRepositories } from '@/views/address_book/collection'
+  import { useRepositories as useTagRepositories } from '@/views/tag/index'
+  import { toWebClientLink } from '@/utils/webclient'
+  import { T } from '@/utils/i18n'
+  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([])
+  const fetchTagListData = async () => {
+    const res = await fetchTagList({ is_my: 1 }).catch(_ => false)
+    if (res) {
+      tagList.value = res.data.list
+    }
+  }
+  fetchTagListData()
+
+  const {
+    listRes,
+    listQuery,
+    getList,
+    handlerQuery,
+    del,
+    formVisible,
+    platformList,
+    formData,
+    toEdit,
+    toAdd,
+    submit,
+    shareToWebClientVisible,
+    shareToWebClientForm,
+    toShowShare,
+  } = useRepositories()
+
+  listQuery.is_my = 1
+
+  onMounted(getList)
+  onActivated(getList)
+
+  watch(() => listQuery.page, getList)
+
+  watch(() => listQuery.page_size, handlerQuery)
+  const {
+    listRes: collectionListRes,
+    listQuery: collectionListQuery,
+    getList: getCollectionList,
+  } = useCollectionRepositories()
+  collectionListQuery.is_my = 1
+  collectionListQuery.page_size = 999
+  onMounted(getCollectionList)
+
+  const alert = (msg) => {
+    window.alert(msg)
+  }
+
+  const {
+    listRes: tagListRes,
+    listQuery: tagListQuery,
+    getList: getTagList,
+  } = useTagRepositories()
+  tagListQuery.is_my = 1
+  tagListQuery.page_size = 999
+  onMounted(getTagList)
+  const checkedTags = ref(['111'])
+  const toggleTag = async (tag) => {
+    if (checkedTags.value.includes(tag.name)) {
+      checkedTags.value = checkedTags.value.filter(t => t !== tag.name)
+    } else {
+      checkedTags.value.push(tag.name)
+    }
+    // listQuery.tags = checkedTags.value.join(',')
+    // getList()
+  }
+</script>
+
+<style scoped lang="scss">
+.app-main {
+  border-left: 0;
+}
+
+.address-book-con {
+  height: calc(100vh - 120px);
+
+  .aside {
+    .aside-tags {
+      margin-top: 15px;
+      border: 1px solid #eee;
+      border-radius: 5px;
+      min-height: calc(100vh - 200px);
+      padding: 10px;
+      display: flex;
+      flex-wrap: wrap;
+      align-content: start;
+
+      .tag {
+        margin-right: 10px;
+        margin-bottom: 5px;
+        padding: 0 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+        height: 28px;
+        background-color: var(--tag-bg-color);
+        font-size: 14px;
+        border-radius: 8px;
+        cursor: pointer;
+
+        &.checked {
+          color: #fff;
+        }
+
+        span {
+          display: block;
+        }
+
+        .dot {
+          width: 8px;
+          height: 8px;
+          display: block;
+          border-radius: 50%;
+          line-height: 1;
+          font-size: 12px;
+          margin-right: 6px;
+        }
+
+      }
+    }
+  }
+
+  .con {
+    padding-top: 0;
+  }
+
+  .name-menu {
+    height: calc(100vh - 75px);
+  }
+
+}
+</style>

src/views/my/tag/index.vue

@@ -1,7 +1,13 @@
 <template>
   <div>
     <el-card class="list-query" shadow="hover">
-      <el-form inline label-width="80px">
+      <el-form inline label-width="120px">
+        <el-form-item :label="T('AddressBookName')">
+          <el-select v-model="listQuery.collection_id" clearable>
+            <el-option :value="0" :label="T('MyAddressBook')"></el-option>
+            <el-option v-for="c in collectionListRes.list" :key="c.id" :label="c.name" :value="c.id"></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>
@@ -11,15 +17,17 @@
     <el-card class="list-body" shadow="hover">
       <el-table :data="listRes.list" v-loading="listRes.loading" border>
         <el-table-column prop="id" label="id" align="center"/>
+        <el-table-column prop="collection_id" :label="T('AddressBook')" align="center" width="150">
+          <template #default="{row}">
+            <span v-if="row.collection_id === 0">{{ T('MyAddressBook') }}</span>
+            <span v-else>{{ collectionListRes.list.find(c => c.id === row.collection_id)?.name }}</span>
+          </template>
+        </el-table-column>
         <el-table-column prop="name" :label="T('Name')" align="center"/>
         <el-table-column prop="color" :label="T('Color')" align="center">
           <template #default="{row}">
             <div class="colors">
-              <div style="background-color: #efeff2" class="colorbox">
+              <div style="background-color: var(--tag-bg-color)" class="colorbox">
-                <div :style="{backgroundColor: row.color}" class="dot">
-                </div>
-              </div>
-              <div style="background-color: #24252b" class="colorbox">
                 <div :style="{backgroundColor: row.color}" class="dot">
                 </div>
               </div>
@@ -47,18 +55,19 @@
     </el-card>
     <el-dialog v-model="formVisible" :title="!formData.id?T('Create'):T('Update')" width="800">
       <el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
+        <el-form-item :label="T('AddressBookName')">
+          <el-select v-model="formData.collection_id" clearable>
+            <el-option :value="0" :label="T('MyAddressBook')"></el-option>
+            <el-option v-for="c in collectionListRes.list" :key="c.id" :label="c.name" :value="c.id"></el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item :label="T('Name')" prop="name" required>
           <el-input v-model="formData.name"></el-input>
         </el-form-item>
         <el-form-item :label="T('Color')" prop="color" required>
           <el-color-picker v-model="formData.color" show-alpha @active-change="activeChange"></el-color-picker>
-          <br>
           <div class="colors">
-            <div style="background-color: #efeff2" class="colorbox">
+            <div style="background-color: var(--tag-bg-color)" class="colorbox">
-              <div :style="{backgroundColor: currentColor}" class="dot">
-              </div>
-            </div>
-            <div style="background-color: #24252b" class="colorbox">
               <div :style="{backgroundColor: currentColor}" class="dot">
               </div>
             </div>
@@ -77,6 +86,7 @@
   import { onMounted, watch, onActivated } from 'vue'
   import { useRepositories } from '@/views/tag'
   import { T } from '@/utils/i18n'
+  import { useRepositories as useCollectionRepositories } from '@/views/address_book/collection'
 
   const {
     listRes,
@@ -102,6 +112,15 @@
 
   watch(() => listQuery.page_size, handlerQuery)
 
+  const {
+    listRes: collectionListRes,
+    listQuery: collectionListQuery,
+    getList: getCollectionList,
+  } = useCollectionRepositories()
+  collectionListQuery.is_my = 1
+  collectionListQuery.page_size = 999
+  onMounted(getCollectionList)
+
 </script>
 
 <style scoped lang="scss">

src/views/tag/index.js

@@ -3,8 +3,18 @@ import { create, list, remove, update } from '@/api/tag'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useRoute } from 'vue-router'
 import { T } from '@/utils/i18n'
+import { loadAllUsers } from '@/global'
+import { useRepositories as useCollectionRepositories } from '@/views/address_book/collection'
 
-export function useRepositories () {
+export function useRepositories (is_my = 0) {
+  const { allUsers, getAllUsers } = loadAllUsers()
+
+  const {
+    listRes: collectionListRes,
+    listQuery: collectionListQuery,
+    getList: getCollectionList,
+  } = useCollectionRepositories(is_my)
+  collectionListQuery.page_size = 9999
   //获取query
   const route = useRoute()
   const user_id = route.query?.user_id
@@ -14,8 +24,9 @@ export function useRepositories () {
   const listQuery = reactive({
     page: 1,
     page_size: 10,
-    is_my: 0,
+    is_my,
     user_id: user_id ? parseInt(user_id) : null,
+    collection_id: null,
   })
 
   const flutterColor2rgba = (color) => {
@@ -108,6 +119,7 @@ export function useRepositories () {
     name: '',
     color: 0,
     user_id: 0,
+    collection_id: 0,
   })
   const currentColor = ref('')
   const activeChange = (c) => {
@@ -121,16 +133,24 @@ export function useRepositories () {
     formData.name = row.name
     formData.color = row.color
     formData.user_id = row.user_id
+    formData.collection_id = row.collection_id
+    collectionListQuery.user_id = row.user_id
+    getCollectionList()
   }
   const toAdd = () => {
     formVisible.value = true
     formData.id = 0
     formData.name = ''
-    formData.color = 0
+    formData.color = ''
-    formData.user_id = 0
+    formData.user_id = null
+    formData.collection_id = 0
   }
   const submit = async () => {
     console.log(formData)
+    if (!formData.color) {
+      ElMessage.error('请选择颜色')
+      return
+    }
     const api = formData.id ? update : create
     const data = {
       ...formData,
@@ -144,6 +164,25 @@ export function useRepositories () {
       getList()
     }
   }
+
+  const changeQueryUser = async (val) => {
+    listQuery.collection_id = null
+    if (!val) {
+      collectionListRes.list = []
+    } else {
+      collectionListQuery.user_id = val
+      getCollectionList()
+    }
+  }
+  const changeUser = async (val) => {
+    formData.collection_id = 0
+    if (!val) {
+      collectionListRes.list = []
+    } else {
+      collectionListQuery.user_id = val
+      getCollectionList()
+    }
+  }
   return {
     listRes,
     listQuery,
@@ -157,5 +196,10 @@ export function useRepositories () {
     submit,
     activeChange,
     currentColor,
+
+    collectionListRes,
+    allUsers, getAllUsers,
+    changeQueryUser,
+    changeUser,
   }
 }

src/views/tag/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <el-card class="list-query" shadow="hover">
-      <el-form inline label-width="80px">
+      <el-form inline label-width="120px">
         <el-form-item :label="T('Owner')">
-          <el-select v-model="listQuery.user_id" clearable>
+          <el-select v-model="listQuery.user_id" clearable @change="changeQueryUser">
             <el-option
                 v-for="item in allUsers"
                 :key="item.id"
@@ -12,6 +12,12 @@
             ></el-option>
           </el-select>
         </el-form-item>
+        <el-form-item :label="T('AddressBookName')">
+          <el-select v-model="listQuery.collection_id" clearable>
+            <el-option :value="0" :label="T('MyAddressBook')"></el-option>
+            <el-option v-for="c in collectionListRes.list" :key="c.id" :label="c.name" :value="c.id"></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>
@@ -26,15 +32,17 @@
             <span v-if="row.user_id"> <el-tag>{{ allUsers?.find(u => u.id === row.user_id)?.username }}</el-tag> </span>
           </template>
         </el-table-column>
+        <el-table-column prop="collection_id" :label="T('AddressBookName')" align="center" width="150">
+          <template #default="{row}">
+            <span v-if="row.collection_id === 0">{{ T('MyAddressBook') }}</span>
+            <span v-else>{{ row.collection?.name }}</span>
+          </template>
+        </el-table-column>
         <el-table-column prop="name" :label="T('Name')" align="center"/>
         <el-table-column prop="color" :label="T('Color')" align="center">
           <template #default="{row}">
             <div class="colors">
-              <div style="background-color: #efeff2" class="colorbox">
+              <div style="background-color: var(--tag-bg-color)" class="colorbox">
-                <div :style="{backgroundColor: row.color}" class="dot">
-                </div>
-              </div>
-              <div style="background-color: #24252b" class="colorbox">
                 <div :style="{backgroundColor: row.color}" class="dot">
                 </div>
               </div>
@@ -43,7 +51,7 @@
         </el-table-column>
         <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="操作" align="center">
+        <el-table-column :label="T('Actions')" align="center" width="250">
           <template #default="{row}">
             <el-button @click="toEdit(row)">{{ T('Edit') }}</el-button>
             <el-button type="danger" @click="del(row)">{{ T('Delete') }}</el-button>
@@ -62,25 +70,8 @@
     </el-card>
     <el-dialog v-model="formVisible" :title="!formData.id?T('Create'):T('Update')" width="800">
       <el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
-        <el-form-item :label="T('Name')" prop="name" required>
-          <el-input v-model="formData.name"></el-input>
-        </el-form-item>
-        <el-form-item :label="T('Color')" prop="color" required>
-          <el-color-picker v-model="formData.color" show-alpha @active-change="activeChange"></el-color-picker>
-          <br>
-          <div class="colors">
-            <div style="background-color: #efeff2" class="colorbox">
-              <div :style="{backgroundColor: currentColor}" class="dot">
-              </div>
-            </div>
-            <div style="background-color: #24252b" class="colorbox">
-              <div :style="{backgroundColor: currentColor}" class="dot">
-              </div>
-            </div>
-          </div>
-        </el-form-item>
         <el-form-item :label="T('Owner')" prop="user_id" required>
-          <el-select v-model="formData.user_id">
+          <el-select v-model="formData.user_id" @change="changeUser">
             <el-option
                 v-for="item in allUsers"
                 :key="item.id"
@@ -89,6 +80,24 @@
             ></el-option>
           </el-select>
         </el-form-item>
+        <el-form-item :label="T('AddressBookName')" prop="collection_id" required>
+          <el-select v-model="formData.collection_id" clearable>
+            <el-option :value="0" :label="T('MyAddressBook')"></el-option>
+            <el-option v-for="c in collectionListRes.list" :key="c.id" :label="c.name" :value="c.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="T('Name')" prop="name" required>
+          <el-input v-model="formData.name"></el-input>
+        </el-form-item>
+        <el-form-item :label="T('Color')" prop="color" required>
+          <el-color-picker v-model="formData.color" show-alpha @active-change="activeChange"></el-color-picker>
+          <div class="colors">
+            <div style="background-color: var(--tag-bg-color)" class="colorbox">
+              <div :style="{backgroundColor: currentColor}" class="dot">
+              </div>
+            </div>
+          </div>
+        </el-form-item>
         <el-form-item>
           <el-button @click="formVisible = false">{{ T('Cancel') }}</el-button>
           <el-button @click="submit" type="primary">{{ T('Submit') }}</el-button>
@@ -100,12 +109,9 @@
 
 <script setup>
   import { onMounted, reactive, watch, ref, onActivated } from 'vue'
-  import { loadAllUsers } from '@/global'
   import { useRepositories } from '@/views/tag/index'
   import { T } from '@/utils/i18n'
 
-  const { allUsers, getAllUsers } = loadAllUsers()
-  getAllUsers()
   const {
     listRes,
     listQuery,
@@ -119,8 +125,12 @@
     submit,
     activeChange,
     currentColor,
+    collectionListRes,
+    allUsers, getAllUsers,
+    changeQueryUser,
+    changeUser,
   } = useRepositories()
-
+  onMounted(getAllUsers)
   onMounted(getList)
   onActivated(getList)