first

2024-09-13 16:34:15 +08:00
commit 364064e5ce
62 changed files with 8448 additions and 0 deletions
@@ -0,0 +1,6 @@
+ENV = 'development'
+
+VITE_DEV_PORT = 8888
+VITE_SERVER_API = /api/admin
+VITE_SERVER_PATH = http://127.0.0.1:21114
+
@@ -0,0 +1,5 @@
+ENV = 'production'
+
+VITE_DEV_PORT = 5000
+VITE_SERVER_API =/api/admin
+VITE_SERVER_PATH = http://127.0.0.1:5000
@@ -0,0 +1,20 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+**/*.log
+
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.local
+
+package-lock.json
+yarn.lock
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016-2021 vue-manage-system
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
@@ -0,0 +1,41 @@
+# Gwen-Admin
+# 基于 Vue3 + Element Plus 的后台管理系统
+
+<a href="https://github.com/vuejs/vue-next">
+    <img src="https://img.shields.io/badge/vue-^3.2.16-brightgreen.svg" alt="vue3">
+  </a>
+  <a href="https://github.com/element-plus/element-plus">
+    <img src="https://img.shields.io/badge/element--plus-^1.2.0--beta.1-brightgreen.svg" alt="element-plus">
+  </a>
+  <a href="https://github.com/lejianwen/Gwen-admin/blob/master/LICENSE">
+    <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
+  </a>
+
+# 安装步骤
+
+~~~shell script
+git clone https://github.com/lejianwen/Gwen-admin.git  
+cd Gwen-admin   
+npm install
+
+// 本地开发
+npm run dev
+
+// 打包
+npm run build
+
+// 本地预览
+npm run server
+~~~
+
+## 功能
+
+-   [x] Element Plus
+-   [x] 登录/注销
+-   [x] 路由权限
+-   [x] Dashboard
+-   [x] 表格
+-   [x] 表单
+-   [x] 图片本地/oss上传
+-   [x] 404
+-   [x] 多级菜单
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Gwen-Admin</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    }
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}
@@ -0,0 +1,28 @@
+{
+  "name": "hello-vue3",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "axios": "1.6.0",
+    "element-plus": "^2.8.2",
+    "js-cookie": "^3.0.1",
+    "normalize.css": "^8.0.1",
+    "nprogress": "^0.2.0",
+    "pinia": "2.0.3",
+    "vue": "3.2.37",
+    "vue-router": "^4.0.12"
+  },
+  "devDependencies": {
+    "@element-plus/icons": "0.0.11",
+    "@vitejs/plugin-vue": "^1.9.3",
+    "dotenv": "^10.0.0",
+    "qs": "^6.10.2",
+    "sass-loader": "^12.3.0",
+    "sass": "^1.43.4",
+    "vite": "^2.9.18"
+  }
+}
@@ -0,0 +1,19 @@
+<template>
+  <router-view/>
+</template>
+<script>
+  import { defineComponent, ref, onMounted } from 'vue'
+
+  export default defineComponent({
+    props: {},
+    setup (props) {
+    },
+    created () {
+
+    },
+  })
+
+
+</script>
+<style>
+</style>
@@ -0,0 +1,46 @@
+import request from '@/utils/request'
+
+export function list (params) {
+  return request({
+    url: '/address_book/list',
+    params,
+  })
+}
+
+export function detail (id) {
+  return request({
+    url: `/address_book/detail/${id}`,
+  })
+}
+
+export function create (data) {
+  return request({
+    url: '/address_book/create',
+    method: 'post',
+    data,
+  })
+}
+
+export function update (data) {
+  return request({
+    url: '/address_book/update',
+    method: 'post',
+    data,
+  })
+}
+
+export function remove (data) {
+  return request({
+    url: '/address_book/delete',
+    method: 'post',
+    data,
+  })
+}
+
+export function changePwd (data) {
+  return request({
+    url: '/address_book/changePwd',
+    method: 'post',
+    data,
+  })
+}
@@ -0,0 +1,7 @@
+import request from '@/utils/request'
+
+export function ossToken () {
+  return request({
+    url: '/file/oss_token',
+  })
+}
@@ -0,0 +1,46 @@
+import request from '@/utils/request'
+
+export function list (params) {
+  return request({
+    url: '/group/list',
+    params,
+  })
+}
+
+export function detail (id) {
+  return request({
+    url: `/group/detail/${id}`,
+  })
+}
+
+export function create (data) {
+  return request({
+    url: '/group/create',
+    method: 'post',
+    data,
+  })
+}
+
+export function update (data) {
+  return request({
+    url: '/group/update',
+    method: 'post',
+    data,
+  })
+}
+
+export function remove (data) {
+  return request({
+    url: '/group/delete',
+    method: 'post',
+    data,
+  })
+}
+
+export function changePwd (data) {
+  return request({
+    url: '/group/changePwd',
+    method: 'post',
+    data,
+  })
+}
@@ -0,0 +1,46 @@
+import request from '@/utils/request'
+
+export function list (params) {
+  return request({
+    url: '/peer/list',
+    params,
+  })
+}
+
+export function detail (id) {
+  return request({
+    url: `/peer/detail/${id}`,
+  })
+}
+
+export function create (data) {
+  return request({
+    url: '/peer/create',
+    method: 'post',
+    data,
+  })
+}
+
+export function update (data) {
+  return request({
+    url: '/peer/update',
+    method: 'post',
+    data,
+  })
+}
+
+export function remove (data) {
+  return request({
+    url: '/peer/delete',
+    method: 'post',
+    data,
+  })
+}
+
+export function changePwd (data) {
+  return request({
+    url: '/peer/changePwd',
+    method: 'post',
+    data,
+  })
+}
@@ -0,0 +1,8 @@
+import request from '@/utils/request'
+
+export function config () {
+  return request({
+    url: '/server-config',
+    method: 'get',
+  })
+}
@@ -0,0 +1,46 @@
+import request from '@/utils/request'
+
+export function list (params) {
+  return request({
+    url: '/tag/list',
+    params,
+  })
+}
+
+export function detail (id) {
+  return request({
+    url: `/tag/detail/${id}`,
+  })
+}
+
+export function create (data) {
+  return request({
+    url: '/tag/create',
+    method: 'post',
+    data,
+  })
+}
+
+export function update (data) {
+  return request({
+    url: '/tag/update',
+    method: 'post',
+    data,
+  })
+}
+
+export function remove (data) {
+  return request({
+    url: '/tag/delete',
+    method: 'post',
+    data,
+  })
+}
+
+export function changePwd (data) {
+  return request({
+    url: '/tag/changePwd',
+    method: 'post',
+    data,
+  })
+}
@@ -0,0 +1,69 @@
+import request from '@/utils/request'
+
+export function login (data) {
+  return request({
+    url: '/login',
+    method: 'post',
+    data,
+  })
+}
+
+export function current () {
+  return request({
+    url: '/user/current',
+    method: 'get',
+  })
+}
+
+export function list (params) {
+  return request({
+    url: '/user/list',
+    params,
+  })
+}
+
+export function detail (id) {
+  return request({
+    url: `/user/detail/${id}`,
+  })
+}
+
+export function create (data) {
+  return request({
+    url: '/user/create',
+    method: 'post',
+    data,
+  })
+}
+
+export function update (data) {
+  return request({
+    url: '/user/update',
+    method: 'post',
+    data,
+  })
+}
+
+export function remove (data) {
+  return request({
+    url: '/user/delete',
+    method: 'post',
+    data,
+  })
+}
+
+export function changePwd (data) {
+  return request({
+    url: '/user/changePwd',
+    method: 'post',
+    data,
+  })
+}
+
+export function changeCurPwd (data) {
+  return request({
+    url: '/user/changeCurPwd',
+    method: 'post',
+    data,
+  })
+}
@@ -0,0 +1,99 @@
+<template>
+  <el-form-item ref="formAddress" :label="label" :prop="prop">
+    <el-select v-model="currentProvince" clearable placeholder="省" @change="changeProvince">
+      <el-option v-for="(_, name) in pca" :key="name" :label="name" :value="name"/>
+    </el-select>
+    <el-select v-model="currentCity" clearable placeholder="市" @change="changeCity">
+      <el-option v-for="(_, name) in cities" :key="name" :label="name" :value="name"/>
+    </el-select>
+    <el-select v-model="currentCounty" clearable placeholder="区" @change="changeCounty">
+      <el-option v-for="item in counties" :key="item" :label="item" :value="item"/>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import { defineComponent, ref, computed } from 'vue'
+  import pca from '@/utils/pca.json'
+
+  export default defineComponent({
+    name: 'FormAddress',
+    props: {
+      prop: {
+        type: String,
+        default: '',
+      },
+      label: {
+        type: String,
+        default: '省/市/区',
+      },
+      province: {
+        type: String,
+        default: '',
+      },
+      city: {
+        type: String,
+        default: '',
+      },
+      county: {
+        type: String,
+        default: '',
+      },
+    },
+    setup (props, context) {
+      const cities = computed(() => pca[props.province] || [])
+      const counties = computed(() => pca[props.province] && pca[props.province][props.city] ? pca[props.province][props.city] : [])
+
+      let currentProvince = computed({
+        get: () => props.province,
+        set: (val) => {
+          context.emit('update:province', val)
+        },
+      })
+      let currentCity = computed({
+        get: () => props.city,
+        set: (val) => {
+          context.emit('update:city', val)
+        },
+      })
+      let currentCounty = computed({
+        get: () => props.county,
+        set: (val) => {
+          context.emit('update:county', val)
+        },
+      })
+
+      const changeProvince = (val) => {
+        currentCity = ''
+        currentCounty = ''
+        context.emit('changeProvince', val)
+      }
+      const changeCity = (val) => {
+        currentCounty = ''
+        context.emit('changeCity', val)
+      }
+      const changeCounty = (val) => {
+        context.emit('changeCounty', val)
+      }
+
+      return {
+        pca,
+        cities,
+        counties,
+
+        currentProvince,
+        currentCity,
+        currentCounty,
+
+        changeProvince,
+        changeCity,
+        changeCounty,
+      }
+    },
+
+  })
+</script>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,198 @@
+<template>
+  <div class="upload-order-file">
+    <el-upload
+            size="mini"
+            ref="upload"
+            :on-success="fileUploadSuccess"
+            :before-upload="beforeFileUpload"
+            :on-preview="onPreview"
+            :on-remove="fileRemove"
+            :on-error="onError"
+            name="file"
+            :file-list="fileList"
+            :action="fileUploadHost"
+            :data="fileUploadData"
+            :headers="headers"
+            list-type="picture-card"
+            :limit="0"
+            accept="image/*"
+    >
+      <template #default>
+        <div class="default-slot">
+          <slot name="default">
+            <el-icon class="default-icon">
+              <plus/>
+            </el-icon>
+          </slot>
+        </div>
+      </template>
+    </el-upload>
+    <el-dialog v-model="showPreview" top="5vh">
+      <el-image :src="showImage" class="preview-image" fit="contain"></el-image>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  import { defineComponent, ref, computed, reactive, unref, readonly, toRefs } from 'vue'
+  import { Plus, ZoomIn, Delete, ArrowLeft, ArrowRight, Check } from '@element-plus/icons'
+  import { useOss } from '@/components/form/upload/oss'
+  import { ElMessage } from 'element-plus'
+  import { useLocal } from '@/components/form/upload/local'
+
+  export default defineComponent({
+    name: 'imageUpload',
+    props: {
+      limit: {
+        type: Number,
+        default: 0,
+      },
+      beforeUpload: {
+        type: Function,
+        default: function () {
+          return true
+        },
+      },
+      host: {
+        type: String,
+        default: import.meta.env.VITE_BASE_API + '/file/upload',
+      },
+      modelValue: {
+        type: String,
+        default: '',
+      },
+      type: {
+        type: String,
+        default: 'local', //local oss
+      },
+      width: {
+        type: String,
+        default: '148px',
+      },
+    },
+    components: { Plus, ZoomIn, Delete, ArrowLeft, ArrowRight, Check },
+    setup (props, context) {
+      const showPreview = ref(false)
+      const showImage = ref('')
+
+      let fileList = computed(() => props.modelValue ? [{ url: props.modelValue, status: 'success' }] : [])
+
+      let fileUpload = reactive({
+        fileUploadHost: '',
+        fileUploadData: {},
+        beforeFileUpload: null,
+        headers: {},
+      })
+
+      if (props.type === 'oss') {
+        fileUpload = useOss(props.beforeUpload, props.multiple)
+      } else {
+        fileUpload = useLocal(props.beforeUpload, props.host)
+      }
+
+      function removeImage (file) {
+        let fList = unref(fileList)
+        const index = fList.findIndex(f => f.url === file.url)
+        fList.splice(index, 1)
+        updateValue(fList)
+      }
+
+      function updateValue (_fileList) {
+        let fList = unref(_fileList)
+        context.emit(
+          'update:modelValue',
+          fList.length ? fList[0].url : '',
+        )
+      }
+
+      function fileRemove (file, _fileList) {
+        updateValue(_fileList)
+      }
+
+      function onError () {
+
+      }
+
+      function fileUploadSuccess (response, file, _fileList) {
+        file.url = response?.data?.url || file.url
+        if (_fileList.length > 1) {
+          _fileList.splice(0, 1)
+        }
+        if (_fileList.every(f => f.status === 'success')) {
+          updateValue(_fileList)
+        }
+      }
+
+      function onPreview (file) {
+        showImage.value = file.url
+        showPreview.value = true
+      }
+
+      return {
+        fileList,
+
+        ...toRefs(fileUpload),
+
+        fileRemove,
+        onError,
+        fileUploadSuccess,
+
+        onPreview,
+        removeImage,
+
+        showPreview,
+        showImage,
+      }
+    },
+  })
+</script>
+
+<style scoped lang="scss">
+  .upload-order-file {
+
+    ::v-deep(.el-upload-list__item-thumbnail) {
+      object-fit: contain;
+
+    }
+
+    ::v-deep(.el-upload--picture-card) {
+      width: v-bind(width);
+      height: v-bind(width);
+    }
+
+    ::v-deep(.el-upload-list__item) {
+      width: v-bind(width);
+      height: v-bind(width);
+    }
+
+    ::v-deep(.el-progress) {
+      width: v-bind(width) !important;
+      height: v-bind(width) !important;
+    }
+
+    ::v-deep(.el-progress-circle) {
+      width: v-bind(width) !important;
+      height: v-bind(width) !important;
+    }
+
+
+    .default-slot {
+      height: 100%;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .default-icon {
+        margin-top: 0;
+      }
+    }
+  }
+
+  .preview-image {
+    width: 100%;
+
+    ::v-deep(img) {
+      max-height: 700px;
+    }
+  }
+</style>
@@ -0,0 +1,272 @@
+<template>
+  <div class="upload-order-file">
+    <el-upload
+            ref="upload"
+            :on-success="fileUploadSuccess"
+            :before-upload="beforeFileUpload"
+            :on-remove="fileRemove"
+            :on-exceed="onExceed"
+            :on-error="onError"
+            name="file"
+            :multiple="multiple"
+            :file-list="fileList"
+            :action="fileUploadHost"
+            :data="fileUploadData"
+            :headers="headers"
+            list-type="picture-card"
+            :limit="limit"
+            accept="image/*"
+            :drag="drag"
+    >
+      <template #default>
+        <div class="default-slot">
+          <slot name="default">
+            <div>
+              <el-icon class="default-icon">
+                <plus/>
+              </el-icon>
+              <div class="drag-tips">点击上传<span v-if="drag">或直接拖入文件</span></div>
+            </div>
+          </slot>
+        </div>
+      </template>
+      <template #file="{file}">
+        <img
+                v-if="file.status === 'success'"
+                class="el-upload-list__item-thumbnail"
+                :src="file.url"
+                alt=""
+        >
+        <label class="el-upload-list__item-status-label">
+          <el-icon color="white">
+            <check/>
+          </el-icon>
+        </label>
+        <el-progress
+                v-if="file.status === 'uploading'"
+                type="circle"
+                :stroke-width="6"
+                :percentage="parseInt(file.percentage)"
+        />
+        <span v-else-if="file.status === 'success'" class="el-upload-list__item-actions">
+          <el-icon class="el-upload-list__item-icon" @click="leftImage(file)"><arrow-left/></el-icon>
+          <el-icon class="el-upload-list__item-icon" @click="removeImage(file)"><Delete/></el-icon>
+          <el-icon class="el-upload-list__item-icon" @click="rightImage(file)"><arrow-right/></el-icon>
+        </span>
+      </template>
+    </el-upload>
+  </div>
+</template>
+<script>
+  import { defineComponent, ref, computed, reactive, unref, readonly, toRefs } from 'vue'
+  import { Plus, ZoomIn, Delete, ArrowLeft, ArrowRight, Check } from '@element-plus/icons'
+  import { useOss } from '@/components/form/upload/oss'
+  import { ElMessage } from 'element-plus'
+  import { useLocal } from '@/components/form/upload/local'
+
+  export default defineComponent({
+    name: 'imagesUpload',
+    props: {
+      drag: {
+        type: Boolean,
+        default: false,
+      },
+      limit: {
+        type: Number,
+        default: 0,
+      },
+      beforeUpload: {
+        type: Function,
+        default: function () {
+          return true
+        },
+      },
+      host: {
+        type: String,
+        default: import.meta.env.VITE_BASE_API + '/file/upload',
+      },
+      modelValue: {
+        type: Array,
+        default: function () {
+          return []
+        },
+      },
+      type: {
+        type: String,
+        default: 'local', //local oss
+      },
+      multiple: {
+        type: Boolean,
+        default: false,
+      },
+      width: {
+        type: String,
+        default: '148px',
+      },
+    },
+    components: { Plus, ZoomIn, Delete, ArrowLeft, ArrowRight, Check },
+    setup (props, context) {
+
+      let fileList = computed(() => props.modelValue.map(url => { return { url, status: 'success' } }))
+
+      let fileUpload = reactive({
+        fileUploadHost: '',
+        fileUploadData: {},
+        beforeFileUpload: null,
+        headers: {},
+      })
+
+      if (props.type === 'oss') {
+        fileUpload = useOss(props.beforeUpload, props.multiple)
+      } else {
+        fileUpload = useLocal(props.beforeUpload, props.host)
+      }
+
+      function leftImage (file) {
+        let fList = unref(fileList)
+        const index = fList.findIndex(f => f.url === file.url)
+        if (index === 0 || index === -1) {
+          return
+        }
+        fList[index] = fList.splice(index - 1, 1, fList[index])[0]
+        updateValue(fList)
+      }
+
+      function rightImage (file) {
+        let fList = unref(fileList)
+        const index = fList.findIndex(f => f.url === file.url)
+        if (index === fList.length - 1 || index === -1) {
+          return
+        }
+        fList[index] = fList.splice(index + 1, 1, fList[index])[0]
+        updateValue(fList)
+      }
+
+      function removeImage (file) {
+        let fList = unref(fileList)
+        const index = fList.findIndex(f => f.url === file.url)
+        fList.splice(index, 1)
+        updateValue(fList)
+      }
+
+      function updateValue (_fileList) {
+        let fList = unref(_fileList)
+        context.emit(
+          'update:modelValue',
+          fList.filter(f => f.status === 'success').map(file => file.url),
+        )
+      }
+
+      function fileRemove (file, _fileList) {
+        updateValue(_fileList)
+      }
+
+      function onError () {
+
+      }
+
+      function fileUploadSuccess (response, file, _fileList) {
+        file.url = response?.data?.url || file.url
+        if (_fileList.every(f => f.status === 'success')) {
+          updateValue(_fileList)
+        }
+      }
+
+      function onExceed () {
+        ElMessage.error('超出数量限制')
+      }
+
+      return {
+        fileList,
+
+        ...toRefs(fileUpload),
+
+        onExceed,
+        fileRemove,
+        onError,
+        fileUploadSuccess,
+
+        leftImage,
+        rightImage,
+        removeImage,
+      }
+    },
+  })
+</script>
+
+<style scoped lang="scss">
+  .upload-order-file {
+    ::v-deep(.el-upload-dragger) {
+      border: none;
+      width: 100%;
+      height: 100%;
+    }
+
+    ::v-deep(.el-upload--picture-card) {
+      width: v-bind(width);
+      height: v-bind(width);
+    }
+
+    ::v-deep(.el-upload-list__item) {
+      width: v-bind(width);
+      height: v-bind(width);
+    }
+
+    ::v-deep(.el-progress) {
+      width: v-bind(width) !important;
+      height: v-bind(width) !important;
+    }
+
+    ::v-deep(.el-progress-circle) {
+      width: v-bind(width) !important;
+      height: v-bind(width) !important;
+    }
+
+    .drag-tips {
+      font-size: 12px;
+      color: #999;
+    }
+
+
+    ::v-deep(.el-upload-list__item) {
+      transition: none !important;
+    }
+
+    ::v-deep(.el-upload-list) {
+      transition: none !important;
+    }
+
+    .el-upload-list__item-thumbnail {
+      object-fit: contain;
+    }
+
+    .el-upload-list__item-actions {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      &:after {
+        display: none;
+      }
+
+      .el-upload-list__item-icon {
+        cursor: pointer;
+        font-size: 20px;
+        color: #fff;
+      }
+    }
+
+    .default-slot {
+      height: 100%;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .default-icon {
+        margin-top: 0;
+      }
+    }
+  }
+
+</style>
@@ -0,0 +1,21 @@
+import { getToken } from '@/utils/auth'
+
+export function useLocal (beforeUp, host) {
+  const fileUploadData = {}
+  const fileUploadHost = host
+  const headers = { 'api-token': getToken() }
+  const beforeFileUpload = async (file) => {
+    if (beforeUp) {
+      const br = await beforeUp(file)
+      if (!br) { return Promise.reject() }
+    }
+    return Promise.resolve()
+  }
+
+  return {
+    fileUploadData,
+    fileUploadHost,
+    beforeFileUpload,
+    headers,
+  }
+}
@@ -0,0 +1,52 @@
+import { ossToken } from '@/api/file'
+import { random_filename } from '@/utils/file'
+import { reactive, ref } from 'vue'
+
+export function useOss (beforeUp, multiple) {
+  let fileUploadData = reactive({
+    policy: '',
+    OSSAccessKeyId: '',
+    success_action_status: '200', // 让服务端返回200,不然，默认会返回204
+    callback: '',
+    signature: '',
+    'x:dir': '',
+  })
+  const fileExpire = ref(0)
+  const fileUploadHost = ref('')
+
+  const beforeFileUpload = async (file) => {
+    if (beforeUp) {
+      const br = await beforeUp(file)
+      if (!br) { return Promise.reject() }
+    }
+
+    const now = Date.parse(new Date()) / 1000
+    if (fileExpire.value < now) {
+      const res = await ossToken()
+      const obj = JSON.parse(res.data)
+      fileExpire.value = parseInt(obj['expire'])
+      fileUploadData.policy = obj['policy']
+      fileUploadData.OSSAccessKeyId = obj['accessid']
+      fileUploadData.callback = obj['callback']
+      fileUploadData.signature = obj['signature']
+      fileUploadData['x:dir'] = obj['dir']
+      fileUploadHost.value = obj['host']
+    }
+    //多选文件时需要这个，不然每个文件上传的都是一样的data
+    if (multiple) {
+      await new Promise(resolve => {
+        setTimeout(() => { resolve() }, 50)
+      })
+    }
+    fileUploadData['x:origin_filename'] = file.name
+    fileUploadData.key = fileUploadData['x:dir'] + random_filename(file.name)
+    return Promise.resolve()
+  }
+
+  return {
+    fileUploadHost,
+    fileUploadData,
+    beforeFileUpload,
+    headers: {},
+  }
+}
@@ -0,0 +1,19 @@
+import { ref, reactive, watch } from 'vue'
+import { list as fetchUsers } from '@/api/user'
+
+export function loadAllUsers () {
+  const allUsers = ref([])
+  const getAllUsers = async () => {
+    const res = await fetchUsers({ page_size: 9999 }).catch(_ => false)
+    if (res) {
+      allUsers.value = res.data.list
+    }
+  }
+
+  return {
+    allUsers,
+    getAllUsers,
+  }
+
+}
+
@@ -0,0 +1,20 @@
+<template>
+  <el-scrollbar class="scroll-sidebar" height="100vh">
+    <menus></menus>
+  </el-scrollbar>
+</template>
+<script>
+  import Menus from '@/layout/components/menu/index.vue'
+  import { defineComponent, ref, onMounted } from 'vue'
+
+  export default defineComponent({
+    name: 'GAside',
+    components: { Menus },
+  })
+</script>
+
+<style scoped>
+  .scroll-sidebar{
+    position: fixed;
+  }
+</style>
@@ -0,0 +1,72 @@
+<template>
+  <el-icon class="ex-icon" @click="expandOrFoldSlider">
+    <el-icon-expand v-if="setting.sideIsCollapse"></el-icon-expand>
+    <el-icon-fold v-else></el-icon-fold>
+  </el-icon>
+  <div class="header-logo">
+    <img :src="setting.logo" alt="" class="logo">
+    <div class="title">{{setting.title}}</div>
+  </div>
+  <Setting></Setting>
+</template>
+
+<script>
+  import { defineComponent, computed } from 'vue'
+  import HeaderMenu from '@/layout/components/menu/index.vue'
+  import Setting from '@/layout/components/setting/index.vue'
+  import { useAppStore } from '@/store/app'
+  import GTags from '@/layout/components/tags/index.vue'
+
+  export default defineComponent({
+    name: 'LayerHeader',
+    created () {
+    },
+    components: { HeaderMenu, Setting, GTags },
+    watch: {},
+    setup (props) {
+      const appStore = useAppStore()
+      const setting = computed(() => appStore.setting)
+      const expandOrFoldSlider = () => {
+        appStore.sideCollapse()
+      }
+      return {
+        setting,
+        expandOrFoldSlider,
+      }
+    },
+
+  })
+</script>
+
+<style scoped lang="scss">
+  .ex-icon {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    margin-right: 10px;
+    font-size: 16px;
+    cursor: pointer;
+  }
+
+  .header-logo {
+    display: flex;
+    height: 100%;
+    align-items: center;
+
+    .title {
+      display: block;
+      margin-left: 10px;
+    }
+
+    .logo {
+      display: block;
+      width: 30px;
+      height: 30px;
+    }
+  }
+
+
+</style>
+<style lang="scss">
+
+</style>
@@ -0,0 +1,56 @@
+<template>
+  <el-menu
+          class="menus"
+          :collapse="isCollapse"
+          :default-active="activeIndex"
+          background-color="#2d3a4b"
+          text-color="#fff"
+          active-text-color="#409eff"
+          router
+  >
+    <menu-item v-for="(route,index) in routes" :key="route.name" :route="route"></menu-item>
+  </el-menu>
+</template>
+
+<script>
+  import { defineComponent, ref, onMounted, watch, computed } from 'vue'
+  import { useRouteStore } from '@/store/router'
+  import MenuItem from '@/layout/components/menu/item.vue'
+  import { useRoute } from 'vue-router'
+  import { useAppStore } from '@/store/app'
+
+  export default defineComponent({
+    name: 'Menu',
+    created () {
+    },
+    components: { MenuItem },
+    setup () {
+      const routes = ref([])
+      const route = useRoute()
+      const app = useAppStore()
+      const isCollapse = computed(() => app.setting.sideIsCollapse)
+      const activeIndex = computed(() => route.name)
+
+      routes.value = useRouteStore().routes
+      return {
+        routes,
+        activeIndex,
+        isCollapse,
+      }
+    },
+
+  })
+</script>
+
+<style lang="scss" scoped>
+  .menus {
+    min-height: 100vh;
+    border-right: none;
+    &:not(.el-menu--collapse) {
+      width: 210px;
+    }
+
+  }
+</style>
+<style>
+</style>
@@ -0,0 +1,52 @@
+<template>
+  <el-sub-menu v-if="route.children&&route.children.filter(c=>!c.meta?.hide).length>1&&route.children.some(r => !r.meta?.hide)"
+               :key="route.name"
+               :index="route.name"
+  >
+    <template #title>
+      <el-icon v-if="route.meta?.icon">
+        <component :is="`el-icon-${route.meta.icon}`"></component>
+      </el-icon>
+      <span>{{route.meta?.title||route.name}}</span>
+    </template>
+    <menu-item v-for="(_route,_index) in route.children"
+               :route="_route"
+               :key="_route.name">
+    </menu-item>
+  </el-sub-menu>
+  <el-menu-item v-else-if="!parseRoute(route).meta?.hide" :route="parseRoute(route)" :index="parseRoute(route).name">
+    <el-icon v-if="parseRoute(route).meta?.icon">
+      <component :is="`el-icon-${parseRoute(route).meta.icon}`"></component>
+    </el-icon>
+    <span>{{parseRoute(route).meta?.title||parseRoute(route).name}}</span>
+  </el-menu-item>
+</template>
+
+<script>
+  import { defineComponent } from 'vue'
+
+  export default defineComponent({
+    name: 'MenuItem',
+    props: {
+      route: {},
+    },
+    mounted () {
+    },
+    setup (props) {
+      //判断仅有一个子项的route
+      const parseRoute = (route) => {
+        if (route.children && route.children.filter(c => !c.meta?.hide).length === 1) {
+          return route.children.filter(c => !c.meta?.hide)[0]
+        } else {
+          return route
+        }
+      }
+      return {
+        parseRoute,
+      }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+</style>
@@ -0,0 +1,140 @@
+<template>
+  <div class="setting">
+    <el-dropdown class="menu-item">
+      <div class="title">
+        <!--        <el-image class="avatar" :src="user.avatar"></el-image>-->
+        <span class="nickname">{{ user.username }}</span>
+        <el-icon>
+          <el-icon-arrow-down/>
+        </el-icon>
+      </div>
+
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item @click="showChangePwd">修改密码</el-dropdown-item>
+          <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+    <el-dialog v-model="changePwdVisible" width="50%">
+      <el-form ref="cpwd" :model="changePwdForm" :rules="chagePwdRules" label-width="120px" style="margin-top: 20px">
+        <el-form-item label="旧密码" prop="old_password">
+          <el-input v-model="changePwdForm.old_password" show-password></el-input>
+        </el-form-item>
+        <el-form-item label="新密码" prop="new_password">
+          <el-input v-model="changePwdForm.new_password" show-password></el-input>
+        </el-form-item>
+        <el-form-item label="确认密码" prop="confirmPwd">
+          <el-input v-model="changePwdForm.confirmPwd" show-password></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="changePwdVisible=false">取消</el-button>
+          <el-button type="primary" @click="changePassword">确定</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+  import { useUserStore } from '@/store/user'
+  import { changeCurPwd } from '@/api/user'
+  import { ElMessage, ElMessageBox } from 'element-plus'
+  import { reactive, ref } from 'vue'
+
+  const userStore = useUserStore()
+  const user = userStore
+
+  const logout = () => {
+    userStore.logout()
+    window.location.reload()
+  }
+
+  const changePwdVisible = ref(false)
+  const showChangePwd = () => {
+    changePwdVisible.value = true
+    changePwdForm.old_password = ''
+    changePwdForm.new_password = ''
+    changePwdForm.confirmPwd = ''
+  }
+  const changePwdForm = reactive({
+    old_password: '',
+    new_password: '',
+    confirmPwd: '',
+  })
+  const chagePwdRules = reactive({
+    old_password: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
+    new_password: [
+      { required: true, message: '请输入新密码', trigger: 'blur' },
+      {
+        validator: (rule, value, callback) => {
+          if (value === changePwdForm.old_password) {
+            callback(new Error('新密码不能与旧密码相同'))
+          } else {
+            callback()
+          }
+        },
+        trigger: 'blur',
+      }],
+    confirmPwd: [
+      { required: true, message: '请再次输入新密码', trigger: 'blur' },
+      {
+        validator: (rule, value, callback) => {
+          if (value !== changePwdForm.new_password) {
+            callback(new Error('两次输入密码不一致'))
+          } else {
+            callback()
+          }
+        },
+        trigger: 'blur',
+      },
+    ],
+  })
+  const cpwd = ref(null)
+  const changePassword = async () => {
+    //验证
+    const valid = await cpwd.value.validate().catch(_ => false)
+    if (!valid) {
+      return
+    }
+    console.log('changePassword')
+    const confirm = await ElMessageBox.confirm('确定修改密码么？', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+    }).catch(_ => false)
+    if (!confirm) {
+      return
+    }
+    const res = await changeCurPwd(changePwdForm).catch(_ => false)
+    if (!res) {
+      return
+    }
+    ElMessageBox.alert('修改成功', '修改密码', {
+      autofocus: true,
+      confirmButtonText: 'OK',
+      callback: (action) => {
+        logout()
+      },
+    })
+  }
+</script>
+
+<style lang="scss" scoped>
+.setting {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  .title {
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    .nickname {
+      padding: 0 10px;
+    }
+  }
+}
+</style>
@@ -0,0 +1,80 @@
+<template>
+  <el-tag v-for="(t, i) in tags"
+          :key="t.name"
+          class="tag"
+          :closable="t.closeable"
+          @close="close(t)"
+          @click="toTag(t)"
+          :type="t.active?'primary':'info'"
+          :effect="t.active?'dark':'plain'">
+    {{t.title}}
+  </el-tag>
+</template>
+
+<script>
+  import { defineComponent, ref, onMounted, watch } from 'vue'
+  import { useTagsStore } from '@/store/tags'
+  import { useRoute, useRouter } from 'vue-router'
+
+  export default defineComponent({
+    name: 'Index',
+    setup () {
+      const tags = ref([])
+      const tagsStore = useTagsStore()
+      const route = useRoute()
+      const router = useRouter()
+      tags.value = tagsStore.tags
+
+      const addTag = (route) => {
+        if (!route.meta?.hide && route.name) {
+          tagsStore.addTag(route)
+        }
+      }
+      const close = (tag) => {
+        tagsStore.removeTag(tag)
+        if (tag.active) {
+          toLastTag()
+        }
+      }
+      const toLastTag = () => {
+        if (tags.value.length) {
+          router.push({ name: tags.value[tags.value.length - 1].name })
+        }
+      }
+      const init = () => {
+        if (!tagsStore.tags.length) {
+          tagsStore.initTags()
+        }
+        addTag(route)
+      }
+
+      const toTag = (tag) => {
+        if (tag.name !== route.name) {
+          router.push({ name: tag.name })
+        }
+      }
+
+      onMounted(init)
+      watch(route, (val) => {
+        addTag(val)
+      })
+      return {
+        tags,
+        addTag,
+        close,
+        toLastTag,
+        toTag,
+      }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+
+  .tag {
+    border-radius: 0;
+    cursor: pointer;
+    &.active {
+    }
+  }
+</style>
@@ -0,0 +1,85 @@
+<template>
+  <el-container>
+    <el-aside :width="leftWidth" class="app-left">
+      <g-aside></g-aside>
+    </el-aside>
+    <el-container class="app-container ">
+      <el-header class="app-header">
+        <g-header></g-header>
+      </el-header>
+      <div class="header-tags">
+        <tags></tags>
+      </div>
+
+      <el-main class="app-main">
+        <router-view v-slot="{ Component }">
+          <transition mode="out-in" name="el-fade-in-linear">
+            <keep-alive :include="[...cachedTags]">
+              <component :is="Component"/>
+            </keep-alive>
+          </transition>
+        </router-view>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script>
+  import { useUserStore } from '@/store/user'
+  import { useRouteStore } from '@/store/router'
+  import { useAppStore } from '@/store/app'
+  import { useTagsStore } from '@/store/tags'
+  import LayerHeader from '@/layout/components/header.vue'
+  import { defineComponent, ref, onMounted, watch, reactive, computed, toRef } from 'vue'
+  import Tags from '@/layout/components/tags/index.vue'
+  import GAside from '@/layout/components/aside.vue'
+  import GHeader from '@/layout/components/header.vue'
+
+  export default defineComponent({
+    name: 'Layout',
+    components: { LayerHeader, Tags, GAside, GHeader },
+    setup (props) {
+      const userStore = useUserStore()
+      const appStore = useAppStore()
+      const tagStore = useTagsStore()
+
+      const leftWidth = computed(() => appStore.setting.sideIsCollapse ? '64px' : '210px')
+
+      const cachedTags = ref([])
+
+      cachedTags.value = tagStore.cached
+
+      return {
+        cachedTags,
+        leftWidth,
+      }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  .app-header {
+    background-color: #3f454b;
+    color: var(--basicWhite);
+    display: flex;
+    height: 50px;
+  }
+
+  .header-tags {
+    height: auto;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    padding: 0;
+  }
+
+  .app-left {
+    height: 100%;
+    transition: width 0.5s;
+  }
+
+  .app-container {
+    min-height: 100vh;
+  }
+</style>
+
+
@@ -0,0 +1,20 @@
+import { createApp } from 'vue'
+import 'element-plus/dist/index.css'
+import App from './App.vue'
+import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import { router } from '@/router'
+import 'normalize.css/normalize.css'
+import { pinia } from '@/store'
+import '@/permission'
+import '@/styles/style.scss'
+import * as ElementIcons from '@element-plus/icons'
+
+const app = createApp(App)
+app.use(ElementPlus, { locale: zhCn })
+app.use(pinia)
+app.use(router)
+for (let icon in ElementIcons){
+  app.component("ElIcon" +icon ,ElementIcons[icon])
+}
+app.mount('#app')
@@ -0,0 +1,50 @@
+import { router } from '@/router'
+import { useRouteStore } from '@/store/router'
+import { useUserStore } from '@/store/user'
+import { getToken } from '@/utils/auth'
+import { pinia } from '@/store'
+import NProgress from 'nprogress' // progress bar
+import 'nprogress/nprogress.css'
+import { useAppStore } from '@/store/app' // progress bar style
+
+NProgress.configure({ showSpinner: false }) // NProgress Configuration
+
+const whiteList = ['/login']
+const routeStore = useRouteStore(pinia)
+const appStore = useAppStore(pinia)
+router.beforeEach(async (to, from, next) => {
+
+  document.title = (to.meta?.title || 'Rust-api-web') + '-' + appStore.setting.title
+  NProgress.start()
+
+  const token = getToken()
+  if (!token) {
+    //无token，跳转到登录
+    if (whiteList.indexOf(to.path) !== -1) {
+      next()
+    } else {
+      next(`/login?redirect=${to.path}`)
+    }
+
+  } else {
+    //有token
+
+    const userStore = useUserStore(pinia)
+
+    if (!userStore.route_names.length) {
+      const info = await userStore.info()
+      if (!info) {
+        userStore.logout()
+        next(`/login?redirect=${to.path}`)
+      } else {
+        next({ ...to, replace: true })
+      }
+    } else {
+      next()
+    }
+  }
+})
+
+router.afterEach(() => {
+  NProgress.done()
+})
@@ -0,0 +1,118 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+
+const constantRoutes = [
+  {
+    path: '/login',
+    name: 'Login',
+    meta: { title: '登录' },
+    component: () => import('@/views/login/login.vue'),
+  },
+
+  {
+    path: '/404',
+    component: () => import('@/views/error-page/404.vue'),
+    hidden: true,
+  },
+
+]
+export const asyncRoutes = [
+  // {
+  //   path: '/',
+  //   name: 'Index',
+  //   redirect: '/Home',
+  //   meta: { title: '首页', icon: 'house' },
+  //   component: () => import('@/layout/index.vue'),
+  //   children: [
+  //     {
+  //       path: '/Home',
+  //       name: 'Home',
+  //       meta: { title: '首页', icon: 'house' },
+  //       component: () => import('@/views/index/index.vue'),
+  //     },
+  //
+  //   ],
+  // },
+  {
+    path: '/my',
+    name: 'My',
+    redirect: '/my/tag/index',
+    meta: { title: '我的', icon: 'UserFilled' },
+    component: () => import('@/layout/index.vue'),
+    children: [
+      {
+        path: '/',
+        name: 'MyAddressBookList',
+        meta: { title: '地址簿管理', icon: 'Notebook' /*keepAlive: true*/ },
+        component: () => import('@/views/my/address_book/index.vue'),
+      },
+      {
+        path: 'tag/index',
+        name: 'MyTagList',
+        meta: { title: '标签管理', icon: 'CollectionTag' /*keepAlive: true*/ },
+        component: () => import('@/views/my/tag/index.vue'),
+      },
+    ],
+  },
+  {
+    path: '/user',
+    name: 'User',
+    redirect: '/user/index',
+    meta: { title: '系统', icon: 'Setting' },
+    component: () => import('@/layout/index.vue'),
+    children: [
+      {
+        path: 'peer',
+        name: 'Peer',
+        meta: { title: '设备管理', icon: 'Monitor' /*keepAlive: true*/ },
+        component: () => import('@/views/peer/index.vue'),
+      },
+      {
+        path: 'group',
+        name: 'UserGroup',
+        meta: { title: '群组管理', icon: 'ChatRound' /*keepAlive: true*/ },
+        component: () => import('@/views/group/index.vue'),
+      },
+      {
+        path: 'index',
+        name: 'UserList',
+        meta: { title: '用户列表', icon: 'User' /*keepAlive: true*/ },
+        component: () => import('@/views/user/index.vue'),
+      },
+      {
+        path: 'add',
+        name: 'UserAdd',
+        meta: { title: '用户添加', hide: true },
+        component: () => import('@/views/user/edit.vue'),
+      },
+      {
+        path: 'edit/:id',
+        name: 'UserEdit',
+        meta: { title: '用户编辑', hide: true },
+        component: () => import('@/views/user/edit.vue'),
+      },
+
+      {
+        path: 'addressBook',
+        name: 'UserAddressBook',
+        meta: { title: '地址簿管理', icon: 'Notebook' /*keepAlive: true*/ },
+        component: () => import('@/views/address_book/index.vue'),
+      },
+      {
+        path: 'tag',
+        name: 'UserTag',
+        meta: { title: '标签管理', icon: 'CollectionTag' /*keepAlive: true*/ },
+        component: () => import('@/views/tag/index.vue'),
+      },
+
+    ],
+  },
+]
+export const lastRoutes = [
+  { path: '/:catchAll(.*)', redirect: '/404', meta: { hide: true } },
+]
+
+export const router = createRouter({
+  history: createWebHashHistory(),
+  routes: constantRoutes,
+})
+
@@ -0,0 +1,23 @@
+import { defineStore, acceptHMRUpdate } from 'pinia'
+import logo from '@/assets/logo.png'
+
+export const useAppStore = defineStore({
+  id: 'App',
+  state: () => ({
+    setting: {
+      title: 'Gwen-Admin',
+      sideIsCollapse: false,
+      logo,
+    },
+  }),
+
+  actions: {
+    sideCollapse () {
+      this.setting.sideIsCollapse = !this.setting.sideIsCollapse
+    },
+  },
+})
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useAppStore, import.meta.hot))
+}
@@ -0,0 +1,3 @@
+import { createPinia } from 'pinia'
+
+export const pinia = createPinia()
@@ -0,0 +1,64 @@
+import { defineStore, acceptHMRUpdate } from 'pinia'
+import { lastRoutes, asyncRoutes, router } from '@/router'
+
+function filterRoute (routes, enableNames) {
+  return routes.filter(route => {
+    if (route.children && route.children.length) {
+      return enableNames.includes(route.name) || route.children.some(r => enableNames.includes(r.name))
+    } else {
+      return enableNames.includes(route.name)
+    }
+  }).map(route => {
+    if (route.children && route.children.length) {
+      return {
+        ...route,
+        children: filterRoute(route.children, enableNames),
+      }
+    } else {
+      return { ...route }
+    }
+  })
+}
+
+export const useRouteStore = defineStore({
+  id: 'router',
+  state: () => ({
+    routes: [],
+    activeRoute: '',
+    loaded: 0,
+    keepAlive: [],
+  }),
+  actions: {
+    addRoutes (accessRouteNames) {
+      if (accessRouteNames.includes('*')) {
+        this.routes = asyncRoutes
+      } else {
+        this.routes = filterRoute(asyncRoutes, accessRouteNames)
+      }
+
+      this.routes.forEach(route => {
+        router.addRoute(route)
+      })
+      lastRoutes.forEach(route => {
+        router.addRoute(route)
+      })
+      this.addKeepAlive(this.routes)
+    },
+    addKeepAlive (route) {
+      if (route instanceof Array) {
+        route.forEach(r => {
+          this.addKeepAlive(r)
+        })
+      } else if (route.children && route.children.length) {
+        this.addKeepAlive(route.children)
+      } else if (route.meta?.keepAlive && !this.keepAlive.includes(route.name)) {
+        this.keepAlive.push(route.name)
+      }
+    },
+
+  },
+})
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useRouteStore, import.meta.hot))
+}
@@ -0,0 +1,73 @@
+import { defineStore, acceptHMRUpdate } from 'pinia'
+
+export const useTagsStore = defineStore({
+  id: 'tags',
+  state: () => ({
+    tags: [],
+    cached: [],
+  }),
+  actions: {
+    initTags () {
+      this.tags.push(
+        {
+          name: 'Home',
+          path: '/Home',
+          title: '首页',
+          active: false,
+          closeable: false,
+          keepAlive: false,
+        })
+    },
+    addTag (route) {
+      const tags = this.tags
+      if (tags.find(t => t.name === route.name)) {
+        tags.forEach(t => t.active = false)
+        tags.find(t => t.name === route.name).active = true
+      } else {
+        tags.forEach(t => t.active = false)
+        if (route.meta?.keepAlive) {
+          this.addCachedTag(route.name)
+        }
+        tags.push({
+          name: route.name,
+          path: route.fullPath,
+          title: route.meta?.title || route.name,
+          active: true,
+          closeable: true,
+          keepAlive: route.meta?.keepAlive,
+        })
+
+      }
+      this.$patch({ tags })
+    },
+    removeTag (tag) {
+      let tags = this.tags
+      if (tags.find(t => t.name === tag.name)) {
+        const index = tags.findIndex(t => t.name === tag.name)
+        if (index > -1) {
+          if (tags[index].keepAlive) {
+            this.removeCachedTag(tags[index].name)
+          }
+          tags.splice(index, 1)
+        }
+      }
+      this.$patch({ tags })
+    },
+    addCachedTag (name) {
+      if (!this.cached.includes(name)) {
+        this.cached.push(name)
+      }
+    },
+    removeCachedTag (name) {
+      if (this.cached.includes(name)) {
+        this.cached.splice(this.cached.indexOf(name), 1)
+      }
+
+    },
+
+  },
+})
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useTagsStore, import.meta.hot))
+}
@@ -0,0 +1,62 @@
+import { defineStore, acceptHMRUpdate } from 'pinia'
+import { current, login } from '@/api/user'
+import { setToken, removeToken } from '@/utils/auth'
+import { useRouteStore } from '@/store/router'
+
+export const useUserStore = defineStore({
+  id: 'user',
+  state: () => ({
+    nickname: '',
+    username: '',
+    token: '',
+    role: '',
+    avatar: '',
+    route_names: [],
+  }),
+
+  actions: {
+    logout () {
+      removeToken()
+      this.$patch({
+        name: '',
+        role: {},
+      })
+    },
+
+    async login (form) {
+      const res = await login(form).catch(_ => false)
+      if (res) {
+        const userData = res.data
+        setToken(userData.token)
+        //
+        localStorage.setItem('user_info', JSON.stringify({ name: userData.username }))
+        this.$patch({
+          ...userData,
+        })
+        if (userData.route_names && userData.route_names.length) {
+          useRouteStore().addRoutes(userData.route_names)
+        }
+        return userData
+      } else {
+        return false
+      }
+    },
+    async info () {
+      const res = await current().catch(_ => false)
+      if (res) {
+        const userData = res.data
+        setToken(userData.token)
+        this.$patch({
+          ...userData,
+        })
+        useRouteStore().addRoutes(userData.route_names)
+        return userData
+      }
+      return false
+    },
+  },
+})
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot))
+}
@@ -0,0 +1,20 @@
+$basicBlack: #000000;
+$basicWhite: #ffffff;
+
+$primaryColor: #409eff;
+$sideBarWidth: 210px;
+
+:root {
+  --basicBlack: #000000;
+  --basicWhite: #ffffff;
+  --primaryColor: #409eff;
+}
+
+.list-body{
+  margin: 10px 0;
+}
+
+.dialog-form{
+  max-width: 600px;
+  margin: 20px auto;
+}
@@ -0,0 +1,13 @@
+const TokenKey = 'access_token'
+
+export function getToken () {
+  return localStorage.getItem(TokenKey)
+}
+
+export function setToken (token) {
+  return localStorage.setItem(TokenKey, token)
+}
+
+export function removeToken () {
+  return localStorage.removeItem(TokenKey)
+}
@@ -0,0 +1,4 @@
+
+
+export const ENABLE_STATUS = 1
+export const DISABLE_STATUS = 2
@@ -0,0 +1,34 @@
+export function get_suffix(filename) {
+  var pos = filename.lastIndexOf('.')
+  var suffix = ''
+  if (pos !== -1) {
+    suffix = filename.substring(pos)
+  }
+  return suffix
+}
+
+export function random_string(len) {
+  len = len || 32
+  var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
+  var maxPos = chars.length
+  var pwd = ''
+  for (let i = 0; i < len; i++) {
+    pwd += chars.charAt(Math.floor(Math.random() * maxPos))
+  }
+  return pwd
+}
+
+export function random_filename(filename) {
+  var suffix = get_suffix(filename)
+  var time = new Date()
+  var time2 = new Date('2020/01/01')
+  return Math.ceil((time.getTime() - time2.getTime()) / 1000) + '_' + random_string(10) + suffix
+}
+
+export function utf8_to_b64(str) {
+  return window.btoa(unescape(encodeURIComponent(str)))
+}
+
+export function b64_to_utf8(str) {
+  return decodeURIComponent(escape(window.atob(str)))
+}
@@ -0,0 +1,80 @@
+import axios from 'axios'
+import { ElMessage } from 'element-plus'
+import { getToken, removeToken } from '@/utils/auth'
+import { useUserStore } from '@/store/user'
+import { pinia } from '@/store'
+
+// create an axios instance
+const service = axios.create({
+  baseURL: import.meta.env.VITE_SERVER_API,
+  withCredentials: true, // send cookies when cross-domain requests
+  timeout: 50000, // request timeout
+})
+
+// request interceptor
+service.interceptors.request.use(
+  config => {
+    const userStore = useUserStore(pinia)
+
+    const token = userStore.token || getToken()
+    if (token) {
+      if (!config.headers) {
+        config.headers = {}
+      }
+      config.headers['api-token'] = token
+    }
+    return config
+  },
+  error => {
+    // do something with request error
+    return Promise.reject(error)
+  },
+)
+
+// response interceptor
+service.interceptors.response.use(
+  /**
+   * If you want to get http information such as headers or status
+   * Please return  response => response
+   */
+
+  /**
+   * Determine the request status by custom code
+   * Here is just an example
+   * You can also judge the status by HTTP Status Code
+   */
+  response => {
+    const res = response.data
+
+    // if the custom code is not 20000, it is judged as an error.
+    if (res.code !== 0) {
+      ElMessage({
+        message: res.message || 'error',
+        type: 'error',
+        duration: 5 * 1000,
+      })
+
+      if (res.code === 403) {
+        removeToken()
+        window.location.reload()
+      }
+      return Promise.reject(res.message || 'error')
+    } else {
+      return res
+    }
+  },
+  error => {
+    if (error.code === 'ECONNABORTED'
+      && error.message.indexOf('timeout') > -1) {
+      error.message = '请求超时！'
+    }
+    ElMessage({
+      message: error.message,
+      type: 'error',
+      duration: 5 * 1000,
+    })
+    return Promise.reject(error)
+  },
+)
+
+export default service
@@ -0,0 +1,26 @@
+import { ref } from 'vue'
+import { config } from '@/api/rustdesk'
+
+export const toWebClientLink = (row) => {
+  window.open(`${rustdeskConfig.value.api_server}/webclient/#/?id=${row.id}`)
+}
+
+export function loadRustdeskConfig () {
+  const rustdeskConfig = ref({})
+  const fetchConfig = async () => {
+    const res = await config().catch(_ => false)
+    if (res) {
+      rustdeskConfig.value = res.data
+      localStorage.setItem('custom-rendezvous-server', res.data.id_server)
+      localStorage.setItem('key', res.data.key)
+      localStorage.setItem('api-server', res.data.api_server)
+    }
+  }
+  if (rustdeskConfig.value.id_server === undefined || rustdeskConfig.value.key === undefined) {
+    fetchConfig()
+  }
+  return {
+    rustdeskConfig,
+  }
+}
+const { rustdeskConfig } = loadRustdeskConfig()
@@ -0,0 +1,132 @@
+import { onActivated, onMounted, reactive, ref, watch } from 'vue'
+import { create, list, remove, update } from '@/api/address_book'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useRoute } from 'vue-router'
+
+export function useRepositories () {
+  const route = useRoute()
+  const user_id = route.query?.user_id
+
+  const listRes = reactive({
+    list: [], total: 0, loading: false,
+  })
+  const listQuery = reactive({
+    page: 1,
+    page_size: 10,
+    is_my: 0,
+    user_id: user_id ? parseInt(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('确定删除么?', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }).catch(_ => false)
+    if (!cf) {
+      return false
+    }
+
+    const res = await remove({ row_id: row.row_id }).catch(_ => false)
+    if (res) {
+      ElMessage.success('操作成功')
+      getList()
+    }
+  }
+
+  const platformList = [
+    { label: 'Windows', value: 'Windows' },
+    { label: 'Linux', value: 'Linux' },
+    { label: 'Mac OS', value: 'Mac OS' },
+    { label: 'Android', value: 'Android' },
+  ]
+  const formVisible = ref(false)
+  const formData = reactive({
+    'row_id': 0,
+    'alias': '',
+    'force_always_relay': false,
+    'hash': '',
+    'hostname': '',
+    'id': '',
+    'login_name': '',
+    'online': false,
+    'password': '',
+    'platform': '',
+    'rdp_port': '',
+    'rdp_username': '',
+    'same_server': false,
+    'tags': [],
+    'user_id': null,
+    'username': '',
+  })
+
+  const toEdit = (row) => {
+    formVisible.value = true
+    //将row中的数据赋值给formData
+    Object.keys(formData).forEach(key => {
+      formData[key] = row[key]
+    })
+
+  }
+  const toAdd = () => {
+    formVisible.value = true
+    //重置formData
+    formData.row_id = 0
+    formData.alias = ''
+    formData.force_always_relay = false
+    formData.hash = ''
+    formData.hostname = ''
+    formData.id = ''
+    formData.login_name = ''
+    formData.online = false
+    formData.password = ''
+    formData.platform = ''
+    formData.rdp_port = ''
+    formData.rdp_username = ''
+    formData.same_server = false
+    formData.tags = []
+    formData.user_id = null
+    formData.username = ''
+
+  }
+  const submit = async () => {
+    const api = formData.row_id ? update : create
+    const res = await api(formData).catch(_ => false)
+    if (res) {
+      ElMessage.success('操作成功')
+      formVisible.value = false
+      getList()
+    }
+  }
+
+  return {
+    listRes,
+    listQuery,
+    getList,
+    handlerQuery,
+    del,
+    platformList,
+    formVisible,
+    formData,
+    toEdit,
+    toAdd,
+    submit,
+  }
+}
@@ -0,0 +1,212 @@
+<template>
+  <div>
+    <el-card class="list-query" shadow="hover">
+      <el-form inline label-width="60px">
+        <el-form-item label="用户">
+          <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">筛选</el-button>
+          <el-button type="danger" @click="toAdd">添加</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"/>
+        <el-table-column label="所属用户" 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="username" label="用户名" align="center"/>
+        <el-table-column prop="hostname" label="主机名" align="center"/>
+        <el-table-column prop="alias" label="别名" align="center"/>
+        <el-table-column prop="platform" label="平台" align="center"/>
+        <el-table-column prop="hash" label="hash" align="center"/>
+        <el-table-column prop="tags" label="标签" align="center"/>
+        <!--        <el-table-column prop="created_at" label="创建时间" align="center"/>-->
+        <!--        <el-table-column prop="updated_at" label="更新时间" align="center"/>-->
+        <el-table-column label="操作" align="center" width="400">
+          <template #default="{row}">
+            <el-button type="success" @click="toWebClientLink(row)">Web-Client</el-button>
+            <el-button @click="toEdit(row)">编辑</el-button>
+            <el-button type="danger" @click="del(row)">删除</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.row_id?'创建':'修改'">
+      <el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
+        <el-form-item label="用户" 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="id" prop="id" required>
+          <el-input v-model="formData.id"></el-input>
+        </el-form-item>
+        <el-form-item label="用户名" prop="username">
+          <el-input v-model="formData.username"></el-input>
+        </el-form-item>
+        <el-form-item label="别名" prop="alias">
+          <el-input v-model="formData.alias"></el-input>
+        </el-form-item>
+        <el-form-item label="hash" prop="hash">
+          <el-input v-model="formData.hash"></el-input>
+        </el-form-item>
+        <el-form-item label="主机名" prop="hostname">
+          <el-input v-model="formData.hostname"></el-input>
+        </el-form-item>
+        <el-form-item label="登录名" prop="login_name">
+          <el-input v-model="formData.login_name"></el-input>
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input v-model="formData.password"></el-input>
+        </el-form-item>
+        <el-form-item label="平台" 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="标签" 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="force_always_relay" required>
+                <el-switch v-model="formData.force_always_relay"></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="rdp_port">
+                <el-input v-model="formData.rdp_port"></el-input>
+              </el-form-item>
+              <el-form-item label="rdp用户名" prop="rdp_username">
+                <el-input v-model="formData.rdp_username"></el-input>
+              </el-form-item>
+              <el-form-item label="同一服务器" prop="same_server">
+                <el-switch v-model="formData.same_server"></el-switch>
+              </el-form-item>-->
+
+
+        <el-form-item>
+          <el-button @click="formVisible = false">取消</el-button>
+          <el-button @click="submit" type="primary">提交</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+  import { onActivated, onMounted, reactive, ref, watch } from 'vue'
+  import { create, list, remove, update } from '@/api/address_book'
+  import { list as fetchTagList } from '@/api/tag'
+  import { ElMessage, ElMessageBox } from 'element-plus'
+  import { loadAllUsers } from '@/global'
+  import { useRoute } from 'vue-router'
+  import { useRepositories } from '@/views/address_book/index'
+  import { toWebClientLink } from '@/utils/webclient'
+
+  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,
+    listQuery,
+    getList,
+    handlerQuery,
+    del,
+    formVisible,
+    platformList,
+    formData,
+    toEdit,
+    toAdd,
+    submit,
+    activeChange,
+    currentColor,
+  } = useRepositories()
+
+  onMounted(getList)
+  onActivated(getList)
+
+  watch(() => listQuery.page, getList)
+
+  watch(() => listQuery.page_size, handlerQuery)
+
+</script>
+
+<style scoped lang="scss">
+.list-query .el-select {
+  --el-select-width: 160px;
+}
+
+.colors {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .colorbox {
+    width: 50px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .dot {
+      width: 10px;
+      height: 10px;
+      display: block;
+      border-radius: 50%;
+    }
+  }
+
+}
+
+</style>
@@ -0,0 +1,13 @@
+<template>
+  <h1>404</h1>
+</template>
+
+<script>
+  export default {
+    name: '404',
+  }
+</script>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <el-card class="list-query" shadow="hover">
+      <el-form inline label-width="60px">
+        <!--        <el-form-item label="名称">
+                  <el-input v-model="listQuery.name"></el-input>
+                </el-form-item>-->
+        <el-form-item>
+          <el-button type="primary" @click="handlerQuery">筛选</el-button>
+          <el-button type="danger" @click="toAdd">添加</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>
+        <el-table-column prop="name" label="名称" align="center"/>
+        <el-table-column prop="created_at" label="创建时间" align="center"/>
+        <el-table-column prop="updated_at" label="更新时间" align="center"/>
+        <el-table-column label="操作" align="center">
+          <template #default="{row}">
+            <el-button @click="toEdit(row)">编辑</el-button>
+            <el-button type="danger" @click="del(row)">删除</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" :title="!formData.id?'创建':'修改'" width="800">
+      <el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
+        <el-form-item label="名称" prop="name" required>
+          <el-input v-model="formData.name"></el-input>
+        </el-form-item>
+        <el-form-item label="类型" prop="type" required>
+          <el-radio-group v-model="formData.type">
+            <el-radio v-for="item in groupTypes" :key="item.value" :label="item.value" style="display: block">
+              {{ item.label }}
+            <span style="font-size: 12px;color: #999">{{item.note}}</span>
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="formVisible = false">取消</el-button>
+          <el-button @click="submit" type="primary">提交</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+  import { onMounted, reactive, watch, ref, onActivated } from 'vue'
+  import { list, create, update, detail, remove } from '@/api/group'
+  import { ElMessage, ElMessageBox } from 'element-plus'
+
+  const listRes = reactive({
+    list: [], total: 0, loading: false,
+  })
+  const listQuery = reactive({
+    page: 1,
+    page_size: 10,
+  })
+
+  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('确定删除么?', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }).catch(_ => false)
+    if (!cf) {
+      return false
+    }
+
+    const res = await remove({ id: row.id }).catch(_ => false)
+    if (res) {
+      ElMessage.success('操作成功')
+      getList()
+    }
+  }
+  onMounted(getList)
+  onActivated(getList)
+
+  watch(() => listQuery.page, getList)
+
+  watch(() => listQuery.page_size, handlerQuery)
+
+  const groupTypes = [
+    { label: '普通组', value: 1, note: '只有管理员能看到小组成员和成员地址簿' },
+    { label: '共享组', value: 2, note: '所有用户都能看到小组成员和成员地址簿' },
+  ]
+  const formVisible = ref(false)
+  const formData = reactive({
+    id: 0,
+    name: '',
+    type: 1
+  })
+
+  const toEdit = (row) => {
+    formVisible.value = true
+    formData.id = row.id
+    formData.name = row.name
+    formData.type = row.type
+  }
+  const toAdd = () => {
+    formVisible.value = true
+    formData.id = 0
+    formData.name = ''
+    formData.type = 1
+  }
+  const submit = async () => {
+    const api = formData.id ? update : create
+    const res = await api(formData).catch(_ => false)
+    if (res) {
+      ElMessage.success('操作成功')
+      formVisible.value = false
+      getList()
+    }
+  }
+
+</script>
+
+<style scoped lang="scss">
+
+</style>
@@ -0,0 +1,75 @@
+<template>
+  <div class="index">
+  </div>
+</template>
+
+<script>
+  import { defineComponent, ref, onMounted } from 'vue'
+
+  export default defineComponent({
+    name: 'Home',
+    setup () {
+      const todoList = ref([
+        {title:'修复bug'},
+        {title:'修复bug'},
+        {title:'修复bug'},
+        {title:'增加新功能'},
+      ])
+      return {
+        todoList
+      }
+    },
+  })
+</script>
+
+<style scoped lang="scss">
+  .index {
+    .counts {
+      display: flex;
+      justify-content: space-between;
+
+      .item {
+        width: 32.5%;
+
+        .num {
+          font-size: 28px;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          .before, .after {
+            font-size: 18px;
+
+            .exp {
+              font-size: 12px;
+              margin-right: 10px;
+            }
+
+            .red {
+              color: red;
+            }
+
+            .green {
+              color: green;
+            }
+          }
+
+          .middle {
+            .exp {
+              font-size: 20px;
+              margin-right: 10px;
+            }
+
+            span + span {
+              font-weight: bold;
+            }
+          }
+        }
+      }
+
+    }
+    .lans, .todo{
+      height: 250px
+    }
+  }
+</style>
@@ -0,0 +1,91 @@
+<template>
+  <div class="login">
+    <el-card class="login-card">
+      <h1>登录</h1>
+      <el-form label-width="60px">
+        <el-form-item label="用户名">
+          <el-input v-model="form.username"></el-input>
+        </el-form-item>
+        <el-form-item label="密码">
+          <el-input v-model="form.password" type="password" @keyup.enter.native="login" show-password></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="login" type="primary">登录</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script>
+  import { defineComponent, reactive } from 'vue'
+  import { useUserStore } from '@/store/user'
+  import { ElMessage } from 'element-plus'
+  import { useRoute, useRouter } from 'vue-router'
+
+  export default defineComponent({
+    setup (props) {
+      const userStore = useUserStore()
+      const route = useRoute()
+      const router = useRouter()
+      const form = reactive({
+        username: 'admin',
+        password: 'admin',
+      })
+      const redirect = route.query?.redirect
+      const login = async () => {
+        const res = await userStore.login(form)
+        if (res) {
+          ElMessage.success('登录成功')
+          router.push({ path: redirect || '/', replace: true })
+        }
+      }
+      return {
+        redirect,
+        form,
+        login,
+      }
+    },
+  })
+</script>
+
+<style scoped lang="scss">
+  .login {
+    width: 100vw;
+    height: 100vh;
+    background-color: #2d3a4b;
+    padding-top: 200px;
+    box-sizing: border-box;
+    .tips {
+      font-size: 12px;
+      color: #fff;
+      margin-left: 60px;
+    }
+
+    .login-card {
+      width: 500px;
+      background-color: #283342;
+      color: #fff;
+      border: none;
+      margin: 0 auto;
+      .el-form-item {
+
+        ::v-deep(.el-form-item__label) {
+          color: #fff;
+        }
+
+        .el-input {
+
+          ::v-deep(.el-input__wrapper) {
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            background: transparent;
+          }
+
+          ::v-deep(input) {
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+</style>
@@ -0,0 +1,204 @@
+<template>
+  <div>
+    <el-card class="list-query" shadow="hover">
+      <el-form inline label-width="60px">
+        <el-form-item>
+          <el-button type="primary" @click="handlerQuery">筛选</el-button>
+          <el-button type="danger" @click="toAdd">添加</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"/>
+        <el-table-column prop="username" label="用户名" align="center"/>
+        <el-table-column prop="hostname" label="主机名" align="center"/>
+        <el-table-column prop="alias" label="别名" align="center"/>
+        <el-table-column prop="platform" label="平台" align="center"/>
+        <el-table-column prop="hash" label="hash" align="center"/>
+        <el-table-column prop="tags" label="标签" align="center"/>
+        <!--        <el-table-column prop="created_at" label="创建时间" align="center"/>-->
+        <!--        <el-table-column prop="updated_at" label="更新时间" align="center"/>-->
+        <el-table-column label="操作" align="center" width="400">
+          <template #default="{row}">
+            <el-button type="success" @click="toWebClientLink(row)">Web-Client</el-button>
+            <el-button @click="toEdit(row)">编辑</el-button>
+            <el-button type="danger" @click="del(row)">删除</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.row_id?'创建':'修改'">
+      <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="用户名" prop="username">
+          <el-input v-model="formData.username"></el-input>
+        </el-form-item>
+        <el-form-item label="别名" prop="alias">
+          <el-input v-model="formData.alias"></el-input>
+        </el-form-item>
+        <el-form-item label="hash" prop="hash">
+          <el-input v-model="formData.hash"></el-input>
+        </el-form-item>
+        <el-form-item label="主机名" prop="hostname">
+          <el-input v-model="formData.hostname"></el-input>
+        </el-form-item>
+        <el-form-item label="登录名" prop="login_name">
+          <el-input v-model="formData.login_name"></el-input>
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input v-model="formData.password"></el-input>
+        </el-form-item>
+        <el-form-item label="平台" 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="标签" 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="force_always_relay" required>
+                <el-switch v-model="formData.force_always_relay"></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="rdp_port">
+                <el-input v-model="formData.rdp_port"></el-input>
+              </el-form-item>
+              <el-form-item label="rdp用户名" prop="rdp_username">
+                <el-input v-model="formData.rdp_username"></el-input>
+              </el-form-item>
+              <el-form-item label="同一服务器" prop="same_server">
+                <el-switch v-model="formData.same_server"></el-switch>
+              </el-form-item>-->
+
+
+        <el-form-item>
+          <el-button @click="formVisible = false">取消</el-button>
+          <el-button @click="submit" type="primary">提交</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+  import { onActivated, onMounted, reactive, ref, watch } from 'vue'
+  import { create, list, remove, update } from '@/api/address_book'
+  import { list as fetchTagList } from '@/api/tag'
+  import { useRepositories } from '@/views/address_book'
+  import { toWebClientLink } from '@/utils/webclient'
+
+  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,
+    activeChange,
+    currentColor,
+  } = useRepositories()
+
+  listQuery.is_my = 1
+
+  onMounted(getList)
+  onActivated(getList)
+
+  watch(() => listQuery.page, getList)
+
+  watch(() => listQuery.page_size, handlerQuery)
+
+  watch(() => listRes.list, () => {
+        const peers = {}
+        listRes.list.map(item => {
+          peers[item.id] = {
+            'view-style': 'shrink',
+            tm: new Date().getTime(),
+            info: {
+              'id': item.id,
+              'username': item.username,
+              'hostname': item.hostname,
+              'alias': item.alias,
+              'platform': item.platform,
+              'hash': item.hash,
+              'tags': item.tags,
+            },
+          }
+        })
+        localStorage.setItem('peers', JSON.stringify(peers))
+      },
+      {
+        immediate: true,
+      })
+
+</script>
+
+<style scoped lang="scss">
+.list-query .el-select {
+  --el-select-width: 160px;
+}
+
+.colors {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .colorbox {
+    width: 50px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .dot {
+      width: 10px;
+      height: 10px;
+      display: block;
+      border-radius: 50%;
+    }
+  }
+
+}
+
+</style>
@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <el-card class="list-query" shadow="hover">
+      <el-form inline label-width="60px">
+        <el-form-item>
+          <el-button type="primary" @click="handlerQuery">筛选</el-button>
+          <el-button type="danger" @click="toAdd">添加</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="name" label="名称" align="center"/>
+        <el-table-column prop="color" label="颜色" 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="{backgroundColor: row.color}" class="dot">
+                </div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="created_at" label="创建时间" align="center"/>
+        <el-table-column prop="updated_at" label="更新时间" align="center"/>
+        <el-table-column label="操作" align="center">
+          <template #default="{row}">
+            <el-button @click="toEdit(row)">编辑</el-button>
+            <el-button type="danger" @click="del(row)">删除</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" :title="!formData.id?'创建':'修改'" width="800">
+      <el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
+        <el-form-item label="名称" prop="name" required>
+          <el-input v-model="formData.name"></el-input>
+        </el-form-item>
+        <el-form-item label="颜色" 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>
+          <el-button @click="formVisible = false">取消</el-button>
+          <el-button @click="submit" type="primary">提交</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+  import { onMounted, watch, onActivated } from 'vue'
+  import { useRepositories } from '@/views/tag'
+
+  const {
+    listRes,
+    listQuery,
+    getList,
+    handlerQuery,
+    del,
+    formVisible,
+    formData,
+    toEdit,
+    toAdd,
+    submit,
+    activeChange,
+    currentColor,
+  } = useRepositories()
+
+  listQuery.is_my = 1
+
+  onMounted(getList)
+  onActivated(getList)
+
+  watch(() => listQuery.page, getList)
+
+  watch(() => listQuery.page_size, handlerQuery)
+
+</script>
+
+<style scoped lang="scss">
+.list-query .el-select {
+  --el-select-width: 160px;
+}
+
+.colors {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .colorbox {
+    width: 50px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .dot {
+      width: 10px;
+      height: 10px;
+      display: block;
+      border-radius: 50%;
+    }
+  }
+
+}
+
+</style>
@@ -0,0 +1,211 @@
+<template>
+  <div>
+    <el-card class="list-query" shadow="hover">
+      <el-form inline label-width="60px">
+        <el-form-item>
+          <el-button type="primary" @click="handlerQuery">筛选</el-button>
+          <el-button type="danger" @click="toAdd">添加</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card class="list-body" shadow="hover">
+      <el-table :data="listRes.list" v-loading="listRes.loading" border size="small">
+        <el-table-column prop="id" label="id" align="center"/>
+        <el-table-column prop="cpu" label="cpu" align="center"/>
+        <el-table-column prop="hostname" label="主机名" align="center"/>
+        <el-table-column prop="memory" label="内存" align="center"/>
+        <el-table-column prop="os" label="系统" align="center"/>
+        <el-table-column prop="username" label="username" align="center"/>
+        <el-table-column prop="uuid" label="uuid" align="center"/>
+        <el-table-column prop="version" label="版本号" align="center"/>
+        <el-table-column prop="created_at" label="创建时间" align="center"/>
+        <el-table-column prop="updated_at" label="更新时间" align="center"/>
+        <el-table-column label="操作" align="center" width="400">
+          <template #default="{row}">
+            <el-button type="success" @click="toWebClientLink(row)">Web-Client</el-button>
+            <el-button @click="toEdit(row)">编辑</el-button>
+            <el-button type="danger" @click="del(row)">删除</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" :title="!formData.row_id?'创建':'修改'" width="800">
+      <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="用户名" prop="username">
+          <el-input v-model="formData.username"></el-input>
+        </el-form-item>
+        <el-form-item label="主机名" prop="hostname">
+          <el-input v-model="formData.hostname"></el-input>
+        </el-form-item>
+        <el-form-item label="cpu" prop="cpu">
+          <el-input v-model="formData.cpu"></el-input>
+        </el-form-item>
+        <el-form-item label="内存" prop="memory">
+          <el-input v-model="formData.memory"></el-input>
+        </el-form-item>
+        <el-form-item label="系统" prop="os">
+          <el-input v-model="formData.os"></el-input>
+        </el-form-item>
+        <el-form-item label="uuid" prop="uuid">
+          <el-input v-model="formData.uuid"></el-input>
+        </el-form-item>
+        <el-form-item label="版本" prop="version">
+          <el-input v-model="formData.version"></el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button @click="formVisible = false">取消</el-button>
+          <el-button @click="submit" type="primary">提交</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+  import { onActivated, onMounted, reactive, ref, watch } from 'vue'
+  import { create, list, remove, update } from '@/api/peer'
+  import { list as fetchTagList } from '@/api/tag'
+  import { ElMessage, ElMessageBox } from 'element-plus'
+  import { loadAllUsers } from '@/global'
+  import { toWebClientLink } from '@/utils/webclient'
+
+  const listRes = reactive({
+    list: [], total: 0, loading: false,
+  })
+  const listQuery = reactive({
+    page: 1,
+    page_size: 10,
+  })
+
+  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('确定删除么?', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }).catch(_ => false)
+    if (!cf) {
+      return false
+    }
+
+    const res = await remove({ row_id: row.row_id }).catch(_ => false)
+    if (res) {
+      ElMessage.success('操作成功')
+      getList()
+    }
+  }
+  onMounted(getList)
+  onActivated(getList)
+
+  watch(() => listQuery.page, getList)
+
+  watch(() => listQuery.page_size, handlerQuery)
+
+  const platformList = [
+    { label: 'Windows', value: 'Windows' },
+    { label: 'Linux', value: 'Linux' },
+    { label: 'Mac OS', value: 'Mac OS' },
+    { label: 'Android', value: 'Android' },
+  ]
+  const formVisible = ref(false)
+  const formData = reactive({
+    row_id: 0,
+    cpu: '',
+    hostname: '',
+    id: '',
+    memory: '',
+    os: '',
+    username: '',
+    uuid: '',
+    version: '',
+  })
+
+  const toEdit = (row) => {
+    formVisible.value = true
+    //将row中的数据赋值给formData
+    Object.keys(formData).forEach(key => {
+      formData[key] = row[key]
+    })
+  }
+  const toAdd = () => {
+    formVisible.value = true
+    //重置formData
+    formData.row_id = 0
+    formData.cpu = ''
+    formData.hostname = ''
+    formData.id = ''
+    formData.memory = ''
+    formData.os = ''
+    formData.username = ''
+    formData.uuid = ''
+    formData.version = ''
+  }
+  const submit = async () => {
+    const api = formData.row_id ? update : create
+    const res = await api(formData).catch(_ => false)
+    if (res) {
+      ElMessage.success('操作成功')
+      formVisible.value = false
+      getList()
+    }
+  }
+
+</script>
+
+<style scoped lang="scss">
+.list-query .el-select {
+  --el-select-width: 160px;
+}
+
+.colors {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .colorbox {
+    width: 50px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .dot {
+      width: 10px;
+      height: 10px;
+      display: block;
+      border-radius: 50%;
+    }
+  }
+
+}
+
+</style>
@@ -0,0 +1,155 @@
+import { onActivated, onMounted, reactive, ref, watch } from 'vue'
+import { create, list, remove, update } from '@/api/tag'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useRoute } from 'vue-router'
+
+export function useRepositories () {
+  //获取query
+  const route = useRoute()
+  const user_id = route.query?.user_id
+  const listRes = reactive({
+    list: [], total: 0, loading: false,
+  })
+  const listQuery = reactive({
+    page: 1,
+    page_size: 10,
+    is_my: 0,
+    user_id: user_id ? parseInt(user_id) : null,
+  })
+
+  const flutterColor2rgba = (color) => {
+    // color 是十进制的数字,先转成16进制
+    let hex = color.toString(16)
+    console.log('hex', hex)
+    //前两位是透明度
+    let alpha = hex.slice(0, 2)
+    //后六位是颜色
+    let rgba = hex.slice(2)
+    return `rgba(${parseInt(rgba.slice(0, 2), 16)}, ${parseInt(rgba.slice(2, 4), 16)}, ${parseInt(rgba.slice(4, 6), 16)}, ${parseInt(alpha, 16) / 255})`
+  }
+
+  const rgba2flutterColor = (color) => {
+    console.log('color', color)
+    //rgba(133, 33, 33, 0.81)
+    let rgba = color.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d+(\.\d+)?)\)/)
+    console.log('rgba', rgba)
+    let alpha = Math.round(parseFloat(rgba[4]) * 255).toString(16)
+    let r = parseInt(rgba[1]).toString(16)
+    let g = parseInt(rgba[2]).toString(16)
+    let b = parseInt(rgba[3]).toString(16)
+    //如果是1位要补位
+    if (alpha.length === 1) {
+      alpha = '0' + alpha
+    }
+    if (r.length === 1) {
+      r = '0' + r
+    }
+    if (g.length === 1) {
+      g = '0' + g
+    }
+    if (b.length === 1) {
+      b = '0' + b
+    }
+    return parseInt(alpha + r + g + b, 16)
+  }
+
+  const getList = async () => {
+    listRes.loading = true
+    const res = await list(listQuery).catch(_ => false)
+    listRes.loading = false
+    if (res) {
+      listRes.list = res.data.list.map(item => {
+        item.color = flutterColor2rgba(item.color)
+        return item
+      })
+      listRes.total = res.data.total
+    }
+  }
+  const handlerQuery = () => {
+    if (listQuery.page === 1) {
+      getList()
+    } else {
+      listQuery.page = 1
+    }
+  }
+
+  const del = async (row) => {
+    const cf = await ElMessageBox.confirm('确定删除么?', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }).catch(_ => false)
+    if (!cf) {
+      return false
+    }
+
+    const res = await remove({ id: row.id }).catch(_ => false)
+    if (res) {
+      ElMessage.success('操作成功')
+      getList()
+    }
+  }
+  onMounted(getList)
+  onActivated(getList)
+
+  watch(() => listQuery.page, getList)
+
+  watch(() => listQuery.page_size, handlerQuery)
+
+  const formVisible = ref(false)
+  const formData = reactive({
+    id: 0,
+    name: '',
+    color: 0,
+    user_id: 0,
+  })
+  const currentColor = ref('')
+  const activeChange = (c) => {
+    console.log(c)
+    currentColor.value = c
+  }
+  const toEdit = (row) => {
+    console.log('row', row)
+    formVisible.value = true
+    formData.id = row.id
+    formData.name = row.name
+    formData.color = row.color
+    formData.user_id = row.user_id
+  }
+  const toAdd = () => {
+    formVisible.value = true
+    formData.id = 0
+    formData.name = ''
+    formData.color = 0
+    formData.user_id = 0
+  }
+  const submit = async () => {
+    console.log(formData)
+    const api = formData.id ? update : create
+    const data = {
+      ...formData,
+      color: rgba2flutterColor(formData.color),
+    }
+    console.log(data)
+    const res = await api(data).catch(_ => false)
+    if (res) {
+      ElMessage.success('操作成功')
+      formVisible.value = false
+      getList()
+    }
+  }
+  return {
+    listRes,
+    listQuery,
+    getList,
+    handlerQuery,
+    del,
+    formVisible,
+    formData,
+    toEdit,
+    toAdd,
+    submit,
+    activeChange,
+    currentColor,
+  }
+}
@@ -0,0 +1,165 @@
+<template>
+  <div>
+    <el-card class="list-query" shadow="hover">
+      <el-form inline label-width="60px">
+        <el-form-item label="用户">
+          <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">筛选</el-button>
+          <el-button type="danger" @click="toAdd">添加</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 label="所属用户" 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="名称" align="center"/>
+        <el-table-column prop="color" label="颜色" 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="{backgroundColor: row.color}" class="dot">
+                </div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="created_at" label="创建时间" align="center"/>
+        <el-table-column prop="updated_at" label="更新时间" align="center"/>
+        <el-table-column label="操作" align="center">
+          <template #default="{row}">
+            <el-button @click="toEdit(row)">编辑</el-button>
+            <el-button type="danger" @click="del(row)">删除</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" :title="!formData.id?'创建':'修改'" width="800">
+      <el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
+        <el-form-item label="名称" prop="name" required>
+          <el-input v-model="formData.name"></el-input>
+        </el-form-item>
+        <el-form-item label="颜色" 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="用户" 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">取消</el-button>
+          <el-button @click="submit" type="primary">提交</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+  import { onMounted, reactive, watch, ref, onActivated } from 'vue'
+  import { list, create, update, detail, remove } from '@/api/tag'
+  import { ElMessage, ElMessageBox } from 'element-plus'
+  import { loadAllUsers } from '@/global'
+  import { useRoute } from 'vue-router'
+  import { useRepositories } from '@/views/tag/index'
+
+
+
+  const { allUsers, getAllUsers } = loadAllUsers()
+  getAllUsers()
+  const {
+    listRes,
+    listQuery,
+    getList,
+    handlerQuery,
+    del,
+    formVisible,
+    formData,
+    toEdit,
+    toAdd,
+    submit,
+    activeChange,
+    currentColor,
+  } = useRepositories(0)
+
+  onMounted(getList)
+  onActivated(getList)
+
+  watch(() => listQuery.page, getList)
+
+  watch(() => listQuery.page_size, handlerQuery)
+
+
+</script>
+
+<style scoped lang="scss">
+.list-query .el-select {
+  --el-select-width: 160px;
+}
+
+.colors {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .colorbox {
+    width: 50px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .dot {
+      width: 10px;
+      height: 10px;
+      display: block;
+      border-radius: 50%;
+    }
+  }
+
+}
+
+</style>
@@ -0,0 +1,86 @@
+import { ref, onMounted, reactive, watch } from 'vue'
+import { create, detail, update, remove } from '@/api/user'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useRouter } from 'vue-router'
+import { list as groups } from '@/api/group'
+
+export function useGetDetail (id) {
+  let item = ref({})  //保留原始值
+  let form = ref({})
+  const groupsList = ref([])
+  const getDetail = async (id) => {
+    const res = await detail(id)
+    item.value = { ...res.data }
+    form.value = { ...res.data }
+  }
+  if (id > 0) {
+    onMounted(getDetail(id))
+  }
+
+  const getGroups = async () => {
+    const res = await groups({ page_size: 9999 }).catch(_ => false)
+    if (res) {
+      groupsList.value = res.data.list
+    }
+  }
+  onMounted(getGroups)
+  return {
+    form,
+    item,
+    getDetail,
+    groupsList
+  }
+}
+
+export function useSubmit (form, id) {
+  const root = ref(null)
+  const router = useRouter()
+  const rules = reactive({
+    username: [{ required: true, message: '用户名是必须的' }],
+    // nickname: [{ required: true, message: '昵称是必须的' }],
+    status: [{ required: true, message: '请选择状态' }],
+  })
+
+  const validate = async () => {
+    const res = await root.value.validate().catch(err => false)
+    return res
+  }
+
+  const submitCreate = async () => {
+    const res = await create(form.value).catch(_ => false)
+    return res.code === 0
+  }
+
+  const submitUpdate = async () => {
+    const res = await update(form.value).catch(_ => false)
+    return res.code === 0
+  }
+  const submitFunc = id > 0 ? submitUpdate : submitCreate
+
+  const submit = async () => {
+    const v = await validate()
+    if (!v) {
+      return
+    }
+
+    const res = await submitFunc()
+    if (res) {
+      ElMessage.success('操作成功')
+      router.back()
+    }
+  }
+
+  const cancel = () => {
+    router.back()
+  }
+
+  return {
+    root,
+    rules,
+    validate,
+    submit,
+    cancel,
+  }
+}
+
+
@@ -0,0 +1,124 @@
+import { onMounted, reactive, watch } from 'vue'
+import { list, remove, changePwd } from '@/api/user'
+import { list as groups } from '@/api/group'
+import { useRouter } from 'vue-router'
+import { ElMessageBox, ElMessage } from 'element-plus'
+
+export function useRepositories () {
+
+  const listRes = reactive({
+    list: [], total: 0, loading: false,
+    groups: [],
+  })
+  const listQuery = reactive({
+    page: 1,
+    page_size: 10,
+    username: '',
+  })
+
+  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
+      //由watch 触发
+    }
+  }
+
+  const getGroups = async () => {
+    const res = await groups({ page_size: 9999 }).catch(_ => false)
+    if (res) {
+      listRes.groups = res.data.list
+    }
+  }
+  onMounted(getGroups)
+
+  onMounted(getList)
+
+  watch(() => listQuery.page, getList)
+  watch(() => listQuery.page_size, handlerQuery)
+  return {
+    listRes,
+    listQuery,
+    handlerQuery,
+    getList,
+    getGroups,
+  }
+}
+
+export function useToEditOrAdd () {
+  const router = useRouter()
+  const toEdit = (row) => {
+    router.push('/user/edit/' + row.id)
+  }
+  const toAdd = () => {
+    router.push('/user/add')
+  }
+  const toTag = (row) => {
+    router.push('/user/tag/?user_id=' + row.id)
+  }
+  const toAddressBook = (row) => {
+    router.push('/user/addressBook/?user_id=' + row.id)
+  }
+  return {
+    toAdd,
+    toEdit,
+    toTag,
+    toAddressBook
+  }
+}
+
+export function useDel () {
+  const del = async (id) => {
+    const cf = await ElMessageBox.confirm('确定删除么?', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }).catch(_ => false)
+    if (!cf) {
+      return false
+    }
+
+    const res = remove({ id }).catch(_ => false)
+    return res
+  }
+  return {
+    del,
+  }
+}
+
+export function useChangePwd () {
+  const changePass = async (admin) => {
+    const input = await ElMessageBox.prompt('请输入新密码', '重置密码', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+    }).catch(_ => false)
+    if (!input) {
+      return
+    }
+    const confirm = await ElMessageBox.confirm('确定重置密码么？', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+    }).catch(_ => false)
+    if (!confirm) {
+      return
+    }
+    const res = await changePwd({ id: admin.id, password: input.value }).catch(_ => false)
+    if (!res) {
+      return
+    }
+    ElMessage.success('修改成功')
+  }
+
+  return { changePass }
+}
@@ -0,0 +1,76 @@
+<template>
+  <div class="form-card">
+    <el-form ref="root" label-width="120px" :model="form" :rules="rules">
+      <el-form-item label="用户名" prop="username">
+        <el-input v-model="form.username"></el-input>
+      </el-form-item>
+      <el-form-item label="昵称" prop="nickname">
+        <el-input v-model="form.nickname"></el-input>
+      </el-form-item>
+      <el-form-item label="小组" prop="group_id">
+        <el-select v-model="form.group_id" placeholder="请选择小组">
+          <el-option
+              v-for="item in groupsList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否是管理员" prop="is_admin">
+        <el-switch v-model="form.is_admin"
+                   :active-value="true"
+                   :inactive-value="false"
+        ></el-switch>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-switch v-model="form.status"
+                   :active-value="ENABLE_STATUS"
+                   :inactive-value="DISABLE_STATUS"
+        ></el-switch>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="cancel">取消</el-button>
+        <el-button @click="submit" type="primary">提交</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+  import { defineComponent, toRef } from 'vue'
+  import { useRoute } from 'vue-router'
+  import { useGetDetail, useSubmit } from '@/views/user/composables/edit'
+  import { ENABLE_STATUS, DISABLE_STATUS } from '@/utils/common_options'
+
+  export default defineComponent({
+    name: 'UserEdit',
+    props: {},
+    setup (props, context) {
+
+      const route = useRoute()
+      const { form, item, getDetail, groupsList } = useGetDetail(route.params.id)
+
+      const { root, rules, validate, submit, cancel } = useSubmit(form, route.params.id)
+
+      return {
+        form,
+        item,
+        getDetail,
+
+        rules,
+        validate,
+        root,
+        submit,
+        cancel,
+        groupsList,
+        ENABLE_STATUS, DISABLE_STATUS,
+      }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+.form-card {
+}
+</style>
@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <el-card class="list-query" shadow="hover">
+      <el-form inline label-width="60px">
+        <el-form-item label="用户名">
+          <el-input v-model="listQuery.username"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handlerQuery">筛选</el-button>
+          <el-button type="danger" @click="toAdd">添加</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>
+        <el-table-column prop="username" label="用户名" align="center"/>
+        <el-table-column prop="nickname" label="昵称" align="center"/>
+        <el-table-column label="所在小组" align="center">
+          <template #default="{row}">
+            <span v-if="row.group_id"> <el-tag>{{ listRes.groups?.find(g => g.id === row.group_id)?.name }} </el-tag> </span>
+            <span v-else> 未分组 </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="created_at" label="创建时间" align="center"/>
+        <el-table-column prop="updated_at" label="更新时间" align="center"/>
+        <el-table-column label="操作" align="center" width="550">
+          <template #default="{row}">
+            <el-button @click="toTag(row)">他的标签</el-button>
+            <el-button @click="toAddressBook(row)">他的地址簿</el-button>
+            <el-button @click="toEdit(row)">编辑</el-button>
+            <el-button type="warning" @click="changePass(row)">重置密码</el-button>
+            <el-button type="danger" @click="remove(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-card class="list-page" shadow="hover">
+      <el-pagination background
+                     layout="prev, pager, next, sizes, jumper"
+                     :page-sizes="[10,20,50,100]"
+                     v-model:page-size="listQuery.page_size"
+                     v-model:current-page="listQuery.page"
+                     :total="listRes.total">
+      </el-pagination>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+  import { useRepositories, useDel, useToEditOrAdd, useChangePwd } from '@/views/user/composables'
+
+  //列表
+  const {
+    listRes,
+    listQuery,
+    handlerQuery,
+    getList,
+  } = useRepositories()
+
+  const { toEdit, toAdd, toAddressBook, toTag } = useToEditOrAdd()
+
+  const { changePass } = useChangePwd()
+
+  //删除
+  const { del } = useDel()
+  const remove = async (row) => {
+    const res = await del(row.id)
+    if (res) {
+      getList(listQuery)
+    }
+  }
+
+
+</script>
+
+<style scoped>
+</style>
@@ -0,0 +1,82 @@
+import { defineConfig } from 'vite'
+import * as path from 'path'
+import * as dotenv from 'dotenv'
+import * as fs from 'fs'
+import vue from '@vitejs/plugin-vue'
+
+const NODE_ENV = process.env.NODE_ENV || 'development'
+const envFile = `.env.${NODE_ENV}`
+const envConfig = dotenv.parse(fs.readFileSync(envFile))
+for (const k in envConfig) {
+  process.env[k] = envConfig[k]
+}
+
+let alias = {
+  '@': path.resolve(__dirname, './src'),
+  'vue$': 'vue/dist/vue.runtime.esm-bundler.js',
+}
+
+const conf = {
+  base: './', // index.html文件所在位置
+  root: './', // js导入的资源路径，src
+  server: {
+    open: true,
+    port: process.env.VITE_DEV_PORT,
+    proxy: {
+      [process.env.VITE_SERVER_API]: {
+        target: process.env.VITE_SERVER_PATH,
+        // rewrite: path => path.replace(/^\/api/, '/api'), //为了模拟
+        changeOrigin: true,
+      },
+    },
+  },
+  build: {
+    target: 'es2015',
+    minify: 'terser', // 是否进行压缩,boolean | 'terser' | 'esbuild',默认使用 esbuild
+    manifest: false, // 是否产出maifest.json
+    sourcemap: false, // 是否产出soucemap.json
+    emptyOutDir: true,
+    outDir: 'dist', // 产出目录
+    rollupOptions: {
+      output: {
+        manualChunks (id) {
+          if (id.includes('node_modules')) {
+            const arr = id.toString().split('node_modules/')[1].split('/')
+            switch (arr[0]) {
+              case '@popperjs':
+              case '@vue':
+              case 'axios':
+              case 'element-plus':
+              case '@element-plus':
+                return '_' + arr[0]
+              default :
+                return '__vendor'
+            }
+          }else if(id.includes('Gwen-admin/src')){
+            //src 下的都打包到一起 不然很多小文件
+            return 'gwen'
+          }
+        },
+        chunkFileNames: 'static/chunk/[name]-[hash].js',
+        entryFileNames: 'static/entry/[name]-[hash].js',
+        assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
+      },
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        javascriptEnabled: true,
+      },
+    },
+  },
+  resolve: {
+    alias,
+  },
+  plugins: [
+    vue(),
+  ],
+}
+
+// https://vitejs.dev/config/
+export default defineConfig(conf)