diff --git a/package.json b/package.json index c5967b9..de73668 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,8 @@ "prettier": "^3.2.5", "protobufjs-cli": "^1.1.3", "sass": "^1.77.8", - "vite": "^5.3.1" + "vite": "^5.3.1", + "vite-svg-loader": "^5.1.0" }, "lint-staged": { "*.{js,ts,vue}": [ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 73cf142..12d11c5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -78,6 +78,9 @@ importers: vite: specifier: ^5.3.1 version: 5.4.1(@types/node@22.5.4)(sass@1.77.8) + vite-svg-loader: + specifier: ^5.1.0 + version: 5.1.0(vue@3.4.38) packages: @@ -423,6 +426,10 @@ packages: '@sxzz/popperjs-es@2.11.7': resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==} + '@trysound/sax@0.2.0': + resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} + engines: {node: '>=10.13.0'} + '@types/estree@1.0.5': resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==} @@ -635,6 +642,10 @@ packages: resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==} engines: {node: '>=18'} + commander@7.2.0: + resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==} + engines: {node: '>= 10'} + concat-map@0.0.1: resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} @@ -645,11 +656,30 @@ packages: crypto-js@4.2.0: resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==} + css-select@5.1.0: + resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==} + + css-tree@2.2.1: + resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==} + engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} + + css-tree@2.3.1: + resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==} + engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} + + css-what@6.1.0: + resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==} + engines: {node: '>= 6'} + cssesc@3.0.0: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} engines: {node: '>=4'} hasBin: true + csso@5.0.5: + resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==} + engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} + csstype@3.1.3: resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==} @@ -688,6 +718,19 @@ packages: resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==} engines: {node: '>=6.0.0'} + dom-serializer@2.0.0: + resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==} + + domelementtype@2.3.0: + resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==} + + domhandler@5.0.3: + resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==} + engines: {node: '>= 4'} + + domutils@3.1.0: + resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==} + element-plus@2.8.0: resolution: {integrity: sha512-7ngapVlVlQAjocVqD4MUKvKXlBneT9DSDk2mmBOSLRFWNm/HLDT15ozmsvUBfy18sajnyUeSIHTtINE8gfrGMg==} peerDependencies: @@ -1127,6 +1170,12 @@ packages: engines: {node: '>= 12'} hasBin: true + mdn-data@2.0.28: + resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==} + + mdn-data@2.0.30: + resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==} + mdurl@2.0.0: resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==} @@ -1455,6 +1504,11 @@ packages: resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==} engines: {node: '>=8'} + svgo@3.3.2: + resolution: {integrity: sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==} + engines: {node: '>=14.0.0'} + hasBin: true + synckit@0.9.1: resolution: {integrity: sha512-7gr8p9TQP6RAHusBOSLs46F4564ZrjV8xFmw5zCmgmhGUcw2hxsShhJ6CEiHQMgPDwAQ1fWHPM0ypc4RMAig4A==} engines: {node: ^14.18.0 || >=16.0.0} @@ -1513,6 +1567,11 @@ packages: resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==} hasBin: true + vite-svg-loader@5.1.0: + resolution: {integrity: sha512-M/wqwtOEjgb956/+m5ZrYT/Iq6Hax0OakWbokj8+9PXOnB7b/4AxESHieEtnNEy7ZpjsjYW1/5nK8fATQMmRxw==} + peerDependencies: + vue: '>=3.2.13' + vite@5.4.1: resolution: {integrity: sha512-1oE6yuNXssjrZdblI9AfBbHCC41nnyoVoEZxQnID6yvQZAFBzxxkqoFLtHUMkYunL8hwOLEjgTuxpkRxvba3kA==} engines: {node: ^18.0.0 || >=20.0.0} @@ -1838,6 +1897,8 @@ snapshots: '@sxzz/popperjs-es@2.11.7': {} + '@trysound/sax@0.2.0': {} + '@types/estree@1.0.5': {} '@types/linkify-it@5.0.0': {} @@ -2083,6 +2144,8 @@ snapshots: commander@12.1.0: {} + commander@7.2.0: {} + concat-map@0.0.1: {} cross-spawn@7.0.3: @@ -2093,8 +2156,32 @@ snapshots: crypto-js@4.2.0: {} + css-select@5.1.0: + dependencies: + boolbase: 1.0.0 + css-what: 6.1.0 + domhandler: 5.0.3 + domutils: 3.1.0 + nth-check: 2.1.1 + + css-tree@2.2.1: + dependencies: + mdn-data: 2.0.28 + source-map-js: 1.2.0 + + css-tree@2.3.1: + dependencies: + mdn-data: 2.0.30 + source-map-js: 1.2.0 + + css-what@6.1.0: {} + cssesc@3.0.0: {} + csso@5.0.5: + dependencies: + css-tree: 2.2.1 + csstype@3.1.3: {} dayjs@1.11.12: {} @@ -2132,6 +2219,24 @@ snapshots: dependencies: esutils: 2.0.3 + dom-serializer@2.0.0: + dependencies: + domelementtype: 2.3.0 + domhandler: 5.0.3 + entities: 4.5.0 + + domelementtype@2.3.0: {} + + domhandler@5.0.3: + dependencies: + domelementtype: 2.3.0 + + domutils@3.1.0: + dependencies: + dom-serializer: 2.0.0 + domelementtype: 2.3.0 + domhandler: 5.0.3 + element-plus@2.8.0(vue@3.4.38): dependencies: '@ctrl/tinycolor': 3.6.1 @@ -2636,6 +2741,10 @@ snapshots: marked@4.3.0: {} + mdn-data@2.0.28: {} + + mdn-data@2.0.30: {} + mdurl@2.0.0: {} memoize-one@6.0.0: {} @@ -2968,6 +3077,16 @@ snapshots: dependencies: has-flag: 4.0.0 + svgo@3.3.2: + dependencies: + '@trysound/sax': 0.2.0 + commander: 7.2.0 + css-select: 5.1.0 + css-tree: 2.3.1 + css-what: 6.1.0 + csso: 5.0.5 + picocolors: 1.0.1 + synckit@0.9.1: dependencies: '@pkgr/core': 0.1.1 @@ -3011,6 +3130,11 @@ snapshots: uuid@10.0.0: {} + vite-svg-loader@5.1.0(vue@3.4.38): + dependencies: + svgo: 3.3.2 + vue: 3.4.38 + vite@5.4.1(@types/node@22.5.4)(sass@1.77.8): dependencies: esbuild: 0.21.5 diff --git a/src/assets/svg/contacts.svg b/src/assets/svg/contacts.svg new file mode 100644 index 0000000..451d52d --- /dev/null +++ b/src/assets/svg/contacts.svg @@ -0,0 +1,16 @@ + + + + + + diff --git a/src/assets/svg/group.svg b/src/assets/svg/group.svg new file mode 100644 index 0000000..15b1cb5 --- /dev/null +++ b/src/assets/svg/group.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/src/assets/svg/organization.svg b/src/assets/svg/organization.svg new file mode 100644 index 0000000..07a97f3 --- /dev/null +++ b/src/assets/svg/organization.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/src/router/index.js b/src/router/index.js index 37f7a1e..0fa2e8b 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -19,7 +19,31 @@ const router = createRouter({ }, { path: '/contacts', - component: () => import('@/views/contacts/ContactsLayout.vue') + component: () => import('@/views/contacts/ContactsLayout.vue'), + redirect: '/contacts/user', + children: [ + { + path: '/contacts/user', + component: () => import('@/views/contacts/children/ContactsUser.vue'), + meta: { + active: '/contacts' //对于二级子路由的active路径还是指向父路径，方便一级导航菜单被显示为激活，同时要写:default-active="$route.meta.active || $route.path" + } + }, + { + path: '/contacts/group', + component: () => import('@/views/contacts/children/ContactsGroup.vue'), + meta: { + active: '/contacts' //对于二级子路由的active路径还是指向父路径，方便一级导航菜单被显示为激活，同时要写:default-active="$route.meta.active || $route.path" + } + }, + { + path: '/contacts/organization', + component: () => import('@/views/contacts/children/ContactsOrganization.vue'), + meta: { + active: '/contacts' //对于二级子路由的active路径还是指向父路径，方便一级导航菜单被显示为激活，同时要写:default-active="$route.meta.active || $route.path" + } + } + ] }, { path: '/meeting', diff --git a/src/views/contacts/ContactsLayout.vue b/src/views/contacts/ContactsLayout.vue index ae8db3e..5f0d243 100644 --- a/src/views/contacts/ContactsLayout.vue +++ b/src/views/contacts/ContactsLayout.vue @@ -1 +1,80 @@ - + + + + + diff --git a/src/views/contacts/children/ContactsGroup.vue b/src/views/contacts/children/ContactsGroup.vue new file mode 100644 index 0000000..4085d0d --- /dev/null +++ b/src/views/contacts/children/ContactsGroup.vue @@ -0,0 +1,13 @@ + + + + + diff --git a/src/views/contacts/children/ContactsOrganization.vue b/src/views/contacts/children/ContactsOrganization.vue new file mode 100644 index 0000000..f96451e --- /dev/null +++ b/src/views/contacts/children/ContactsOrganization.vue @@ -0,0 +1,13 @@ + + + + + diff --git a/src/views/contacts/children/ContactsUser.vue b/src/views/contacts/children/ContactsUser.vue new file mode 100644 index 0000000..7995373 --- /dev/null +++ b/src/views/contacts/children/ContactsUser.vue @@ -0,0 +1,13 @@ + + + + + diff --git a/vite.config.js b/vite.config.js index 2cad779..7ddff3f 100644 --- a/vite.config.js +++ b/vite.config.js @@ -2,10 +2,11 @@ import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' +import svgLoader from 'vite-svg-loader' // https://vitejs.dev/config/ export default defineConfig({ - plugins: [vue()], + plugins: [vue(), svgLoader()], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url))