Vite + Vue + TS

├── .gitignore ├── .vscode └── extensions.json ├── README.md ├── index.html ├── package.json ├── pnpm-lock.yaml ├── public └── vite.svg ├── src ├── App.vue ├── assets │ ├── element-icon │ │ ├── el-index.css │ │ ├── element-icons.ttf │ │ └── element-icons.woff │ ├── images │ │ └── point.svg │ ├── vars.scss │ └── vue.svg ├── dashboard │ ├── CanvasPanel.vue │ ├── Dashboard.vue │ └── canvas-bg │ │ ├── CanvasBg.vue │ │ ├── CanvasSlider.vue │ │ ├── CanvasThumbnail.vue │ │ └── drawRuler.ts ├── data │ └── keyCode.ts ├── main.ts ├── stores │ └── editor.ts ├── style.css └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 低代码必备!带标尺和缩略图的画板 2 | 3 | # 1.功能需求 4 | 5 | 1. 左侧和顶部有刻度标尺，跟着画板滚动而变化 6 | 2. 缩略图，可以通过移动视图框来控制画板滚动 7 | 3. 画板可放缩，对应标尺和缩略图比例跟着变 8 | 4. 移动画板位置，对应标尺和缩略图位置跟着变 9 | 5. 适应屏幕大小和实际大小 10 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue + TS 8 | 9 | 10 |

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vue-tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "element-plus": "^2.3.7", 13 | "normalize.css": "^8.0.1", 14 | "pinia": "^2.1.4", 15 | "vue": "^3.3.4" 16 | }, 17 | "devDependencies": { 18 | "@tsconfig/node18": "^18.2.0", 19 | "@vitejs/plugin-vue": "^4.2.3", 20 | "sass": "^1.63.6", 21 | "typescript": "^5.0.2", 22 | "vite": "^4.4.0", 23 | "vue-tsc": "^1.8.3" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /pnpm-lock.yaml: -------------------------------------------------------------------------------- 1 | lockfileVersion: '6.0' 2 | 3 | dependencies: 4 | element-plus: 5 | specifier: ^2.3.7 6 | version: 2.3.7(vue@3.3.4) 7 | normalize.css: 8 | specifier: ^8.0.1 9 | version: 8.0.1 10 | pinia: 11 | specifier: ^2.1.4 12 | version: 2.1.4(typescript@5.0.2)(vue@3.3.4) 13 | vue: 14 | specifier: ^3.3.4 15 | version: 3.3.4 16 | 17 | devDependencies: 18 | '@tsconfig/node18': 19 | specifier: ^18.2.0 20 | version: 18.2.0 21 | '@vitejs/plugin-vue': 22 | specifier: ^4.2.3 23 | version: 4.2.3(vite@4.4.0)(vue@3.3.4) 24 | sass: 25 | specifier: ^1.63.6 26 | version: 1.63.6 27 | typescript: 28 | specifier: ^5.0.2 29 | version: 5.0.2 30 | vite: 31 | specifier: ^4.4.0 32 | version: 4.4.0(sass@1.63.6) 33 | vue-tsc: 34 | specifier: ^1.8.3 35 | version: 1.8.3(typescript@5.0.2) 36 | 37 | packages: 38 | 39 | /@babel/helper-string-parser@7.22.5: 40 | resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==} 41 | engines: {node: '>=6.9.0'} 42 | 43 | /@babel/helper-validator-identifier@7.22.5: 44 | resolution: {integrity: sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==} 45 | engines: {node: '>=6.9.0'} 46 | 47 | /@babel/parser@7.22.7: 48 | resolution: {integrity: sha512-7NF8pOkHP5o2vpmGgNGcfAeCvOYhGLyA3Z4eBQkT1RJlWu47n63bCs93QfJ2hIAFCil7L5P2IWhs1oToVgrL0Q==} 49 | engines: {node: '>=6.0.0'} 50 | hasBin: true 51 | dependencies: 52 | '@babel/types': 7.22.5 53 | 54 | /@babel/types@7.22.5: 55 | resolution: {integrity: sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==} 56 | engines: {node: '>=6.9.0'} 57 | dependencies: 58 | '@babel/helper-string-parser': 7.22.5 59 | '@babel/helper-validator-identifier': 7.22.5 60 | to-fast-properties: 2.0.0 61 | 62 | /@ctrl/tinycolor@3.6.0: 63 | resolution: {integrity: sha512-/Z3l6pXthq0JvMYdUFyX9j0MaCltlIn6mfh9jLyQwg5aPKxkyNa0PTHtU1AlFXLNk55ZuAeJRcpvq+tmLfKmaQ==} 64 | engines: {node: '>=10'} 65 | dev: false 66 | 67 | /@element-plus/icons-vue@2.1.0(vue@3.3.4): 68 | resolution: {integrity: sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA==} 69 | peerDependencies: 70 | vue: ^3.2.0 71 | dependencies: 72 | vue: 3.3.4 73 | dev: false 74 | 75 | /@esbuild/android-arm64@0.18.11: 76 | resolution: {integrity: sha512-snieiq75Z1z5LJX9cduSAjUr7vEI1OdlzFPMw0HH5YI7qQHDd3qs+WZoMrWYDsfRJSq36lIA6mfZBkvL46KoIw==} 77 | engines: {node: '>=12'} 78 | cpu: [arm64] 79 | os: [android] 80 | requiresBuild: true 81 | dev: true 82 | optional: true 83 | 84 | /@esbuild/android-arm@0.18.11: 85 | resolution: {integrity: sha512-q4qlUf5ucwbUJZXF5tEQ8LF7y0Nk4P58hOsGk3ucY0oCwgQqAnqXVbUuahCddVHfrxmpyewRpiTHwVHIETYu7Q==} 86 | engines: {node: '>=12'} 87 | cpu: [arm] 88 | os: [android] 89 | requiresBuild: true 90 | dev: true 91 | optional: true 92 | 93 | /@esbuild/android-x64@0.18.11: 94 | resolution: {integrity: sha512-iPuoxQEV34+hTF6FT7om+Qwziv1U519lEOvekXO9zaMMlT9+XneAhKL32DW3H7okrCOBQ44BMihE8dclbZtTuw==} 95 | engines: {node: '>=12'} 96 | cpu: [x64] 97 | os: [android] 98 | requiresBuild: true 99 | dev: true 100 | optional: true 101 | 102 | /@esbuild/darwin-arm64@0.18.11: 103 | resolution: {integrity: sha512-Gm0QkI3k402OpfMKyQEEMG0RuW2LQsSmI6OeO4El2ojJMoF5NLYb3qMIjvbG/lbMeLOGiW6ooU8xqc+S0fgz2w==} 104 | engines: {node: '>=12'} 105 | cpu: [arm64] 106 | os: [darwin] 107 | requiresBuild: true 108 | dev: true 109 | optional: true 110 | 111 | /@esbuild/darwin-x64@0.18.11: 112 | resolution: {integrity: sha512-N15Vzy0YNHu6cfyDOjiyfJlRJCB/ngKOAvoBf1qybG3eOq0SL2Lutzz9N7DYUbb7Q23XtHPn6lMDF6uWbGv9Fw==} 113 | engines: {node: '>=12'} 114 | cpu: [x64] 115 | os: [darwin] 116 | requiresBuild: true 117 | dev: true 118 | optional: true 119 | 120 | /@esbuild/freebsd-arm64@0.18.11: 121 | resolution: {integrity: sha512-atEyuq6a3omEY5qAh5jIORWk8MzFnCpSTUruBgeyN9jZq1K/QI9uke0ATi3MHu4L8c59CnIi4+1jDKMuqmR71A==} 122 | engines: {node: '>=12'} 123 | cpu: [arm64] 124 | os: [freebsd] 125 | requiresBuild: true 126 | dev: true 127 | optional: true 128 | 129 | /@esbuild/freebsd-x64@0.18.11: 130 | resolution: {integrity: sha512-XtuPrEfBj/YYYnAAB7KcorzzpGTvOr/dTtXPGesRfmflqhA4LMF0Gh/n5+a9JBzPuJ+CGk17CA++Hmr1F/gI0Q==} 131 | engines: {node: '>=12'} 132 | cpu: [x64] 133 | os: [freebsd] 134 | requiresBuild: true 135 | dev: true 136 | optional: true 137 | 138 | /@esbuild/linux-arm64@0.18.11: 139 | resolution: {integrity: sha512-c6Vh2WS9VFKxKZ2TvJdA7gdy0n6eSy+yunBvv4aqNCEhSWVor1TU43wNRp2YLO9Vng2G+W94aRz+ILDSwAiYog==} 140 | engines: {node: '>=12'} 141 | cpu: [arm64] 142 | os: [linux] 143 | requiresBuild: true 144 | dev: true 145 | optional: true 146 | 147 | /@esbuild/linux-arm@0.18.11: 148 | resolution: {integrity: sha512-Idipz+Taso/toi2ETugShXjQ3S59b6m62KmLHkJlSq/cBejixmIydqrtM2XTvNCywFl3VC7SreSf6NV0i6sRyg==} 149 | engines: {node: '>=12'} 150 | cpu: [arm] 151 | os: [linux] 152 | requiresBuild: true 153 | dev: true 154 | optional: true 155 | 156 | /@esbuild/linux-ia32@0.18.11: 157 | resolution: {integrity: sha512-S3hkIF6KUqRh9n1Q0dSyYcWmcVa9Cg+mSoZEfFuzoYXXsk6196qndrM+ZiHNwpZKi3XOXpShZZ+9dfN5ykqjjw==} 158 | engines: {node: '>=12'} 159 | cpu: [ia32] 160 | os: [linux] 161 | requiresBuild: true 162 | dev: true 163 | optional: true 164 | 165 | /@esbuild/linux-loong64@0.18.11: 166 | resolution: {integrity: sha512-MRESANOoObQINBA+RMZW+Z0TJWpibtE7cPFnahzyQHDCA9X9LOmGh68MVimZlM9J8n5Ia8lU773te6O3ILW8kw==} 167 | engines: {node: '>=12'} 168 | cpu: [loong64] 169 | os: [linux] 170 | requiresBuild: true 171 | dev: true 172 | optional: true 173 | 174 | /@esbuild/linux-mips64el@0.18.11: 175 | resolution: {integrity: sha512-qVyPIZrXNMOLYegtD1u8EBccCrBVshxMrn5MkuFc3mEVsw7CCQHaqZ4jm9hbn4gWY95XFnb7i4SsT3eflxZsUg==} 176 | engines: {node: '>=12'} 177 | cpu: [mips64el] 178 | os: [linux] 179 | requiresBuild: true 180 | dev: true 181 | optional: true 182 | 183 | /@esbuild/linux-ppc64@0.18.11: 184 | resolution: {integrity: sha512-T3yd8vJXfPirZaUOoA9D2ZjxZX4Gr3QuC3GztBJA6PklLotc/7sXTOuuRkhE9W/5JvJP/K9b99ayPNAD+R+4qQ==} 185 | engines: {node: '>=12'} 186 | cpu: [ppc64] 187 | os: [linux] 188 | requiresBuild: true 189 | dev: true 190 | optional: true 191 | 192 | /@esbuild/linux-riscv64@0.18.11: 193 | resolution: {integrity: sha512-evUoRPWiwuFk++snjH9e2cAjF5VVSTj+Dnf+rkO/Q20tRqv+644279TZlPK8nUGunjPAtQRCj1jQkDAvL6rm2w==} 194 | engines: {node: '>=12'} 195 | cpu: [riscv64] 196 | os: [linux] 197 | requiresBuild: true 198 | dev: true 199 | optional: true 200 | 201 | /@esbuild/linux-s390x@0.18.11: 202 | resolution: {integrity: sha512-/SlRJ15XR6i93gRWquRxYCfhTeC5PdqEapKoLbX63PLCmAkXZHY2uQm2l9bN0oPHBsOw2IswRZctMYS0MijFcg==} 203 | engines: {node: '>=12'} 204 | cpu: [s390x] 205 | os: [linux] 206 | requiresBuild: true 207 | dev: true 208 | optional: true 209 | 210 | /@esbuild/linux-x64@0.18.11: 211 | resolution: {integrity: sha512-xcncej+wF16WEmIwPtCHi0qmx1FweBqgsRtEL1mSHLFR6/mb3GEZfLQnx+pUDfRDEM4DQF8dpXIW7eDOZl1IbA==} 212 | engines: {node: '>=12'} 213 | cpu: [x64] 214 | os: [linux] 215 | requiresBuild: true 216 | dev: true 217 | optional: true 218 | 219 | /@esbuild/netbsd-x64@0.18.11: 220 | resolution: {integrity: sha512-aSjMHj/F7BuS1CptSXNg6S3M4F3bLp5wfFPIJM+Km2NfIVfFKhdmfHF9frhiCLIGVzDziggqWll0B+9AUbud/Q==} 221 | engines: {node: '>=12'} 222 | cpu: [x64] 223 | os: [netbsd] 224 | requiresBuild: true 225 | dev: true 226 | optional: true 227 | 228 | /@esbuild/openbsd-x64@0.18.11: 229 | resolution: {integrity: sha512-tNBq+6XIBZtht0xJGv7IBB5XaSyvYPCm1PxJ33zLQONdZoLVM0bgGqUrXnJyiEguD9LU4AHiu+GCXy/Hm9LsdQ==} 230 | engines: {node: '>=12'} 231 | cpu: [x64] 232 | os: [openbsd] 233 | requiresBuild: true 234 | dev: true 235 | optional: true 236 | 237 | /@esbuild/sunos-x64@0.18.11: 238 | resolution: {integrity: sha512-kxfbDOrH4dHuAAOhr7D7EqaYf+W45LsAOOhAet99EyuxxQmjbk8M9N4ezHcEiCYPaiW8Dj3K26Z2V17Gt6p3ng==} 239 | engines: {node: '>=12'} 240 | cpu: [x64] 241 | os: [sunos] 242 | requiresBuild: true 243 | dev: true 244 | optional: true 245 | 246 | /@esbuild/win32-arm64@0.18.11: 247 | resolution: {integrity: sha512-Sh0dDRyk1Xi348idbal7lZyfSkjhJsdFeuC13zqdipsvMetlGiFQNdO+Yfp6f6B4FbyQm7qsk16yaZk25LChzg==} 248 | engines: {node: '>=12'} 249 | cpu: [arm64] 250 | os: [win32] 251 | requiresBuild: true 252 | dev: true 253 | optional: true 254 | 255 | /@esbuild/win32-ia32@0.18.11: 256 | resolution: {integrity: sha512-o9JUIKF1j0rqJTFbIoF4bXj6rvrTZYOrfRcGyL0Vm5uJ/j5CkBD/51tpdxe9lXEDouhRgdr/BYzUrDOvrWwJpg==} 257 | engines: {node: '>=12'} 258 | cpu: [ia32] 259 | os: [win32] 260 | requiresBuild: true 261 | dev: true 262 | optional: true 263 | 264 | /@esbuild/win32-x64@0.18.11: 265 | resolution: {integrity: sha512-rQI4cjLHd2hGsM1LqgDI7oOCYbQ6IBOVsX9ejuRMSze0GqXUG2ekwiKkiBU1pRGSeCqFFHxTrcEydB2Hyoz9CA==} 266 | engines: {node: '>=12'} 267 | cpu: [x64] 268 | os: [win32] 269 | requiresBuild: true 270 | dev: true 271 | optional: true 272 | 273 | /@floating-ui/core@1.3.1: 274 | resolution: {integrity: sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==} 275 | dev: false 276 | 277 | /@floating-ui/dom@1.4.4: 278 | resolution: {integrity: sha512-21hhDEPOiWkGp0Ys4Wi6Neriah7HweToKra626CIK712B5m9qkdz54OP9gVldUg+URnBTpv/j/bi/skmGdstXQ==} 279 | dependencies: 280 | '@floating-ui/core': 1.3.1 281 | dev: false 282 | 283 | /@jridgewell/sourcemap-codec@1.4.15: 284 | resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==} 285 | 286 | /@sxzz/popperjs-es@2.11.7: 287 | resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==} 288 | dev: false 289 | 290 | /@tsconfig/node18@18.2.0: 291 | resolution: {integrity: sha512-yhxwIlFVSVcMym3O31HoMnRXpoenmpIxcj4Yoes2DUpe+xCJnA7ECQP1Vw889V0jTt/2nzvpLQ/UuMYCd3JPIg==} 292 | dev: true 293 | 294 | /@types/lodash-es@4.17.7: 295 | resolution: {integrity: sha512-z0ptr6UI10VlU6l5MYhGwS4mC8DZyYer2mCoyysZtSF7p26zOX8UpbrV0YpNYLGS8K4PUFIyEr62IMFFjveSiQ==} 296 | dependencies: 297 | '@types/lodash': 4.14.195 298 | dev: false 299 | 300 | /@types/lodash@4.14.195: 301 | resolution: {integrity: sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==} 302 | dev: false 303 | 304 | /@types/web-bluetooth@0.0.16: 305 | resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==} 306 | dev: false 307 | 308 | /@vitejs/plugin-vue@4.2.3(vite@4.4.0)(vue@3.3.4): 309 | resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==} 310 | engines: {node: ^14.18.0 || >=16.0.0} 311 | peerDependencies: 312 | vite: ^4.0.0 313 | vue: ^3.2.25 314 | dependencies: 315 | vite: 4.4.0(sass@1.63.6) 316 | vue: 3.3.4 317 | dev: true 318 | 319 | /@volar/language-core@1.7.10: 320 | resolution: {integrity: sha512-18Gmth5M0UI3hDDqhZngjMnb6WCslcfglkOdepRIhGxRYe7xR7DRRzciisYDMZsvOQxDYme+uaohg0dKUxLV2Q==} 321 | dependencies: 322 | '@volar/source-map': 1.7.10 323 | dev: true 324 | 325 | /@volar/source-map@1.7.10: 326 | resolution: {integrity: sha512-FBpLEOKJpRxeh2nYbw1mTI5sZOPXYU8LlsCz6xuBY3yNtAizDTTIZtBHe1V8BaMpoSMgRysZe4gVxMEi3rDGVA==} 327 | dependencies: 328 | muggle-string: 0.3.1 329 | dev: true 330 | 331 | /@volar/typescript@1.7.10: 332 | resolution: {integrity: sha512-yqIov4wndLU3GE1iE25bU5W6T+P+exPePcE1dFPPBKzQIBki1KvmdQN5jBlJp3Wo+wp7UIxa/RsdNkXT+iFBjg==} 333 | dependencies: 334 | '@volar/language-core': 1.7.10 335 | dev: true 336 | 337 | /@vue/compiler-core@3.3.4: 338 | resolution: {integrity: sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==} 339 | dependencies: 340 | '@babel/parser': 7.22.7 341 | '@vue/shared': 3.3.4 342 | estree-walker: 2.0.2 343 | source-map-js: 1.0.2 344 | 345 | /@vue/compiler-dom@3.3.4: 346 | resolution: {integrity: sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==} 347 | dependencies: 348 | '@vue/compiler-core': 3.3.4 349 | '@vue/shared': 3.3.4 350 | 351 | /@vue/compiler-sfc@3.3.4: 352 | resolution: {integrity: sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==} 353 | dependencies: 354 | '@babel/parser': 7.22.7 355 | '@vue/compiler-core': 3.3.4 356 | '@vue/compiler-dom': 3.3.4 357 | '@vue/compiler-ssr': 3.3.4 358 | '@vue/reactivity-transform': 3.3.4 359 | '@vue/shared': 3.3.4 360 | estree-walker: 2.0.2 361 | magic-string: 0.30.1 362 | postcss: 8.4.25 363 | source-map-js: 1.0.2 364 | 365 | /@vue/compiler-ssr@3.3.4: 366 | resolution: {integrity: sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==} 367 | dependencies: 368 | '@vue/compiler-dom': 3.3.4 369 | '@vue/shared': 3.3.4 370 | 371 | /@vue/devtools-api@6.5.0: 372 | resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==} 373 | dev: false 374 | 375 | /@vue/language-core@1.8.3(typescript@5.0.2): 376 | resolution: {integrity: sha512-AzhvMYoQkK/tg8CpAAttO19kx1zjS3+weYIr2AhlH/M5HebVzfftQoq4jZNFifjq+hyLKi8j9FiDMS8oqA89+A==} 377 | peerDependencies: 378 | typescript: '*' 379 | peerDependenciesMeta: 380 | typescript: 381 | optional: true 382 | dependencies: 383 | '@volar/language-core': 1.7.10 384 | '@volar/source-map': 1.7.10 385 | '@vue/compiler-dom': 3.3.4 386 | '@vue/reactivity': 3.3.4 387 | '@vue/shared': 3.3.4 388 | minimatch: 9.0.3 389 | muggle-string: 0.3.1 390 | typescript: 5.0.2 391 | vue-template-compiler: 2.7.14 392 | dev: true 393 | 394 | /@vue/reactivity-transform@3.3.4: 395 | resolution: {integrity: sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==} 396 | dependencies: 397 | '@babel/parser': 7.22.7 398 | '@vue/compiler-core': 3.3.4 399 | '@vue/shared': 3.3.4 400 | estree-walker: 2.0.2 401 | magic-string: 0.30.1 402 | 403 | /@vue/reactivity@3.3.4: 404 | resolution: {integrity: sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==} 405 | dependencies: 406 | '@vue/shared': 3.3.4 407 | 408 | /@vue/runtime-core@3.3.4: 409 | resolution: {integrity: sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==} 410 | dependencies: 411 | '@vue/reactivity': 3.3.4 412 | '@vue/shared': 3.3.4 413 | 414 | /@vue/runtime-dom@3.3.4: 415 | resolution: {integrity: sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==} 416 | dependencies: 417 | '@vue/runtime-core': 3.3.4 418 | '@vue/shared': 3.3.4 419 | csstype: 3.1.2 420 | 421 | /@vue/server-renderer@3.3.4(vue@3.3.4): 422 | resolution: {integrity: sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==} 423 | peerDependencies: 424 | vue: 3.3.4 425 | dependencies: 426 | '@vue/compiler-ssr': 3.3.4 427 | '@vue/shared': 3.3.4 428 | vue: 3.3.4 429 | 430 | /@vue/shared@3.3.4: 431 | resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==} 432 | 433 | /@vue/typescript@1.8.3(typescript@5.0.2): 434 | resolution: {integrity: sha512-6bdgSnIFpRYHlt70pHmnmNksPU00bfXgqAISeaNz3W6d2cH0OTfH8h/IhligQ82sJIhsuyfftQJ5518ZuKIhtA==} 435 | dependencies: 436 | '@volar/typescript': 1.7.10 437 | '@vue/language-core': 1.8.3(typescript@5.0.2) 438 | transitivePeerDependencies: 439 | - typescript 440 | dev: true 441 | 442 | /@vueuse/core@9.13.0(vue@3.3.4): 443 | resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==} 444 | dependencies: 445 | '@types/web-bluetooth': 0.0.16 446 | '@vueuse/metadata': 9.13.0 447 | '@vueuse/shared': 9.13.0(vue@3.3.4) 448 | vue-demi: 0.14.5(vue@3.3.4) 449 | transitivePeerDependencies: 450 | - '@vue/composition-api' 451 | - vue 452 | dev: false 453 | 454 | /@vueuse/metadata@9.13.0: 455 | resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==} 456 | dev: false 457 | 458 | /@vueuse/shared@9.13.0(vue@3.3.4): 459 | resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==} 460 | dependencies: 461 | vue-demi: 0.14.5(vue@3.3.4) 462 | transitivePeerDependencies: 463 | - '@vue/composition-api' 464 | - vue 465 | dev: false 466 | 467 | /anymatch@3.1.3: 468 | resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==} 469 | engines: {node: '>= 8'} 470 | dependencies: 471 | normalize-path: 3.0.0 472 | picomatch: 2.3.1 473 | dev: true 474 | 475 | /async-validator@4.2.5: 476 | resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==} 477 | dev: false 478 | 479 | /balanced-match@1.0.2: 480 | resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} 481 | dev: true 482 | 483 | /binary-extensions@2.2.0: 484 | resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==} 485 | engines: {node: '>=8'} 486 | dev: true 487 | 488 | /brace-expansion@2.0.1: 489 | resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==} 490 | dependencies: 491 | balanced-match: 1.0.2 492 | dev: true 493 | 494 | /braces@3.0.2: 495 | resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==} 496 | engines: {node: '>=8'} 497 | dependencies: 498 | fill-range: 7.0.1 499 | dev: true 500 | 501 | /chokidar@3.5.3: 502 | resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==} 503 | engines: {node: '>= 8.10.0'} 504 | dependencies: 505 | anymatch: 3.1.3 506 | braces: 3.0.2 507 | glob-parent: 5.1.2 508 | is-binary-path: 2.1.0 509 | is-glob: 4.0.3 510 | normalize-path: 3.0.0 511 | readdirp: 3.6.0 512 | optionalDependencies: 513 | fsevents: 2.3.2 514 | dev: true 515 | 516 | /csstype@3.1.2: 517 | resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==} 518 | 519 | /dayjs@1.11.9: 520 | resolution: {integrity: sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA==} 521 | dev: false 522 | 523 | /de-indent@1.0.2: 524 | resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==} 525 | dev: true 526 | 527 | /element-plus@2.3.7(vue@3.3.4): 528 | resolution: {integrity: sha512-h6TxclbaLUJxg/Bv5j/ZKsK+K5yadQliw5+R30HWyE69pXlqXTX24oYx+yw3pA4Dy+lqEDi5501FQ0CORk3OSA==} 529 | peerDependencies: 530 | vue: ^3.2.0 531 | dependencies: 532 | '@ctrl/tinycolor': 3.6.0 533 | '@element-plus/icons-vue': 2.1.0(vue@3.3.4) 534 | '@floating-ui/dom': 1.4.4 535 | '@popperjs/core': /@sxzz/popperjs-es@2.11.7 536 | '@types/lodash': 4.14.195 537 | '@types/lodash-es': 4.17.7 538 | '@vueuse/core': 9.13.0(vue@3.3.4) 539 | async-validator: 4.2.5 540 | dayjs: 1.11.9 541 | escape-html: 1.0.3 542 | lodash: 4.17.21 543 | lodash-es: 4.17.21 544 | lodash-unified: 1.0.3(@types/lodash-es@4.17.7)(lodash-es@4.17.21)(lodash@4.17.21) 545 | memoize-one: 6.0.0 546 | normalize-wheel-es: 1.2.0 547 | vue: 3.3.4 548 | transitivePeerDependencies: 549 | - '@vue/composition-api' 550 | dev: false 551 | 552 | /esbuild@0.18.11: 553 | resolution: {integrity: sha512-i8u6mQF0JKJUlGR3OdFLKldJQMMs8OqM9Cc3UCi9XXziJ9WERM5bfkHaEAy0YAvPRMgqSW55W7xYn84XtEFTtA==} 554 | engines: {node: '>=12'} 555 | hasBin: true 556 | requiresBuild: true 557 | optionalDependencies: 558 | '@esbuild/android-arm': 0.18.11 559 | '@esbuild/android-arm64': 0.18.11 560 | '@esbuild/android-x64': 0.18.11 561 | '@esbuild/darwin-arm64': 0.18.11 562 | '@esbuild/darwin-x64': 0.18.11 563 | '@esbuild/freebsd-arm64': 0.18.11 564 | '@esbuild/freebsd-x64': 0.18.11 565 | '@esbuild/linux-arm': 0.18.11 566 | '@esbuild/linux-arm64': 0.18.11 567 | '@esbuild/linux-ia32': 0.18.11 568 | '@esbuild/linux-loong64': 0.18.11 569 | '@esbuild/linux-mips64el': 0.18.11 570 | '@esbuild/linux-ppc64': 0.18.11 571 | '@esbuild/linux-riscv64': 0.18.11 572 | '@esbuild/linux-s390x': 0.18.11 573 | '@esbuild/linux-x64': 0.18.11 574 | '@esbuild/netbsd-x64': 0.18.11 575 | '@esbuild/openbsd-x64': 0.18.11 576 | '@esbuild/sunos-x64': 0.18.11 577 | '@esbuild/win32-arm64': 0.18.11 578 | '@esbuild/win32-ia32': 0.18.11 579 | '@esbuild/win32-x64': 0.18.11 580 | dev: true 581 | 582 | /escape-html@1.0.3: 583 | resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==} 584 | dev: false 585 | 586 | /estree-walker@2.0.2: 587 | resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} 588 | 589 | /fill-range@7.0.1: 590 | resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==} 591 | engines: {node: '>=8'} 592 | dependencies: 593 | to-regex-range: 5.0.1 594 | dev: true 595 | 596 | /fsevents@2.3.2: 597 | resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==} 598 | engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} 599 | os: [darwin] 600 | requiresBuild: true 601 | dev: true 602 | optional: true 603 | 604 | /glob-parent@5.1.2: 605 | resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==} 606 | engines: {node: '>= 6'} 607 | dependencies: 608 | is-glob: 4.0.3 609 | dev: true 610 | 611 | /he@1.2.0: 612 | resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==} 613 | hasBin: true 614 | dev: true 615 | 616 | /immutable@4.3.1: 617 | resolution: {integrity: sha512-lj9cnmB/kVS0QHsJnYKD1uo3o39nrbKxszjnqS9Fr6NB7bZzW45U6WSGBPKXDL/CvDKqDNPA4r3DoDQ8GTxo2A==} 618 | dev: true 619 | 620 | /is-binary-path@2.1.0: 621 | resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==} 622 | engines: {node: '>=8'} 623 | dependencies: 624 | binary-extensions: 2.2.0 625 | dev: true 626 | 627 | /is-extglob@2.1.1: 628 | resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==} 629 | engines: {node: '>=0.10.0'} 630 | dev: true 631 | 632 | /is-glob@4.0.3: 633 | resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==} 634 | engines: {node: '>=0.10.0'} 635 | dependencies: 636 | is-extglob: 2.1.1 637 | dev: true 638 | 639 | /is-number@7.0.0: 640 | resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==} 641 | engines: {node: '>=0.12.0'} 642 | dev: true 643 | 644 | /lodash-es@4.17.21: 645 | resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==} 646 | dev: false 647 | 648 | /lodash-unified@1.0.3(@types/lodash-es@4.17.7)(lodash-es@4.17.21)(lodash@4.17.21): 649 | resolution: {integrity: sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==} 650 | peerDependencies: 651 | '@types/lodash-es': '*' 652 | lodash: '*' 653 | lodash-es: '*' 654 | dependencies: 655 | '@types/lodash-es': 4.17.7 656 | lodash: 4.17.21 657 | lodash-es: 4.17.21 658 | dev: false 659 | 660 | /lodash@4.17.21: 661 | resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} 662 | dev: false 663 | 664 | /lru-cache@6.0.0: 665 | resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==} 666 | engines: {node: '>=10'} 667 | dependencies: 668 | yallist: 4.0.0 669 | dev: true 670 | 671 | /magic-string@0.30.1: 672 | resolution: {integrity: sha512-mbVKXPmS0z0G4XqFDCTllmDQ6coZzn94aMlb0o/A4HEHJCKcanlDZwYJgwnkmgD3jyWhUgj9VsPrfd972yPffA==} 673 | engines: {node: '>=12'} 674 | dependencies: 675 | '@jridgewell/sourcemap-codec': 1.4.15 676 | 677 | /memoize-one@6.0.0: 678 | resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==} 679 | dev: false 680 | 681 | /minimatch@9.0.3: 682 | resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==} 683 | engines: {node: '>=16 || 14 >=14.17'} 684 | dependencies: 685 | brace-expansion: 2.0.1 686 | dev: true 687 | 688 | /muggle-string@0.3.1: 689 | resolution: {integrity: sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==} 690 | dev: true 691 | 692 | /nanoid@3.3.6: 693 | resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==} 694 | engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} 695 | hasBin: true 696 | 697 | /normalize-path@3.0.0: 698 | resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} 699 | engines: {node: '>=0.10.0'} 700 | dev: true 701 | 702 | /normalize-wheel-es@1.2.0: 703 | resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==} 704 | dev: false 705 | 706 | /normalize.css@8.0.1: 707 | resolution: {integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==} 708 | dev: false 709 | 710 | /picocolors@1.0.0: 711 | resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} 712 | 713 | /picomatch@2.3.1: 714 | resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} 715 | engines: {node: '>=8.6'} 716 | dev: true 717 | 718 | /pinia@2.1.4(typescript@5.0.2)(vue@3.3.4): 719 | resolution: {integrity: sha512-vYlnDu+Y/FXxv1ABo1vhjC+IbqvzUdiUC3sfDRrRyY2CQSrqqaa+iiHmqtARFxJVqWQMCJfXx1PBvFs9aJVLXQ==} 720 | peerDependencies: 721 | '@vue/composition-api': ^1.4.0 722 | typescript: '>=4.4.4' 723 | vue: ^2.6.14 || ^3.3.0 724 | peerDependenciesMeta: 725 | '@vue/composition-api': 726 | optional: true 727 | typescript: 728 | optional: true 729 | dependencies: 730 | '@vue/devtools-api': 6.5.0 731 | typescript: 5.0.2 732 | vue: 3.3.4 733 | vue-demi: 0.14.5(vue@3.3.4) 734 | dev: false 735 | 736 | /postcss@8.4.25: 737 | resolution: {integrity: sha512-7taJ/8t2av0Z+sQEvNzCkpDynl0tX3uJMCODi6nT3PfASC7dYCWV9aQ+uiCf+KBD4SEFcu+GvJdGdwzQ6OSjCw==} 738 | engines: {node: ^10 || ^12 || >=14} 739 | dependencies: 740 | nanoid: 3.3.6 741 | picocolors: 1.0.0 742 | source-map-js: 1.0.2 743 | 744 | /readdirp@3.6.0: 745 | resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} 746 | engines: {node: '>=8.10.0'} 747 | dependencies: 748 | picomatch: 2.3.1 749 | dev: true 750 | 751 | /rollup@3.26.2: 752 | resolution: {integrity: sha512-6umBIGVz93er97pMgQO08LuH3m6PUb3jlDUUGFsNJB6VgTCUaDFpupf5JfU30529m/UKOgmiX+uY6Sx8cOYpLA==} 753 | engines: {node: '>=14.18.0', npm: '>=8.0.0'} 754 | hasBin: true 755 | optionalDependencies: 756 | fsevents: 2.3.2 757 | dev: true 758 | 759 | /sass@1.63.6: 760 | resolution: {integrity: sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==} 761 | engines: {node: '>=14.0.0'} 762 | hasBin: true 763 | dependencies: 764 | chokidar: 3.5.3 765 | immutable: 4.3.1 766 | source-map-js: 1.0.2 767 | dev: true 768 | 769 | /semver@7.5.4: 770 | resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==} 771 | engines: {node: '>=10'} 772 | hasBin: true 773 | dependencies: 774 | lru-cache: 6.0.0 775 | dev: true 776 | 777 | /source-map-js@1.0.2: 778 | resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} 779 | engines: {node: '>=0.10.0'} 780 | 781 | /to-fast-properties@2.0.0: 782 | resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==} 783 | engines: {node: '>=4'} 784 | 785 | /to-regex-range@5.0.1: 786 | resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==} 787 | engines: {node: '>=8.0'} 788 | dependencies: 789 | is-number: 7.0.0 790 | dev: true 791 | 792 | /typescript@5.0.2: 793 | resolution: {integrity: sha512-wVORMBGO/FAs/++blGNeAVdbNKtIh1rbBL2EyQ1+J9lClJ93KiiKe8PmFIVdXhHcyv44SL9oglmfeSsndo0jRw==} 794 | engines: {node: '>=12.20'} 795 | hasBin: true 796 | 797 | /vite@4.4.0(sass@1.63.6): 798 | resolution: {integrity: sha512-Wf+DCEjuM8aGavEYiF77hnbxEZ+0+/jC9nABR46sh5Xi+GYeSvkeEFRiVuI3x+tPjxgZeS91h1jTAQTPFgePpA==} 799 | engines: {node: ^14.18.0 || >=16.0.0} 800 | hasBin: true 801 | peerDependencies: 802 | '@types/node': '>= 14' 803 | less: '*' 804 | lightningcss: ^1.21.0 805 | sass: '*' 806 | stylus: '*' 807 | sugarss: '*' 808 | terser: ^5.4.0 809 | peerDependenciesMeta: 810 | '@types/node': 811 | optional: true 812 | less: 813 | optional: true 814 | lightningcss: 815 | optional: true 816 | sass: 817 | optional: true 818 | stylus: 819 | optional: true 820 | sugarss: 821 | optional: true 822 | terser: 823 | optional: true 824 | dependencies: 825 | esbuild: 0.18.11 826 | postcss: 8.4.25 827 | rollup: 3.26.2 828 | sass: 1.63.6 829 | optionalDependencies: 830 | fsevents: 2.3.2 831 | dev: true 832 | 833 | /vue-demi@0.14.5(vue@3.3.4): 834 | resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==} 835 | engines: {node: '>=12'} 836 | hasBin: true 837 | requiresBuild: true 838 | peerDependencies: 839 | '@vue/composition-api': ^1.0.0-rc.1 840 | vue: ^3.0.0-0 || ^2.6.0 841 | peerDependenciesMeta: 842 | '@vue/composition-api': 843 | optional: true 844 | dependencies: 845 | vue: 3.3.4 846 | dev: false 847 | 848 | /vue-template-compiler@2.7.14: 849 | resolution: {integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==} 850 | dependencies: 851 | de-indent: 1.0.2 852 | he: 1.2.0 853 | dev: true 854 | 855 | /vue-tsc@1.8.3(typescript@5.0.2): 856 | resolution: {integrity: sha512-Ua4DHuYxjudlhCW2nRZtaXbhIDVncRGIbDjZhHpF8Z8vklct/G/35/kAPuGNSOmq0JcvhPAe28Oa7LWaUerZVA==} 857 | hasBin: true 858 | peerDependencies: 859 | typescript: '*' 860 | dependencies: 861 | '@vue/language-core': 1.8.3(typescript@5.0.2) 862 | '@vue/typescript': 1.8.3(typescript@5.0.2) 863 | semver: 7.5.4 864 | typescript: 5.0.2 865 | dev: true 866 | 867 | /vue@3.3.4: 868 | resolution: {integrity: sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==} 869 | dependencies: 870 | '@vue/compiler-dom': 3.3.4 871 | '@vue/compiler-sfc': 3.3.4 872 | '@vue/runtime-dom': 3.3.4 873 | '@vue/server-renderer': 3.3.4(vue@3.3.4) 874 | '@vue/shared': 3.3.4 875 | 876 | /yallist@4.0.0: 877 | resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==} 878 | dev: true 879 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/assets/element-icon/el-index.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: element-icons; 3 | src: url(element-icons.woff) format('woff'), url(element-icons.ttf) format('truetype'); 4 | font-weight: 400; 5 | font-display: 'auto'; 6 | font-style: normal; 7 | } 8 | 9 | [class*=' el-icon-'], 10 | [class^='el-icon-'] { 11 | font-family: element-icons !important; 12 | speak: none; 13 | font-style: normal; 14 | font-weight: 400; 15 | font-variant: normal; 16 | text-transform: none; 17 | line-height: 1; 18 | vertical-align: baseline; 19 | display: inline-block; 20 | -webkit-font-smoothing: antialiased; 21 | -moz-osx-font-smoothing: grayscale; 22 | } 23 | .el-icon-ice-cream-round:before { 24 | content: '\e6a0'; 25 | } 26 | .el-icon-ice-cream-square:before { 27 | content: '\e6a3'; 28 | } 29 | .el-icon-lollipop:before { 30 | content: '\e6a4'; 31 | } 32 | .el-icon-potato-strips:before { 33 | content: '\e6a5'; 34 | } 35 | .el-icon-milk-tea:before { 36 | content: '\e6a6'; 37 | } 38 | .el-icon-ice-drink:before { 39 | content: '\e6a7'; 40 | } 41 | .el-icon-ice-tea:before { 42 | content: '\e6a9'; 43 | } 44 | .el-icon-coffee:before { 45 | content: '\e6aa'; 46 | } 47 | .el-icon-orange:before { 48 | content: '\e6ab'; 49 | } 50 | .el-icon-pear:before { 51 | content: '\e6ac'; 52 | } 53 | .el-icon-apple:before { 54 | content: '\e6ad'; 55 | } 56 | .el-icon-cherry:before { 57 | content: '\e6ae'; 58 | } 59 | .el-icon-watermelon:before { 60 | content: '\e6af'; 61 | } 62 | .el-icon-grape:before { 63 | content: '\e6b0'; 64 | } 65 | .el-icon-refrigerator:before { 66 | content: '\e6b1'; 67 | } 68 | .el-icon-goblet-square-full:before { 69 | content: '\e6b2'; 70 | } 71 | .el-icon-goblet-square:before { 72 | content: '\e6b3'; 73 | } 74 | .el-icon-goblet-full:before { 75 | content: '\e6b4'; 76 | } 77 | .el-icon-goblet:before { 78 | content: '\e6b5'; 79 | } 80 | .el-icon-cold-drink:before { 81 | content: '\e6b6'; 82 | } 83 | .el-icon-coffee-cup:before { 84 | content: '\e6b8'; 85 | } 86 | .el-icon-water-cup:before { 87 | content: '\e6b9'; 88 | } 89 | .el-icon-hot-water:before { 90 | content: '\e6ba'; 91 | } 92 | .el-icon-ice-cream:before { 93 | content: '\e6bb'; 94 | } 95 | .el-icon-dessert:before { 96 | content: '\e6bc'; 97 | } 98 | .el-icon-sugar:before { 99 | content: '\e6bd'; 100 | } 101 | .el-icon-tableware:before { 102 | content: '\e6be'; 103 | } 104 | .el-icon-burger:before { 105 | content: '\e6bf'; 106 | } 107 | .el-icon-knife-fork:before { 108 | content: '\e6c1'; 109 | } 110 | .el-icon-fork-spoon:before { 111 | content: '\e6c2'; 112 | } 113 | .el-icon-chicken:before { 114 | content: '\e6c3'; 115 | } 116 | .el-icon-food:before { 117 | content: '\e6c4'; 118 | } 119 | .el-icon-dish-1:before { 120 | content: '\e6c5'; 121 | } 122 | .el-icon-dish:before { 123 | content: '\e6c6'; 124 | } 125 | .el-icon-moon-night:before { 126 | content: '\e6ee'; 127 | } 128 | .el-icon-moon:before { 129 | content: '\e6f0'; 130 | } 131 | .el-icon-cloudy-and-sunny:before { 132 | content: '\e6f1'; 133 | } 134 | .el-icon-partly-cloudy:before { 135 | content: '\e6f2'; 136 | } 137 | .el-icon-cloudy:before { 138 | content: '\e6f3'; 139 | } 140 | .el-icon-sunny:before { 141 | content: '\e6f6'; 142 | } 143 | .el-icon-sunset:before { 144 | content: '\e6f7'; 145 | } 146 | .el-icon-sunrise-1:before { 147 | content: '\e6f8'; 148 | } 149 | .el-icon-sunrise:before { 150 | content: '\e6f9'; 151 | } 152 | .el-icon-heavy-rain:before { 153 | content: '\e6fa'; 154 | } 155 | .el-icon-lightning:before { 156 | content: '\e6fb'; 157 | } 158 | .el-icon-light-rain:before { 159 | content: '\e6fc'; 160 | } 161 | .el-icon-wind-power:before { 162 | content: '\e6fd'; 163 | } 164 | .el-icon-baseball:before { 165 | content: '\e712'; 166 | } 167 | .el-icon-soccer:before { 168 | content: '\e713'; 169 | } 170 | .el-icon-football:before { 171 | content: '\e715'; 172 | } 173 | .el-icon-basketball:before { 174 | content: '\e716'; 175 | } 176 | .el-icon-ship:before { 177 | content: '\e73f'; 178 | } 179 | .el-icon-truck:before { 180 | content: '\e740'; 181 | } 182 | .el-icon-bicycle:before { 183 | content: '\e741'; 184 | } 185 | .el-icon-mobile-phone:before { 186 | content: '\e6d3'; 187 | } 188 | .el-icon-service:before { 189 | content: '\e6d4'; 190 | } 191 | .el-icon-key:before { 192 | content: '\e6e2'; 193 | } 194 | .el-icon-unlock:before { 195 | content: '\e6e4'; 196 | } 197 | .el-icon-lock:before { 198 | content: '\e6e5'; 199 | } 200 | .el-icon-watch:before { 201 | content: '\e6fe'; 202 | } 203 | .el-icon-watch-1:before { 204 | content: '\e6ff'; 205 | } 206 | .el-icon-timer:before { 207 | content: '\e702'; 208 | } 209 | .el-icon-alarm-clock:before { 210 | content: '\e703'; 211 | } 212 | .el-icon-map-location:before { 213 | content: '\e704'; 214 | } 215 | .el-icon-delete-location:before { 216 | content: '\e705'; 217 | } 218 | .el-icon-add-location:before { 219 | content: '\e706'; 220 | } 221 | .el-icon-location-information:before { 222 | content: '\e707'; 223 | } 224 | .el-icon-location-outline:before { 225 | content: '\e708'; 226 | } 227 | .el-icon-location:before { 228 | content: '\e79e'; 229 | } 230 | .el-icon-place:before { 231 | content: '\e709'; 232 | } 233 | .el-icon-discover:before { 234 | content: '\e70a'; 235 | } 236 | .el-icon-first-aid-kit:before { 237 | content: '\e70b'; 238 | } 239 | .el-icon-trophy-1:before { 240 | content: '\e70c'; 241 | } 242 | .el-icon-trophy:before { 243 | content: '\e70d'; 244 | } 245 | .el-icon-medal:before { 246 | content: '\e70e'; 247 | } 248 | .el-icon-medal-1:before { 249 | content: '\e70f'; 250 | } 251 | .el-icon-stopwatch:before { 252 | content: '\e710'; 253 | } 254 | .el-icon-mic:before { 255 | content: '\e711'; 256 | } 257 | .el-icon-copy-document:before { 258 | content: '\e718'; 259 | } 260 | .el-icon-full-screen:before { 261 | content: '\e719'; 262 | } 263 | .el-icon-switch-button:before { 264 | content: '\e71b'; 265 | } 266 | .el-icon-aim:before { 267 | content: '\e71c'; 268 | } 269 | .el-icon-crop:before { 270 | content: '\e71d'; 271 | } 272 | .el-icon-odometer:before { 273 | content: '\e71e'; 274 | } 275 | .el-icon-time:before { 276 | content: '\e71f'; 277 | } 278 | .el-icon-bangzhu:before { 279 | content: '\e724'; 280 | } 281 | .el-icon-close-notification:before { 282 | content: '\e726'; 283 | } 284 | .el-icon-microphone:before { 285 | content: '\e727'; 286 | } 287 | .el-icon-turn-off-microphone:before { 288 | content: '\e728'; 289 | } 290 | .el-icon-position:before { 291 | content: '\e729'; 292 | } 293 | .el-icon-postcard:before { 294 | content: '\e72a'; 295 | } 296 | .el-icon-message:before { 297 | content: '\e72b'; 298 | } 299 | .el-icon-chat-line-square:before { 300 | content: '\e72d'; 301 | } 302 | .el-icon-chat-dot-square:before { 303 | content: '\e72e'; 304 | } 305 | .el-icon-chat-dot-round:before { 306 | content: '\e72f'; 307 | } 308 | .el-icon-chat-square:before { 309 | content: '\e730'; 310 | } 311 | .el-icon-chat-line-round:before { 312 | content: '\e731'; 313 | } 314 | .el-icon-chat-round:before { 315 | content: '\e732'; 316 | } 317 | .el-icon-set-up:before { 318 | content: '\e733'; 319 | } 320 | .el-icon-turn-off:before { 321 | content: '\e734'; 322 | } 323 | .el-icon-open:before { 324 | content: '\e735'; 325 | } 326 | .el-icon-connection:before { 327 | content: '\e736'; 328 | } 329 | .el-icon-link:before { 330 | content: '\e737'; 331 | } 332 | .el-icon-cpu:before { 333 | content: '\e738'; 334 | } 335 | .el-icon-thumb:before { 336 | content: '\e739'; 337 | } 338 | .el-icon-female:before { 339 | content: '\e73a'; 340 | } 341 | .el-icon-male:before { 342 | content: '\e73b'; 343 | } 344 | .el-icon-guide:before { 345 | content: '\e73c'; 346 | } 347 | .el-icon-news:before { 348 | content: '\e73e'; 349 | } 350 | .el-icon-price-tag:before { 351 | content: '\e744'; 352 | } 353 | .el-icon-discount:before { 354 | content: '\e745'; 355 | } 356 | .el-icon-wallet:before { 357 | content: '\e747'; 358 | } 359 | .el-icon-coin:before { 360 | content: '\e748'; 361 | } 362 | .el-icon-money:before { 363 | content: '\e749'; 364 | } 365 | .el-icon-bank-card:before { 366 | content: '\e74a'; 367 | } 368 | .el-icon-box:before { 369 | content: '\e74b'; 370 | } 371 | .el-icon-present:before { 372 | content: '\e74c'; 373 | } 374 | .el-icon-sell:before { 375 | content: '\e6d5'; 376 | } 377 | .el-icon-sold-out:before { 378 | content: '\e6d6'; 379 | } 380 | .el-icon-shopping-bag-2:before { 381 | content: '\e74d'; 382 | } 383 | .el-icon-shopping-bag-1:before { 384 | content: '\e74e'; 385 | } 386 | .el-icon-shopping-cart-2:before { 387 | content: '\e74f'; 388 | } 389 | .el-icon-shopping-cart-1:before { 390 | content: '\e750'; 391 | } 392 | .el-icon-shopping-cart-full:before { 393 | content: '\e751'; 394 | } 395 | .el-icon-smoking:before { 396 | content: '\e752'; 397 | } 398 | .el-icon-no-smoking:before { 399 | content: '\e753'; 400 | } 401 | .el-icon-house:before { 402 | content: '\e754'; 403 | } 404 | .el-icon-table-lamp:before { 405 | content: '\e755'; 406 | } 407 | .el-icon-school:before { 408 | content: '\e756'; 409 | } 410 | .el-icon-office-building:before { 411 | content: '\e757'; 412 | } 413 | .el-icon-toilet-paper:before { 414 | content: '\e758'; 415 | } 416 | .el-icon-notebook-2:before { 417 | content: '\e759'; 418 | } 419 | .el-icon-notebook-1:before { 420 | content: '\e75a'; 421 | } 422 | .el-icon-files:before { 423 | content: '\e75b'; 424 | } 425 | .el-icon-collection:before { 426 | content: '\e75c'; 427 | } 428 | .el-icon-receiving:before { 429 | content: '\e75d'; 430 | } 431 | .el-icon-suitcase-1:before { 432 | content: '\e760'; 433 | } 434 | .el-icon-suitcase:before { 435 | content: '\e761'; 436 | } 437 | .el-icon-film:before { 438 | content: '\e763'; 439 | } 440 | .el-icon-collection-tag:before { 441 | content: '\e765'; 442 | } 443 | .el-icon-data-analysis:before { 444 | content: '\e766'; 445 | } 446 | .el-icon-pie-chart:before { 447 | content: '\e767'; 448 | } 449 | .el-icon-data-board:before { 450 | content: '\e768'; 451 | } 452 | .el-icon-data-line:before { 453 | content: '\e76d'; 454 | } 455 | .el-icon-reading:before { 456 | content: '\e769'; 457 | } 458 | .el-icon-magic-stick:before { 459 | content: '\e76a'; 460 | } 461 | .el-icon-coordinate:before { 462 | content: '\e76b'; 463 | } 464 | .el-icon-mouse:before { 465 | content: '\e76c'; 466 | } 467 | .el-icon-brush:before { 468 | content: '\e76e'; 469 | } 470 | .el-icon-headset:before { 471 | content: '\e76f'; 472 | } 473 | .el-icon-umbrella:before { 474 | content: '\e770'; 475 | } 476 | .el-icon-scissors:before { 477 | content: '\e771'; 478 | } 479 | .el-icon-mobile:before { 480 | content: '\e773'; 481 | } 482 | .el-icon-attract:before { 483 | content: '\e774'; 484 | } 485 | .el-icon-monitor:before { 486 | content: '\e775'; 487 | } 488 | .el-icon-search:before { 489 | content: '\e778'; 490 | } 491 | .el-icon-takeaway-box:before { 492 | content: '\e77a'; 493 | } 494 | .el-icon-paperclip:before { 495 | content: '\e77d'; 496 | } 497 | .el-icon-printer:before { 498 | content: '\e77e'; 499 | } 500 | .el-icon-document-add:before { 501 | content: '\e782'; 502 | } 503 | .el-icon-document:before { 504 | content: '\e785'; 505 | } 506 | .el-icon-document-checked:before { 507 | content: '\e786'; 508 | } 509 | .el-icon-document-copy:before { 510 | content: '\e787'; 511 | } 512 | .el-icon-document-delete:before { 513 | content: '\e788'; 514 | } 515 | .el-icon-document-remove:before { 516 | content: '\e789'; 517 | } 518 | .el-icon-tickets:before { 519 | content: '\e78b'; 520 | } 521 | .el-icon-folder-checked:before { 522 | content: '\e77f'; 523 | } 524 | .el-icon-folder-delete:before { 525 | content: '\e780'; 526 | } 527 | .el-icon-folder-remove:before { 528 | content: '\e781'; 529 | } 530 | .el-icon-folder-add:before { 531 | content: '\e783'; 532 | } 533 | .el-icon-folder-opened:before { 534 | content: '\e784'; 535 | } 536 | .el-icon-folder:before { 537 | content: '\e78a'; 538 | } 539 | .el-icon-edit-outline:before { 540 | content: '\e764'; 541 | } 542 | .el-icon-edit:before { 543 | content: '\e78c'; 544 | } 545 | .el-icon-date:before { 546 | content: '\e78e'; 547 | } 548 | .el-icon-c-scale-to-original:before { 549 | content: '\e7c6'; 550 | } 551 | .el-icon-view:before { 552 | content: '\e6ce'; 553 | } 554 | .el-icon-loading:before { 555 | content: '\e6cf'; 556 | } 557 | .el-icon-rank:before { 558 | content: '\e6d1'; 559 | } 560 | .el-icon-sort-down:before { 561 | content: '\e7c4'; 562 | } 563 | .el-icon-sort-up:before { 564 | content: '\e7c5'; 565 | } 566 | .el-icon-sort:before { 567 | content: '\e6d2'; 568 | } 569 | .el-icon-finished:before { 570 | content: '\e6cd'; 571 | } 572 | .el-icon-refresh-left:before { 573 | content: '\e6c7'; 574 | } 575 | .el-icon-refresh-right:before { 576 | content: '\e6c8'; 577 | } 578 | .el-icon-refresh:before { 579 | content: '\e6d0'; 580 | } 581 | .el-icon-video-play:before { 582 | content: '\e7c0'; 583 | } 584 | .el-icon-video-pause:before { 585 | content: '\e7c1'; 586 | } 587 | .el-icon-d-arrow-right:before { 588 | content: '\e6dc'; 589 | } 590 | .el-icon-d-arrow-left:before { 591 | content: '\e6dd'; 592 | } 593 | .el-icon-arrow-up:before { 594 | content: '\e6e1'; 595 | } 596 | .el-icon-arrow-down:before { 597 | content: '\e6df'; 598 | } 599 | .el-icon-arrow-right:before { 600 | content: '\e6e0'; 601 | } 602 | .el-icon-arrow-left:before { 603 | content: '\e6de'; 604 | } 605 | .el-icon-top-right:before { 606 | content: '\e6e7'; 607 | } 608 | .el-icon-top-left:before { 609 | content: '\e6e8'; 610 | } 611 | .el-icon-top:before { 612 | content: '\e6e6'; 613 | } 614 | .el-icon-bottom:before { 615 | content: '\e6eb'; 616 | } 617 | .el-icon-right:before { 618 | content: '\e6e9'; 619 | } 620 | .el-icon-back:before { 621 | content: '\e6ea'; 622 | } 623 | .el-icon-bottom-right:before { 624 | content: '\e6ec'; 625 | } 626 | .el-icon-bottom-left:before { 627 | content: '\e6ed'; 628 | } 629 | .el-icon-caret-top:before { 630 | content: '\e78f'; 631 | } 632 | .el-icon-caret-bottom:before { 633 | content: '\e790'; 634 | } 635 | .el-icon-caret-right:before { 636 | content: '\e791'; 637 | } 638 | .el-icon-caret-left:before { 639 | content: '\e792'; 640 | } 641 | .el-icon-d-caret:before { 642 | content: '\e79a'; 643 | } 644 | .el-icon-share:before { 645 | content: '\e793'; 646 | } 647 | .el-icon-menu:before { 648 | content: '\e798'; 649 | } 650 | .el-icon-s-grid:before { 651 | content: '\e7a6'; 652 | } 653 | .el-icon-s-check:before { 654 | content: '\e7a7'; 655 | } 656 | .el-icon-s-data:before { 657 | content: '\e7a8'; 658 | } 659 | .el-icon-s-opportunity:before { 660 | content: '\e7aa'; 661 | } 662 | .el-icon-s-custom:before { 663 | content: '\e7ab'; 664 | } 665 | .el-icon-s-claim:before { 666 | content: '\e7ad'; 667 | } 668 | .el-icon-s-finance:before { 669 | content: '\e7ae'; 670 | } 671 | .el-icon-s-comment:before { 672 | content: '\e7af'; 673 | } 674 | .el-icon-s-flag:before { 675 | content: '\e7b0'; 676 | } 677 | .el-icon-s-marketing:before { 678 | content: '\e7b1'; 679 | } 680 | .el-icon-s-shop:before { 681 | content: '\e7b4'; 682 | } 683 | .el-icon-s-open:before { 684 | content: '\e7b5'; 685 | } 686 | .el-icon-s-management:before { 687 | content: '\e7b6'; 688 | } 689 | .el-icon-s-ticket:before { 690 | content: '\e7b7'; 691 | } 692 | .el-icon-s-release:before { 693 | content: '\e7b8'; 694 | } 695 | .el-icon-s-home:before { 696 | content: '\e7b9'; 697 | } 698 | .el-icon-s-promotion:before { 699 | content: '\e7ba'; 700 | } 701 | .el-icon-s-operation:before { 702 | content: '\e7bb'; 703 | } 704 | .el-icon-s-unfold:before { 705 | content: '\e7bc'; 706 | } 707 | .el-icon-s-fold:before { 708 | content: '\e7a9'; 709 | } 710 | .el-icon-s-platform:before { 711 | content: '\e7bd'; 712 | } 713 | .el-icon-s-order:before { 714 | content: '\e7be'; 715 | } 716 | .el-icon-s-cooperation:before { 717 | content: '\e7bf'; 718 | } 719 | .el-icon-bell:before { 720 | content: '\e725'; 721 | } 722 | .el-icon-message-solid:before { 723 | content: '\e799'; 724 | } 725 | .el-icon-video-camera:before { 726 | content: '\e772'; 727 | } 728 | .el-icon-video-camera-solid:before { 729 | content: '\e796'; 730 | } 731 | .el-icon-camera:before { 732 | content: '\e779'; 733 | } 734 | .el-icon-camera-solid:before { 735 | content: '\e79b'; 736 | } 737 | .el-icon-download:before { 738 | content: '\e77c'; 739 | } 740 | .el-icon-upload2:before { 741 | content: '\e77b'; 742 | } 743 | .el-icon-upload:before { 744 | content: '\e7c3'; 745 | } 746 | .el-icon-picture-outline-round:before { 747 | content: '\e75f'; 748 | } 749 | .el-icon-picture-outline:before { 750 | content: '\e75e'; 751 | } 752 | .el-icon-picture:before { 753 | content: '\e79f'; 754 | } 755 | .el-icon-close:before { 756 | content: '\e6db'; 757 | } 758 | .el-icon-check:before { 759 | content: '\e6da'; 760 | } 761 | .el-icon-plus:before { 762 | content: '\e6d9'; 763 | } 764 | .el-icon-minus:before { 765 | content: '\e6d8'; 766 | } 767 | .el-icon-help:before { 768 | content: '\e73d'; 769 | } 770 | .el-icon-s-help:before { 771 | content: '\e7b3'; 772 | } 773 | .el-icon-circle-close:before { 774 | content: '\e78d'; 775 | } 776 | .el-icon-circle-check:before { 777 | content: '\e720'; 778 | } 779 | .el-icon-circle-plus-outline:before { 780 | content: '\e723'; 781 | } 782 | .el-icon-remove-outline:before { 783 | content: '\e722'; 784 | } 785 | .el-icon-zoom-out:before { 786 | content: '\e776'; 787 | } 788 | .el-icon-zoom-in:before { 789 | content: '\e777'; 790 | } 791 | .el-icon-error:before { 792 | content: '\e79d'; 793 | } 794 | .el-icon-success:before { 795 | content: '\e79c'; 796 | } 797 | .el-icon-circle-plus:before { 798 | content: '\e7a0'; 799 | } 800 | .el-icon-remove:before { 801 | content: '\e7a2'; 802 | } 803 | .el-icon-info:before { 804 | content: '\e7a1'; 805 | } 806 | .el-icon-question:before { 807 | content: '\e7a4'; 808 | } 809 | .el-icon-warning-outline:before { 810 | content: '\e6c9'; 811 | } 812 | .el-icon-warning:before { 813 | content: '\e7a3'; 814 | } 815 | .el-icon-goods:before { 816 | content: '\e7c2'; 817 | } 818 | .el-icon-s-goods:before { 819 | content: '\e7b2'; 820 | } 821 | .el-icon-star-off:before { 822 | content: '\e717'; 823 | } 824 | .el-icon-star-on:before { 825 | content: '\e797'; 826 | } 827 | .el-icon-more-outline:before { 828 | content: '\e6cc'; 829 | } 830 | .el-icon-more:before { 831 | content: '\e794'; 832 | } 833 | .el-icon-phone-outline:before { 834 | content: '\e6cb'; 835 | } 836 | .el-icon-phone:before { 837 | content: '\e795'; 838 | } 839 | .el-icon-user:before { 840 | content: '\e6e3'; 841 | } 842 | .el-icon-user-solid:before { 843 | content: '\e7a5'; 844 | } 845 | .el-icon-setting:before { 846 | content: '\e6ca'; 847 | } 848 | .el-icon-s-tools:before { 849 | content: '\e7ac'; 850 | } 851 | .el-icon-delete:before { 852 | content: '\e6d7'; 853 | } 854 | .el-icon-delete-solid:before { 855 | content: '\e7c9'; 856 | } 857 | .el-icon-eleme:before { 858 | content: '\e7c7'; 859 | } 860 | .el-icon-platform-eleme:before { 861 | content: '\e7ca'; 862 | } 863 | .el-icon-loading { 864 | -webkit-animation: rotating 2s linear infinite; 865 | animation: rotating 2s linear infinite; 866 | } 867 | .el-icon--right { 868 | margin-left: 5px; 869 | } 870 | .el-icon--left { 871 | margin-right: 5px; 872 | } 873 | @-webkit-keyframes rotating { 874 | 0% { 875 | -webkit-transform: rotateZ(0); 876 | transform: rotateZ(0); 877 | } 878 | 100% { 879 | -webkit-transform: rotateZ(360deg); 880 | transform: rotateZ(360deg); 881 | } 882 | } 883 | @keyframes rotating { 884 | 0% { 885 | -webkit-transform: rotateZ(0); 886 | transform: rotateZ(0); 887 | } 888 | 100% { 889 | -webkit-transform: rotateZ(360deg); 890 | transform: rotateZ(360deg); 891 | } 892 | } 893 | -------------------------------------------------------------------------------- /src/assets/element-icon/element-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaolidan00/ruler-canvas/95247426f8997585e221e095082c6a235f18ac03/src/assets/element-icon/element-icons.ttf -------------------------------------------------------------------------------- /src/assets/element-icon/element-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaolidan00/ruler-canvas/95247426f8997585e221e095082c6a235f18ac03/src/assets/element-icon/element-icons.woff -------------------------------------------------------------------------------- /src/assets/images/point.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/vars.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-color: #1a67ff; 3 | //标尺背景颜色 4 | --ruler-bg: #f4f7fe; 5 | //移动蒙版背景颜色 6 | --move-bg: rgba(0, 0, 0, 0.1); 7 | //画布阴影 8 | --canvas-shadow: rgba(0, 0, 0, 0.5); 9 | 10 | --slider-icon: #32363c; 11 | --slider-bg: #ffffff; 12 | --canvas-slider-border: rgba(0, 0, 0, 0.1); 13 | 14 | --thumbnail-wrap-bg: #f4f7fe; 15 | } 16 | 17 | * { 18 | box-sizing: border-box !important; 19 | } 20 | body { 21 | position: absolute; 22 | height: 100%; 23 | width: 100%; 24 | overflow: hidden; 25 | padding: 0px; 26 | } 27 | -------------------------------------------------------------------------------- /src/assets/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/dashboard/CanvasPanel.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 70 | 71 | 77 | -------------------------------------------------------------------------------- /src/dashboard/Dashboard.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 39 | 40 | 84 | -------------------------------------------------------------------------------- /src/dashboard/canvas-bg/CanvasBg.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 137 | 138 | 179 | -------------------------------------------------------------------------------- /src/dashboard/canvas-bg/CanvasSlider.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 90 | 149 | -------------------------------------------------------------------------------- /src/dashboard/canvas-bg/CanvasThumbnail.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 184 | 194 | -------------------------------------------------------------------------------- /src/dashboard/canvas-bg/drawRuler.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 画标尺刻度Canvas 3 | * @param direction 方向 4 | * @param canvas canvas DOM 5 | * @param scale 缩放比例[20-200] 6 | * @param width 长度 7 | * @param height 高度 8 | * @param startLen 开始距离 9 | */ 10 | export function drawRuler( 11 | direction: string, 12 | canvas: HTMLCanvasElement, 13 | scale: number = 100, 14 | width: number, 15 | height: number = 24, 16 | startLen: number = 60 17 | ) { 18 | const padding = 2; 19 | const ctx: CanvasRenderingContext2D = canvas.getContext('2d'); 20 | const percent = scale * 0.01; 21 | let unit = Math.ceil(10 / percent); 22 | if (unit < 8) { 23 | unit = 8; 24 | } 25 | //计算出要绘制多少个刻度 26 | const scaleCount = Math.ceil(width + startLen / unit); 27 | if (direction == 'top') { 28 | canvas.width = width + startLen; 29 | canvas.height = height; 30 | ctx.clearRect(0, 0, width, height); 31 | ctx.beginPath(); 32 | //绘制起点 33 | ctx.strokeStyle = 'rgb(161, 174, 179)'; 34 | ctx.font = '10px Arial'; 35 | ctx.lineWidth = 0.5; 36 | ctx.moveTo(startLen, 0); 37 | ctx.lineTo(startLen, height); 38 | ctx.fillText('0', startLen + padding, 13); 39 | 40 | for (let i = 1; i <= scaleCount; i++) { 41 | //计算每个刻度的位置 42 | const step = startLen + Math.round(i * unit * percent); 43 | //10的倍数刻度大长度 44 | if (i % 10 === 0) { 45 | ctx.moveTo(step, 0); 46 | ctx.lineTo(step, height); 47 | //标注刻度值 48 | const scaleText = i * unit + ''; 49 | ctx.fillText(scaleText, step + padding, 13); 50 | } else if (i % 5 === 0) {//5的倍数刻度中长度 51 | ctx.moveTo(step, 15); 52 | ctx.lineTo(step, height); 53 | //标注刻度值 54 | const scaleText = i * unit + ''; 55 | ctx.fillText(scaleText, step + padding, 13); 56 | } else {//其他刻度小长度 57 | ctx.moveTo(step, height - 2); 58 | ctx.lineTo(step, height); 59 | } 60 | } 61 | ctx.stroke(); 62 | } else { 63 | canvas.width = height; 64 | canvas.height = width + startLen; 65 | ctx.clearRect(0, 0, height, width + startLen); 66 | 67 | ctx.beginPath(); 68 | //绘制起点 69 | ctx.strokeStyle = 'rgb(161, 174, 179)'; 70 | ctx.font = '10px Arial'; 71 | ctx.lineWidth = 0.5; 72 | ctx.moveTo(0, startLen); 73 | ctx.lineTo(height, startLen); 74 | ctx.fillText('0', padding, startLen - padding); 75 | //计算出要绘制多少个刻度 76 | 77 | for (let i = 1; i <= scaleCount; i++) { 78 | const step = startLen + Math.round(i * unit * percent); 79 | if (i % 10 === 0) { 80 | ctx.moveTo(0, step); 81 | ctx.lineTo(height, step); 82 | //标注刻度值 83 | const scaleText = unit * i + ''; 84 | ctx.fillText(scaleText, padding, step - padding); 85 | } else if (i % 5 === 0) { 86 | ctx.moveTo(15, step); 87 | ctx.lineTo(height, step); 88 | //标注刻度值 89 | const scaleText = unit * i + ''; 90 | ctx.fillText(scaleText, padding, step - padding); 91 | } else { 92 | ctx.moveTo(height - 2, step); 93 | ctx.lineTo(height, step); 94 | } 95 | } 96 | ctx.stroke(); 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /src/data/keyCode.ts: -------------------------------------------------------------------------------- 1 | export const keyCode = { 2 | space: 32, 3 | backspace: 8, 4 | shift: 16, 5 | ctr: 17, 6 | option: 18, 7 | command: 91, 8 | alt: 18, 9 | ctrl: 17, 10 | equal: 187, 11 | minus: 189, 12 | q: 81, 13 | w: 87, 14 | c: 67, 15 | d: 68, 16 | z: 90, 17 | y: 89, 18 | g: 71, 19 | l: 76, 20 | h: 72, 21 | u: 85, 22 | o: 79, 23 | r: 82, 24 | t: 84, 25 | b: 66, 26 | s: 83, 27 | p: 80, 28 | left: 37, 29 | top: 38, 30 | right: 39, 31 | bottom: 40 32 | }; 33 | 34 | // export function getCodeKey(code) { 35 | // for (let k in keyCode) { 36 | // if (keyCode[k] == code) { 37 | // return k; 38 | // } 39 | // } 40 | // return ''; 41 | // } 42 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import { createPinia } from 'pinia'; 3 | 4 | import App from './App.vue'; 5 | import ElementPlus from 'element-plus'; 6 | import 'normalize.css'; 7 | import 'element-plus/dist/index.css'; 8 | import '@/assets/element-icon/el-index.css'; 9 | 10 | const app = createApp(App); 11 | app.use(createPinia()); 12 | app.use(ElementPlus); 13 | app.mount('#app'); 14 | -------------------------------------------------------------------------------- /src/stores/editor.ts: -------------------------------------------------------------------------------- 1 | import { defineStore } from 'pinia'; 2 | 3 | export const useEditorStore = defineStore('editor', { 4 | state: () => ({ 5 | isMoveCanvas: false, 6 | isThumbnail: true, 7 | viewWidth: 1000, 8 | viewHeight: 800, 9 | scale: 100, //缩放 10 | scrollTop: 0, 11 | scrollLeft: 0, 12 | screenWidth: 1920, 13 | screenHeight: 1080, 14 | 15 | //bg 16 | backgroundColor: '#FFFFFF', 17 | backgroundImage: '' 18 | }), 19 | getters: { 20 | scale() { 21 | return this.$state.scale; 22 | }, 23 | percent() { 24 | return this.scale * 0.01; 25 | }, 26 | thumbnailSize() { 27 | if (this.scale > 100) { 28 | return 10 / this.scale; 29 | } else { 30 | return 0.1; 31 | } 32 | }, 33 | viewWidth() { 34 | return this.$state.viewWidth; 35 | }, 36 | viewHeight() { 37 | return this.$state.viewHeight; 38 | }, 39 | scrollTop() { 40 | return this.$state.scrollTop; 41 | }, 42 | scrollLeft() { 43 | return this.$state.scrollLeft; 44 | }, 45 | screenWidth() { 46 | return this.$state.screenWidth; 47 | }, 48 | screenHeight() { 49 | return this.$state.screenHeight; 50 | }, 51 | 52 | showWidth() { 53 | return this.screenWidth * (this.scale < 100 ? 1 : this.percent) + 400; 54 | }, 55 | showHeight() { 56 | return this.screenHeight * (this.scale < 100 ? 1 : this.percent) + 400; 57 | }, 58 | isMoveCanvas() { 59 | return this.$state.isMoveCanvas; 60 | }, 61 | canvasConfig() { 62 | return { 63 | thumbnailWidth: Math.ceil(this.screenWidth * this.thumbnailSize * this.percent), 64 | thumbnailHeight: Math.ceil(this.screenHeight * this.thumbnailSize * this.percent), 65 | thumbnailWrapWidth: Math.ceil(this.showWidth * this.thumbnailSize), 66 | thumbnailWrapHeight: Math.ceil(this.showHeight * this.thumbnailSize) 67 | }; 68 | } 69 | }, 70 | actions: { 71 | setViewBox(data: { width: number; height: number }) { 72 | this.$state.viewWidth = data.width; 73 | this.$state.viewHeight = data.height; 74 | }, 75 | setScroll({ left, top }: { left: number; top: number }) { 76 | const distance = 60; 77 | if (left < 0) { 78 | left = 0; 79 | } else if (left > this.showWidth - this.viewWidth - distance) { 80 | left = this.showWidth - this.viewWidth - distance; 81 | } 82 | if (top < 0) { 83 | top = 0; 84 | } else if (top > this.showHeight - this.viewHeight - distance) { 85 | top = this.showHeight - this.viewHeight - distance; 86 | } 87 | 88 | this.$state.scrollLeft = Math.round(left); 89 | this.$state.scrollTop = Math.round(top); 90 | }, 91 | setMoveCanvas(data: boolean) { 92 | this.$state.isMoveCanvas = data; 93 | }, 94 | setScale(data: number) { 95 | this.$state.scale = data; 96 | }, 97 | setThumbnail(data: boolean) { 98 | this.$state.isThumbnail = data; 99 | } 100 | } 101 | }); 102 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | -webkit-text-size-adjust: 100%; 15 | } 16 | 17 | a { 18 | font-weight: 500; 19 | color: #646cff; 20 | text-decoration: inherit; 21 | } 22 | a:hover { 23 | color: #535bf2; 24 | } 25 | 26 | body { 27 | margin: 0; 28 | display: flex; 29 | place-items: center; 30 | min-width: 320px; 31 | min-height: 100vh; 32 | } 33 | 34 | h1 { 35 | font-size: 3.2em; 36 | line-height: 1.1; 37 | } 38 | 39 | button { 40 | border-radius: 8px; 41 | border: 1px solid transparent; 42 | padding: 0.6em 1.2em; 43 | font-size: 1em; 44 | font-weight: 500; 45 | font-family: inherit; 46 | background-color: #1a1a1a; 47 | cursor: pointer; 48 | transition: border-color 0.25s; 49 | } 50 | button:hover { 51 | border-color: #646cff; 52 | } 53 | button:focus, 54 | button:focus-visible { 55 | outline: 4px auto -webkit-focus-ring-color; 56 | } 57 | 58 | .card { 59 | padding: 2em; 60 | } 61 | 62 | #app { 63 | max-width: 1280px; 64 | margin: 0 auto; 65 | padding: 2rem; 66 | text-align: center; 67 | } 68 | 69 | @media (prefers-color-scheme: light) { 70 | :root { 71 | color: #213547; 72 | background-color: #ffffff; 73 | } 74 | a:hover { 75 | color: #747bff; 76 | } 77 | button { 78 | background-color: #f9f9f9; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "preserve", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true, 22 | "baseUrl": ".", 23 | "paths": { 24 | "@/*": ["./src/*"] 25 | } 26 | }, 27 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 28 | "references": [{ "path": "./tsconfig.node.json" }] 29 | } 30 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import vue from '@vitejs/plugin-vue'; 3 | import { fileURLToPath, URL } from 'node:url'; 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()], 7 | resolve: { 8 | alias: { 9 | '@': fileURLToPath(new URL('./src', import.meta.url)) 10 | } 11 | } 12 | }); 13 | --------------------------------------------------------------------------------