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/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 {
@@ -29,15 +30,18 @@ $sideBarWidth: 210px;
   }
 }
 
-.table-actions{
-  .el-button{
+.table-actions {
+  .el-button {
     margin-top: 5px;
     margin-bottom: 5px;
     margin-left: 5px;
     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: 'Linux', value: 'Linux' },
-    { label: 'Mac OS', value: 'Mac OS' },
-    { label: 'Android', value: 'Android' },
+    { label: 'Windows', value: 'Windows', icon: 'windows' },
+    { label: 'Linux', value: 'Linux', icon: 'linux' },
+    { label: 'Mac OS', value: 'Mac OS', icon: 'mac' },
+    { 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"
@@ -146,44 +168,32 @@
         </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-dialog v-model="shareToWebClientVisible" width="900" :close-on-click-modal="false">
+          <shareByWebClient :id="shareToWebClientForm.id"
+                            :hash="shareToWebClientForm.hash"
+                            @cancel="shareToWebClientVisible=false"
+                            @success=""/>
+        </el-dialog>-->
   </div>
 </template>
 
 <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,
-    shareToWebClientForm,
-    toShowShare,
+    // shareToWebClientVisible,
+    // shareToWebClientForm,
+    // 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()
-
-  listQuery.is_my = 1
-
+    // collectionListQuery,
+    collectionListRes,
+    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="{backgroundColor: row.color}" class="dot">
-                </div>
-              </div>
-              <div style="background-color: #24252b" class="colorbox">
+              <div style="background-color: var(--tag-bg-color)" 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="{backgroundColor: currentColor}" class="dot">
-              </div>
-            </div>
-            <div style="background-color: #24252b" class="colorbox">
+            <div style="background-color: var(--tag-bg-color)" 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.user_id = 0
+    formData.color = ''
+    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="{backgroundColor: row.color}" class="dot">
-                </div>
-              </div>
-              <div style="background-color: #24252b" class="colorbox">
+              <div style="background-color: var(--tag-bg-color)" 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,33 +70,34 @@
     </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('Owner')" prop="user_id" required>
+          <el-select v-model="formData.user_id" @change="changeUser">
+            <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('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>
-          <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="background-color: var(--tag-bg-color)" 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-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 @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)