first commit

2025-09-11 06:57:10 +08:00 · 2024-04-08 21:34:02 +08:00
commit a41a7f32ab
223 changed files with 44629 additions and 0 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,23 @@
+<template>
+  <a-config-provider update-at-scroll>
+    <router-view></router-view>
+    <template #loading>
+      <img src="/static/images/loading.gif" class="loading-icon" alt="loading" />
+    </template>
+  </a-config-provider>
+</template>
+
+<script setup lang="ts">
+import { useAppStore } from '@/stores'
+
+defineOptions({ name: 'App' })
+
+const appStore = useAppStore()
+appStore.initTheme()
+</script>
+
+<style lang="scss" scoped>
+.loading-icon {
+  width: 30px;
+}
+</style>
--- a/src/apis/area/index.ts
+++ b/src/apis/area/index.ts
@@ -0,0 +1,7 @@
+import http from '@/utils/http'
+import type * as Area from './type'
+
+/** @desc 获取地区列表 */
+export const getAreaList = (params: { type: 'province' | 'city' | 'area'; code?: string }) => {
+  return http.get<Area.AreaItem>('/area/list', params)
+}
--- a/src/apis/area/type.ts
+++ b/src/apis/area/type.ts
@@ -0,0 +1,5 @@
+export interface AreaItem {
+  label: string
+  code: string
+  children?: AreaItem[]
+}
--- a/src/apis/auth/index.ts
+++ b/src/apis/auth/index.ts
@@ -0,0 +1,24 @@
+import http from '@/utils/http'
+import type * as Auth from './type'
+
+const BASE_URL = '/auth'
+
+/** @desc 账号登录 */
+export function accountLogin(req: Auth.AccountLoginReq) {
+  return http.post<Auth.LoginResp>(`${BASE_URL}/account`, req)
+}
+
+/** @desc 退出登录 */
+export function logout() {
+  return http.post(`${BASE_URL}/logout`)
+}
+
+/** @desc 获取用户信息 */
+export const getUserInfo = () => {
+  return http.get<Auth.UserInfo>(`${BASE_URL}/user/info`)
+}
+
+/** @desc 获取路由信息 */
+export const getUserRoute = () => {
+  return http.get<Auth.RouteItem[]>(`${BASE_URL}/route`)
+}
--- a/src/apis/auth/type.ts
+++ b/src/apis/auth/type.ts
@@ -0,0 +1,53 @@
+/** 用户类型 */
+export interface UserInfo {
+  id: string
+  username: string
+  nickname: string
+  gender: 0 | 1 | 2
+  email: string
+  phone: string
+  avatar: string
+  pwdResetTime: string
+  registrationDate: string
+  deptName: string
+  roles: string[]
+  permissions: string[]
+}
+
+/** 路由类型 */
+export interface RouteItem {
+  id: string
+  title: string
+  parentId: string
+  type: 1 | 2 | 3
+  path: string
+  name: string
+  component: string
+  redirect: string
+  icon: string
+  isExternal: boolean
+  isHidden: boolean
+  isCache: boolean
+  permission: string
+  roles: string[]
+  sort: number
+  status: 0 | 1
+  children: RouteItem[]
+  activeMenu: string
+  alwaysShow: boolean
+  breadcrumb: boolean
+  showInTabs: boolean
+  affix: boolean
+}
+
+export interface AccountLoginReq {
+  username: string
+  password: string
+  captcha: string
+  uuid: string
+}
+
+// 登录响应类型
+export interface LoginResp {
+  token: string
+}
--- a/src/apis/common/captcha.ts
+++ b/src/apis/common/captcha.ts
@@ -0,0 +1,9 @@
+import http from '@/utils/http'
+import type * as Common from './type'
+
+const BASE_URL = '/captcha'
+
+/** @desc 获取图片验证码 */
+export function getImageCaptcha() {
+  return http.get<Common.ImageCaptchaResp>(`${BASE_URL}/img`)
+}
--- a/src/apis/common/common.ts
+++ b/src/apis/common/common.ts
@@ -0,0 +1,20 @@
+import http from '@/utils/http'
+import type { LabelValueState } from '@/types/global'
+import type { TreeNodeData } from '@arco-design/web-vue'
+
+const BASE_URL = '/common'
+
+/** @desc 查询部门树 */
+export function listDeptTree(query: { description: string }) {
+  return http.get<TreeNodeData[]>(`${BASE_URL}/tree/dept`, query)
+}
+
+/** @desc 查询角色列表 */
+export function listRoleDict(query?: { name: string; status: number }) {
+  return http.get<LabelValueState[]>(`${BASE_URL}/dict/role`, query)
+}
+
+/** @desc 查询字典列表 */
+export function listCommonDict(code: string) {
+  return http.get<LabelValueState[]>(`${BASE_URL}/dict/${code}`)
+}
--- a/src/apis/common/index.ts
+++ b/src/apis/common/index.ts
@@ -0,0 +1,2 @@
+export * from './common'
+export * from './captcha'
--- a/src/apis/common/type.ts
+++ b/src/apis/common/type.ts
@@ -0,0 +1,5 @@
+/** 图形验证码类型 */
+export interface ImageCaptchaResp {
+  uuid: string
+  img: string
+}
--- a/src/apis/index.ts
+++ b/src/apis/index.ts
@@ -0,0 +1,8 @@
+export * from './area'
+export * from './auth'
+export * from './common'
+
+export * from './area/type'
+export * from './auth/type'
+export * from './common/type'
+
--- a/src/assets/fonts/DINPro-Bold.otf
+++ b/src/assets/fonts/DINPro-Bold.otf
--- a/src/assets/fonts/DINPro-Medium.otf
+++ b/src/assets/fonts/DINPro-Medium.otf
--- a/src/assets/fonts/DINPro-Regular.otf
+++ b/src/assets/fonts/DINPro-Regular.otf
--- a/src/assets/fonts/font.css
+++ b/src/assets/fonts/font.css
@@ -0,0 +1,20 @@
+@font-face {
+  font-family: 'DINPro-Bold';
+  src: url('./DINPro-Bold.otf');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DINPro-Medium';
+  src: url('./DINPro-Medium.otf');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DINPro-Regular';
+  src: url('./DINPro-Regular.otf');
+  font-weight: normal;
+  font-style: normal;
+}
--- a/src/assets/icons/avatar-man.svg
+++ b/src/assets/icons/avatar-man.svg
@@ -0,0 +1,29 @@
+<svg t="1648864366083" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="43365" width="200" height="200">
+  <path d="M0 512c0 281.6 230.4 512 512 512s512-230.4 512-512S793.6 0 512 0 0 230.4 0 512z" fill="#D7D1D1" p-id="43366">
+  </path>
+  <path
+    d="M512 1024c140.8 0 264.541091-55.458909 358.4-145.058909-8.541091-29.882182-17.058909-55.482182-25.6-68.282182-42.658909-51.2-221.858909-72.517818-221.858909-72.517818L512 768l-106.658909-29.858909s-179.2 25.6-221.882182 72.517818c-8.517818 12.8-17.058909 38.4-25.6 68.282182C247.458909 968.541091 371.2 1024 512 1024z"
+    fill="#6B8E9D" p-id="43367"></path>
+  <path
+    d="M281.6 456.541091c0-29.882182 12.8-55.482182 34.141091-55.482182 21.317818 0 42.658909 17.082182 46.917818 46.941091 4.282182 29.858909-12.8 55.458909-34.117818 55.458909-21.341091 0-46.941091-17.058909-46.941091-46.917818z m145.058909 170.658909v149.341091h170.682182V627.2h-170.682182z m273.082182-123.741091c-21.341091 0-38.4-29.858909-34.141091-55.458909 4.258909-29.858909 25.6-51.2 46.941091-46.941091 21.317818 0 38.4 29.882182 34.117818 55.482182-4.258909 29.858909-25.6 51.2-46.917818 46.917818z"
+    fill="#FFE5C5" p-id="43368"></path>
+  <path
+    d="M512 213.341091s-183.458909 8.517818-183.458909 106.658909v200.541091c0 38.4 59.717818 149.317818 119.458909 153.6 29.858909 0 64 4.258909 64 4.258909s38.4-4.258909 64-4.258909c55.458909-4.282182 115.2-115.2 115.2-153.6v-196.282182c4.258909-98.117818-179.2-110.917818-179.2-110.917818"
+    fill="#FEE1B9" p-id="43369"></path>
+  <path
+    d="M622.941091 243.2C571.741091 217.6 512 213.341091 512 213.341091c-8.541091 0-183.458909 8.517818-183.458909 106.658909v200.541091c0 38.4 59.717818 149.317818 119.458909 153.6H512s38.4-4.282182 64-4.282182c55.458909-4.258909 119.458909-115.2 119.458909-153.6v-192c0-38.4-29.858909-68.258909-72.517818-81.058909"
+    fill="#FFF0DA" p-id="43370"></path>
+  <path d="M401.058909 729.6L499.2 1024h29.858909l98.141091-294.4-115.2 25.6z" fill="#FFFFFF" p-id="43371"></path>
+  <path d="M524.8 819.2l25.6-25.6L512 755.2l-38.4 38.4 25.6 25.6-29.858909 149.341091L512 1011.2l46.941091-42.658909z"
+    fill="#515151" p-id="43372"></path>
+  <path
+    d="M512 755.2l89.6-46.941091 46.941091 25.6-76.8 106.682182L512 755.2z m0 0l-89.6-46.941091-46.941091 25.6 93.882182 106.682182L512 755.2z"
+    fill="#FFFFFF" p-id="43373"></path>
+  <path
+    d="M704 439.458909h-17.058909l-21.341091-162.117818s51.2-21.341091 64 42.658909c12.8 64-25.6 119.458909-25.6 119.458909m-392.541091 0h17.082182l21.317818-162.117818s-51.2-21.341091-64 42.658909c-8.517818 64 25.6 119.458909 25.6 119.458909"
+    fill="#46382E" p-id="43374"></path>
+  <path
+    d="M512 349.858909c102.4 0 174.941091-12.8 221.858909-102.4 0 0-46.917818-12.8-153.6-55.458909-166.4-68.258909-302.917818 42.658909-256 119.458909 12.8 25.6 85.341091 38.4 187.741091 38.4z"
+    fill="#46382E" p-id="43375"></path>
+</svg>
--- a/src/assets/icons/avatar-woman.svg
+++ b/src/assets/icons/avatar-woman.svg
@@ -0,0 +1,24 @@
+<svg t="1648864059094" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="34164" width="200" height="200">
+  <path
+    d="M510.002302 510.002302m-510.002302 0a510.002302 510.002302 0 1 0 1020.004604 0 510.002302 510.002302 0 1 0-1020.004604 0Z"
+    fill="#F9E9E6" p-id="34165"></path>
+  <path
+    d="M511.532309 1023.999622c126.952795 0.151112 249.608349-44.738535 344.893779-126.216125l-7.09281-43.54853C849.031055 778.934072 786.206327 717.969908 708.676532 717.781018H318.043102c-77.539239 0.245557-140.326189 61.22861-140.571745 136.529505L170.000767 900.465731c94.813206 79.777582 216.08042 123.628336 341.531542 123.533891"
+    fill="#FCA183" p-id="34166"></path>
+  <path
+    d="M523.668475 806.200306H511.607865c-46.183542 0-96.050434-38.967954-96.050434-86.577613l12.117277-160.820726c0.160556-47.713549 37.636281-86.369834 83.942601-86.577613h11.966166c46.362987 0.122778 83.933157 38.797953 84.093712 86.577613l11.966166 160.820726c0 47.675771-49.781891 86.577613-95.984323 86.577613"
+    fill="#FFFFFF" p-id="34167"></path>
+  <path
+    d="M523.668475 806.200306H511.607865c-46.183542 0-96.050434-38.967954-96.050434-86.577613l12.117277-160.820726c0.160556-47.713549 37.636281-86.369834 83.942601-86.577613h11.966166c46.362987 0.122778 83.933157 38.797953 84.093712 86.577613l11.966166 160.820726c0 47.675771-49.781891 86.577613-95.984323 86.577613"
+    fill="#FFFFFF" p-id="34168"></path>
+  <path
+    d="M610.236643 651.46183l-5.987804-77.973686c-0.198334-45.437427-37.041278-82.21426-82.516484-82.374816h-11.833942c-45.475205 0.198334-82.280371 37.0035-82.440928 82.440928L415.557431 726.696614a67.490305 67.490305 0 0 0 8.575595 32.432368c5.940582 0.670559 11.918943 1.001116 17.887858 1.001116h17.604524a159.252941 159.252941 0 0 0 150.611235-108.668268"
+    fill="#DCE6EA" p-id="34169"></path>
+  <path
+    d="M647.070143 302.223586a45.48465 45.48465 0 0 1 45.522428 45.446872v79.73036A52.643571 52.643571 0 0 1 708.336531 425.001918c31.29903 0 56.666922 27.483457 56.666922 61.389166S739.635561 547.78025 708.336531 547.78025a52.700238 52.700238 0 0 1-19.956202-3.910017 166.383529 166.383529 0 0 1-44.672423 80.646475 167.025754 167.025754 0 0 1-118.027755 48.809109h-18.747307a167.035198 167.035198 0 0 1-118.0372-48.809109 166.383529 166.383529 0 0 1-44.219088-78.644244c-4.514465 1.237228-9.246153 1.907786-14.119508 1.907786-31.29903 0-56.666922-27.483457-56.666923-61.389166s25.367892-61.389166 56.666923-61.389166c3.22057 0 6.375029 0.283335 9.444487 0.850004v-78.181464A45.475205 45.475205 0 0 1 385.523962 302.223586h261.546181z"
+    fill="#FFFFFF" p-id="34170"></path>
+  <path
+    d="M703.727621 832.097089l-85.652053-80.202584C672.63637 763.426224 687.369769 848.039384 739.19167 868.892811c1.095561 0.54778 13.099504-2.200565 50.188004-10.993383 1.643341-1.086116-3.815573-49.432445-2.720012-47.222435 7.650035 13.72284 13.637839 28.002904 19.644533 42.292413 22.912326-29.117354 40.375182-51.085231 45.824651-85.689831l-25.641782-32.96126 31.648476 21.977321 20.173425-48.346329s-75.272562-45.040759-95.47432-99.969896c-13.628395-34.62349-19.096753-224.117678-19.096753-224.117678s-3.815573-28.361795-26.727899-80.542586c-1.633896-3.296126-2.729457-6.592252-4.363353-9.888378-62.739728-174.128008-225.874353-139.523408-225.874352-139.523408-108.026043-9.340598-157.675712 38.448507-194.773657 101.074901-8.726706 12.627279-16.905632 27.464568-24.007887 43.397418-26.727898 60.964164-40.365738 129.965587-28.919019 256.323379 0 0 12.003943 173.570783 80.750364 255.964489 22.912326-9.878933 37.097945-47.241324 60.010271-56.024697 46.939101 0.538336 27.832903 2.191121 35.473494-18.681196 10.360602-22.515657 7.631146-58.234707 1.624452-84.59427-15.271736-10.983938-28.90013-23.611218-30.543472-25.273448-9.822267-8.783373-70.389762-65.355851-76.934791-98.31711l-1.633897-3.296126c-0.54778-2.200565-0.54778-3.853351-1.086116-6.044472a29.051242 29.051242 0 0 1-21.278429-3.296126c-11.994499-7.130588-16.905632-21.420097-18.548973-34.614045-1.643341-11.522274-1.095561-25.811783 5.987805-36.247941C522.053468 412.969642 506.224507 266.296758 506.224507 266.296758 517.13289 382.756728 658.99853 426.701926 722.824374 441.529771c13.637839 25.273447 2.738901 74.715337-28.361795 76.349233-1.643341 0-2.738901 0-3.834462-0.538335-1.086116 4.391686-2.172232 8.235593-3.258348 12.636723-13.656728 50.528006-47.477437 78.011463-87.304838 112.60662-8.178926 8.235593-14.18562 8.783373-22.364546 14.827844 1.633896 21.977321-2.729457 58.225263 6.54503 76.897014 10.370047 1.652785 29.4668 7.149477 33.830153 17.585635"
+    fill="#3E435C" p-id="34171"></path>
+</svg>
--- a/src/assets/icons/backtop.svg
+++ b/src/assets/icons/backtop.svg
@@ -0,0 +1 @@
+<svg t="1658914025483" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3426" width="200" height="200"><path d="M390 679.988v-35.864c0-111.8-70.278-134.488-70.278-134.488S250 534.068 250 644.126v35.864h140z" fill="#4988FD" p-id="3427"></path><path d="M390 699.988h-140c-11.046 0-20-8.956-20-20v-35.864c0-122.828 79.714-152.174 83.108-153.364a20.012 20.012 0 0 1 12.758-0.158c3.434 1.11 84.132 28.598 84.132 153.522v35.864c0.002 11.046-8.952 20-19.998 20z m-120-40h100v-15.864c0-76.286-35.178-104.09-49.982-112.408-14.948 8.808-50.018 37.46-50.018 112.41v15.862z" fill="#4988FD" p-id="3428"></path><path d="M776 679.988v-35.864c0-111.8-70.278-134.488-70.278-134.488S636 534.068 636 644.126v35.864h140z" fill="#4988FD" p-id="3429"></path><path d="M776 699.988h-140c-11.044 0-20-8.956-20-20v-35.864c0-122.828 79.714-152.174 83.11-153.364a20.026 20.026 0 0 1 12.758-0.158c3.436 1.11 84.132 28.598 84.132 153.522v35.864c0 11.046-8.956 20-20 20z m-120-40h100v-15.864c0-76.286-35.178-104.09-49.982-112.408-14.948 8.808-50.018 37.46-50.018 112.41v15.862z" fill="#4988FD" p-id="3430"></path><path d="M693.146 651.988v-92.516c0-288.398-181.292-346.924-181.292-346.924S332 275.57 332 559.476c0.012 56.328 0 92.514 0 92.514l361.146-0.002z" fill="#4988FD" p-id="3431"></path><path d="M332 671.99a19.996 19.996 0 0 1-20-20.006c0-0.004 0.012-36.184 0-92.504 0-152.884 51.604-243.788 94.894-293.124 47.876-54.564 96.308-71.968 98.346-72.684a20.012 20.012 0 0 1 12.758-0.158c2.06 0.666 51.034 16.918 99.41 71.014 43.676 48.838 95.738 139.654 95.738 294.944v92.516c0 11.044-8.956 20-20 20L332 671.99z m180.098-437.812c-13.256 6.236-45.196 23.814-76.73 60.39C380.828 357.83 352 449.434 352 559.476c0.006 31.314 0.006 56.404 0.004 72.514l321.142-0.002v-72.516c0-111.762-29.016-203.89-83.91-266.424-31.678-36.086-63.762-52.93-77.138-58.87z" fill="#4988FD" p-id="3432"></path><path d="M497.858 864.994l-42.426-42.426c-31.244-31.244-31.244-81.894 0-113.138 31.242-31.242 81.894-31.242 113.136 0 31.242 31.24 31.244 81.894 0 113.138l-42.426 42.426c-7.81 7.81-20.474 7.81-28.284 0z" fill="#DFECFD" p-id="3433"></path><path d="M512 870.852a19.868 19.868 0 0 1-14.142-5.86l-42.426-42.424c-15.11-15.11-23.432-35.2-23.432-56.57s8.322-41.46 23.432-56.568S490.632 686 512 685.996c21.37 0.002 41.46 8.324 56.568 23.434S592 744.63 592 766s-8.322 41.46-23.432 56.57l-42.428 42.428a19.864 19.864 0 0 1-14.14 5.856zM512 688c-20.832-0.002-40.42 8.112-55.154 22.844S434 745.164 434 766c0 20.834 8.112 40.422 22.846 55.156l42.426 42.426a17.88 17.88 0 0 0 12.728 5.272 17.88 17.88 0 0 0 12.726-5.27l42.428-42.428c14.732-14.732 22.846-34.32 22.846-55.156 0-20.834-8.114-40.42-22.846-55.154S532.834 688 512 688z" fill="#DFECFD" p-id="3434"></path><path d="M312.576 803.972l-22.274-22.274c-16.402-16.402-16.402-42.996 0-59.398 16.4-16.4 42.994-16.4 59.396 0 16.402 16.402 16.404 42.996 0 59.398l-22.272 22.274a10.5 10.5 0 0 1-14.85 0z" fill="#DFECFD" p-id="3435"></path><path d="M320 806.896a10.784 10.784 0 0 1-7.68-3.18l-22.02-22.02c-16.374-16.374-16.374-43.02 0-59.396A41.728 41.728 0 0 1 320 710c11.22 0 21.764 4.366 29.7 12.3 16.374 16.376 16.374 43.022 0 59.398l-22.02 22.02a10.784 10.784 0 0 1-7.68 3.178zM320 712a39.744 39.744 0 0 0-28.284 11.714c-15.596 15.596-15.596 40.974 0 56.57l22.02 22.02c1.674 1.674 3.898 2.594 6.264 2.592s4.59-0.92 6.264-2.594l22.02-22.02c15.596-15.594 15.596-40.972 0-56.568A39.744 39.744 0 0 0 320 712z" fill="#DFECFD" p-id="3436"></path><path d="M698.576 803.972l-22.274-22.274c-16.4-16.4-16.4-42.994 0-59.398 16.4-16.4 42.994-16.4 59.396 0 16.402 16.402 16.4 42.996 0 59.398l-22.274 22.274a10.498 10.498 0 0 1-14.848 0z" fill="#DFECFD" p-id="3437"></path><path d="M706 806.896a10.784 10.784 0 0 1-7.68-3.18l-22.02-22.02c-16.37-16.374-16.37-43.02 0-59.396 7.936-7.934 18.482-12.3 29.7-12.3s21.764 4.366 29.7 12.3c16.374 16.376 16.372 43.02 0 59.398l-22.02 22.02a10.784 10.784 0 0 1-7.68 3.178zM706 712a39.736 39.736 0 0 0-28.284 11.714c-15.594 15.596-15.594 40.974 0 56.57l22.02 22.02c1.672 1.672 3.896 2.592 6.264 2.592s4.592-0.92 6.264-2.594l22.02-22.02c15.596-15.594 15.594-40.972 0-56.568A39.736 39.736 0 0 0 706 712z" fill="#DFECFD" p-id="3438"></path><path d="M512 352c22.092 0 40 17.908 40 40v80c0 22.092-17.908 40-40 40s-40-17.908-40-40v-80c0-22.092 17.908-40 40-40z" fill="#DFECFD" p-id="3439"></path><path d="M512 512c-22.056 0-40-17.944-40-40v-80c0-22.056 17.944-40 40-40s40 17.944 40 40v80c0 22.056-17.944 40-40 40z m0-158c-20.954 0-38 17.046-38 38v80c0 20.954 17.046 38 38 38s38-17.046 38-38v-80c0-20.954-17.046-38-38-38z" fill="#DFECFD" p-id="3440"></path></svg>
--- a/src/assets/icons/file-close.svg
+++ b/src/assets/icons/file-close.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627885889837" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17560" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M0 139.636364a46.545455 46.545455 0 0 1 46.545455-46.545455h354.897454a51.2 51.2 0 0 1 47.057455 31.034182L473.6 182.679273 977.454545 182.690909a46.545455 46.545455 0 0 1 46.545455 46.545455v546.909091a46.545455 46.545455 0 0 1-46.545455 46.545454H46.545455a46.545455 46.545455 0 0 1-46.545455-46.545454V139.636364z" fill="#FFA000" p-id="17561"></path><path d="M0 276.945455m46.545455 0l930.90909 0q46.545455 0 46.545455 46.545454l0 558.545455q0 46.545455-46.545455 46.545454l-930.90909 0q-46.545455 0-46.545455-46.545454l0-558.545455q0-46.545455 46.545455-46.545454Z" fill="#FFCA28" p-id="17562"></path></svg>
--- a/src/assets/icons/file-css.svg
+++ b/src/assets/icons/file-css.svg
@@ -0,0 +1,14 @@
+<svg t="1642407662269" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="19932" width="200" height="200">
+  <path d="M847.872 240.128v688c0 26.56-21.408 48-48 48h-576c-26.56 0-48-21.44-48-48v-832c0-26.592 21.44-48 48-48h432z"
+    fill="#E9EDED" p-id="19933"></path>
+  <path d="M160 768.128v160c0 35.456 28.544 64 64 64h576c35.456 0 64-28.544 64-64v-160H160z" fill="#4BBFEB"
+    p-id="19934"></path>
+  <path d="M847.872 240.128h-144c-26.56 0-48-21.44-48-48v-144" fill="#4BBFEB" p-id="19935"></path>
+  <path
+    d="M432.256 320.128c-35.2 0-64 28.8-64 64v32c0 18.016-14.016 32-32 32a16 16 0 0 0-15.936 12.992 16 16 0 0 0 0 0.064 16 16 0 0 0 4.736 14.56 16 16 0 0 0 2.496 1.92 16 16 0 0 0 4.448 1.92 16 16 0 0 0 3.136 0.48 16 16 0 0 0 1.12 0.064c17.984 0 32 13.984 32 32v32c0 35.2 28.8 64 64 64a16 16 0 1 0 0-32c-18.016 0-32-13.984-32-32v-32c0-19.136-8.736-36.256-22.208-48a63.68 63.68 0 0 0 22.208-48v-32c0-18.016 13.984-32 32-32a16 16 0 1 0 0-32z m157.856 0a16 16 0 0 0 1.632 32c18.016 0 32 13.984 32 32v32c0 19.168 8.736 36.224 22.208 48-13.44 11.744-22.208 28.864-22.208 48v32c0 18.016-13.984 32-32 32a16 16 0 1 0 0 32c35.2 0 64-28.8 64-64v-32c0-18.016 14.016-32 32-32a16 16 0 0 0 10.368-3.616 16 16 0 0 0 1.216-1.152 16 16 0 0 0-11.584-27.232c-17.984 0-32-13.984-32-32v-32c0-35.2-28.8-64-64-64a16 16 0 0 0-1.6 0z"
+    fill="#4BBFEB" p-id="19936"></path>
+  <path
+    d="M334.496 800.128a16 16 0 0 0-3.36 0.672c-41.664 3.712-75.008 37.44-75.008 79.328 0 42.08 33.696 75.904 75.616 79.296a16 16 0 0 0 4.64 0.704h32a16 16 0 1 0 0-32h-29.824c-28.544 0-50.432-21.44-50.432-48s21.888-48 50.432-48h29.568a16 16 0 1 0 0-32h-32a16 16 0 0 0-1.6 0z m128 0a16 16 0 0 0-1.984 0.384c-24.64 1.92-44.384 22.528-44.384 47.616 0 25.28 20.064 46.08 44.992 47.68a16 16 0 0 0 3.008 0.32h32c9.152 0 16 6.848 16 16 0 9.152-6.848 16-16 16h-64a16 16 0 1 0 0 32h64a16 16 0 0 0 3.296-0.384 48.096 48.096 0 0 0 44.704-47.616c0-25.152-19.84-45.888-44.576-47.68a16 16 0 0 0-3.424-0.32h-32a15.616 15.616 0 0 1-16-16c0-9.152 6.848-16 16-16h64a16 16 0 1 0 0-32h-62.88a16 16 0 0 0-1.12 0 16 16 0 0 0-1.6 0z m159.744 0a16 16 0 0 0-1.984 0.384c-24.64 1.92-44.384 22.528-44.384 47.616 0 25.28 20.096 46.08 44.992 47.68a16 16 0 0 0 3.008 0.32h32c9.152 0 16 6.848 16 16 0 9.152-6.848 16-16 16h-64a16 16 0 1 0 0 32h64a16 16 0 0 0 3.328-0.384 48.096 48.096 0 0 0 44.672-47.616c0-25.152-19.84-45.888-44.544-47.68a16 16 0 0 0-3.456-0.32h-32a15.616 15.616 0 0 1-16-16c0-9.152 6.848-16 16-16h64a16 16 0 1 0 0-32h-62.88a16 16 0 0 0-1.12 0 16 16 0 0 0-1.6 0z"
+    fill="#E9EDED" p-id="19937"></path>
+</svg>
--- a/src/assets/icons/file-dir.svg
+++ b/src/assets/icons/file-dir.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627885889837" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17560" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M0 139.636364a46.545455 46.545455 0 0 1 46.545455-46.545455h354.897454a51.2 51.2 0 0 1 47.057455 31.034182L473.6 182.679273 977.454545 182.690909a46.545455 46.545455 0 0 1 46.545455 46.545455v546.909091a46.545455 46.545455 0 0 1-46.545455 46.545454H46.545455a46.545455 46.545455 0 0 1-46.545455-46.545454V139.636364z" fill="#FFA000" p-id="17561"></path><path d="M0 276.945455m46.545455 0l930.90909 0q46.545455 0 46.545455 46.545454l0 558.545455q0 46.545455-46.545455 46.545454l-930.90909 0q-46.545455 0-46.545455-46.545454l0-558.545455q0-46.545455 46.545455-46.545454Z" fill="#FFCA28" p-id="17562"></path></svg>
--- a/src/assets/icons/file-excel.svg
+++ b/src/assets/icons/file-excel.svg
@@ -0,0 +1,11 @@
+<svg t="1642407332637" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6055"
+  width="200" height="200">
+  <path
+    d="M967.111111 281.6V910.222222c0 62.577778-51.2 113.777778-113.777778 113.777778H170.666667c-62.577778 0-113.777778-51.2-113.777778-113.777778V113.777778c0-62.577778 51.2-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z"
+    fill="#62C558" p-id="6056"></path>
+  <path d="M685.511111 224.711111V0L967.111111 281.6H742.4c-31.288889 0-56.888889-25.6-56.888889-56.888889"
+    fill="#2A8121" p-id="6057"></path>
+  <path
+    d="M682.666667 724.024889L638.691556 768 341.333333 470.670222 385.308444 426.666667zM454.087111 611.128889l44.088889 44.088889L385.422222 768 341.333333 723.911111zM682.666667 470.755556l-113.066667 113.066666-44.088889-44.088889L638.577778 426.666667z"
+    fill="#FFFFFF" p-id="6058"></path>
+</svg>
--- a/src/assets/icons/file-exe.svg
+++ b/src/assets/icons/file-exe.svg
@@ -0,0 +1,20 @@
+<svg t="1642408099555" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="53361" width="200" height="200">
+  <path
+    d="M967.111111 281.6V910.222222c0 62.862222-50.915556 113.777778-113.777778 113.777778H170.666667c-62.862222 0-113.777778-50.915556-113.777778-113.777778V113.777778c0-62.862222 50.915556-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z"
+    fill="#BABABA" p-id="53362"></path>
+  <path d="M685.511111 167.822222V0L967.111111 281.6H799.288889c-62.862222 0-113.777778-50.915556-113.777778-113.777778"
+    fill="#979797" p-id="53363"></path>
+  <path
+    d="M586.865778 521.671111a148.650667 148.650667 0 0 1-3.754667 49.265778l44.629333 22.556444a164.664889 164.664889 0 0 1-10.154666 26.254223l-4.266667 8.448a162.986667 162.986667 0 0 1-15.104 23.751111l-44.657778-22.528a149.048889 149.048889 0 0 1-37.404444 32.312889l15.587555 47.388444a192.910222 192.910222 0 0 1-62.179555 20.48l-15.587556-47.416889a148.053333 148.053333 0 0 1-49.322666-3.783111l-22.528 44.657778a163.612444 163.612444 0 0 1-26.254223-10.154667l-8.448-4.266667a158.350222 158.350222 0 0 1-23.751111-15.132444l22.528-44.600889a147.569778 147.569778 0 0 1-32.312889-37.461333l-47.416888 15.644444a195.868444 195.868444 0 0 1-12.856889-30.264889l-7.594667-31.943111 47.416889-15.616a148.650667 148.650667 0 0 1 3.754667-49.294222l-44.600889-22.528c2.190222-7.452444 4.892444-14.904889 8.078222-21.959111l8.533333-16.952889c3.84-6.769778 8.220444-13.368889 12.885334-19.569778l44.629333 22.528c10.353778-12.515556 23.04-23.608889 37.432889-32.284444l-15.587556-47.416889c9.557333-5.034667 19.626667-9.386667 30.236445-12.885333L410.737778 341.333333l15.587555 47.416889a147.370667 147.370667 0 0 1 49.322667 3.754667l22.528-44.629333c7.452444 2.190222 14.876444 4.920889 21.959111 8.106666l4.266667 2.048 8.504889 4.266667 4.181333 2.275555c6.741333 3.754667 13.368889 8.135111 19.569778 12.828445l-22.528 44.657778a147.911111 147.911111 0 0 1 32.284444 37.404444l47.416889-15.587555a195.527111 195.527111 0 0 1 20.451556 62.179555l-47.416889 15.587556z"
+    fill="#FFFFFF" p-id="53364"></path>
+  <path
+    d="M520.618667 508.984889a84.707556 84.707556 0 1 1-160.938667 52.963555 84.707556 84.707556 0 0 1 160.938667-52.963555"
+    fill="#BABABA" p-id="53365"></path>
+  <path
+    d="M742.371556 771.84c-4.864 6.826667-10.865778 12.743111-17.521778 17.436444l9.557333 23.096889c-3.896889 2.56-8.106667 4.807111-12.401778 6.656l-4.408889 1.792a79.644444 79.644444 0 0 1-13.454222 4.067556l-9.557333-23.096889c-7.992889 1.365333-16.440889 1.422222-24.746667 0l-9.557333 23.04a97.792 97.792 0 0 1-30.208-12.515556l9.557333-23.04a74.524444 74.524444 0 0 1-17.464889-17.521777l-23.096889 9.557333a82.488889 82.488889 0 0 1-6.627555-12.430222l-1.792-4.380445a80.554667 80.554667 0 0 1-4.096-13.454222l23.096889-9.557333a75.264 75.264 0 0 1 0-24.746667l-23.068445-9.557333a98.986667 98.986667 0 0 1 5.006223-15.644445l7.566222-14.592 23.04 9.557334c4.835556-6.826667 10.894222-12.743111 17.521778-17.436445l-9.557334-23.096889c3.271111-2.104889 6.741333-4.039111 10.24-5.688889l8.789334-3.612444c3.640889-1.308444 7.452444-2.389333 11.235555-3.214222l9.557333 23.096889c8.021333-1.365333 16.440889-1.422222 24.718223 0l9.585777-23.068445c5.233778 1.223111 10.496 2.844444 15.644445 5.006222l14.592 7.537778-9.585778 23.04c6.826667 4.892444 12.771556 10.894222 17.436445 17.521778l23.096888-9.528889c2.133333 3.271111 4.067556 6.712889 5.688889 10.24l0.967111 2.161778 1.792 4.380444 0.853334 2.218667c1.336889 3.640889 2.417778 7.480889 3.214222 11.264l-23.096889 9.557333c1.393778 7.964444 1.422222 16.440889 0 24.718223l23.04 9.557333a96 96 0 0 1-12.515555 30.236444l-23.04-9.557333z"
+    fill="#FFFFFF" p-id="53366"></path>
+  <path
+    d="M721.408 745.415111a42.382222 42.382222 0 1 1-78.250667-32.455111 42.382222 42.382222 0 0 1 78.222223 32.426667"
+    fill="#BABABA" p-id="53367"></path>
+</svg>
--- a/src/assets/icons/file-html.svg
+++ b/src/assets/icons/file-html.svg
@@ -0,0 +1,14 @@
+<svg t="1642407647664" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="19787" width="200" height="200">
+  <path d="M847.872 240.128v688c0 26.56-21.408 48-48 48h-576c-26.56 0-48-21.44-48-48v-832c0-26.592 21.44-48 48-48h432z"
+    fill="#E9EDED" p-id="19788"></path>
+  <path d="M160 768.128v160c0 35.456 28.544 64 64 64h576c35.456 0 64-28.544 64-64v-160H160z" fill="#F05542"
+    p-id="19789"></path>
+  <path d="M847.872 240.128h-144c-26.56 0-48-21.44-48-48v-144" fill="#F05542" p-id="19790"></path>
+  <path
+    d="M432.736 384.064a16 16 0 0 0-10.976 4.8l-96.96 95.776a16 16 0 0 0-0.416 0.416 16 16 0 0 0 1.664 23.808l95.68 94.56a16 16 0 1 0 22.528-22.72l-85.568-84.576 85.568-84.48a16 16 0 0 0-11.52-27.584z m157.824 0a16 16 0 0 0-11.008 27.552l85.504 84.48-85.504 84.576a16 16 0 1 0 22.496 22.752l95.648-94.56a16 16 0 0 0 5.44-17.504 16 16 0 0 0-1.28-2.912 16 16 0 0 0-0.608-1.12 16 16 0 0 0-0.192-0.256 16 16 0 0 0-0.192-0.256 16 16 0 0 0-0.8-0.992 16 16 0 0 0-0.192-0.256 16 16 0 0 0-0.864-0.96 16 16 0 0 0-0.064 0l-0.64-0.544a16 16 0 0 0-0.48-0.512l-95.776-94.688a16 16 0 0 0-11.488-4.8z"
+    fill="#F05542" p-id="19791"></path>
+  <path
+    d="M654.88 799.744a16 16 0 0 0-11.84 6.624L608 853.312l-35.136-46.944-0.128 0.064a16 16 0 0 0-13.056-6.368 16 16 0 0 0-15.744 16.192v127.68a16 16 0 1 0 32 0v-80.128l15.936 21.248a16 16 0 0 0 28.864 4.448l19.2-25.6v80.032a16 16 0 1 0 32 0v-126.816a16 16 0 0 0-15.424-17.376 16 16 0 0 0-1.632 0z m-383.136 0.32a16 16 0 0 0-15.744 16.192V943.936a16 16 0 1 0 32 0v-47.808h64v47.808a16 16 0 1 0 32 0v-61.312a16 16 0 0 0 0-5.12v-61.248a16 16 0 0 0-16.256-16.192 16 16 0 0 0-15.744 16.192v47.872H288v-47.872a16 16 0 0 0-16.256-16.192z m192 0a16 16 0 0 0-1.6 0.064H432a16 16 0 1 0 0 32h16v111.808a16 16 0 1 0 32 0v-111.808h16a16 16 0 1 0 0-32h-30.304a16 16 0 0 0-1.92-0.064z m255.936 0a16 16 0 0 0-15.744 16.192v126.496a16 16 0 0 0 0.64 5.824 16 16 0 0 0 0 0.064 16 16 0 0 0 0.096 0.416 16 16 0 0 0 0.448 1.12 16 16 0 0 0 0.864 1.824 16 16 0 0 0 0.64 0.992 16 16 0 0 0 0.192 0.32 16 16 0 0 0 0.736 0.96 16 16 0 0 0 0.832 0.864 16 16 0 0 0 0.352 0.416 16 16 0 0 0 0.832 0.704 16 16 0 0 0 0.448 0.384 16 16 0 0 0 0.352 0.32 16 16 0 0 0 1.12 0.736 16 16 0 0 0 2.464 1.248 16 16 0 0 0 0.864 0.32 16 16 0 0 0 5.376 0.864h63.552a16 16 0 1 0 0-32h-47.808v-111.872a16 16 0 0 0-16.256-16.192z"
+    fill="#E9EDED" p-id="19792"></path>
+</svg>
--- a/src/assets/icons/file-image.svg
+++ b/src/assets/icons/file-image.svg
@@ -0,0 +1,11 @@
+<svg t="1642407370336" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6354"
+  width="200" height="200">
+  <path
+    d="M952.888889 281.6V910.222222c0 62.862222-50.915556 113.777778-113.777778 113.777778H156.444444c-62.862222 0-113.777778-50.915556-113.777777-113.777778V113.777778c0-62.862222 50.915556-113.777778 113.777777-113.777778h514.844445L952.888889 281.6z"
+    fill="#85BCFF" p-id="6355"></path>
+  <path d="M676.664889 167.822222V0l281.6 281.6h-167.822222c-62.862222 0-113.777778-50.915556-113.777778-113.777778"
+    fill="#529EE0" p-id="6356"></path>
+  <path
+    d="M685.824 363.804444a53.76 53.76 0 0 1 53.731556 53.731556v307.029333a53.76 53.76 0 0 1-53.731556 53.731556H309.76a53.731556 53.731556 0 0 1-53.731556-53.76V417.564444c0-29.667556 24.035556-53.731556 53.731556-53.731555H685.795556z m-72.903111 149.674667l-138.183111 146.545778-80.583111-62.805333-92.131556 94.208v31.402666c0 11.548444 10.325333 20.906667 23.04 20.906667h345.400889c12.714667 0 23.04-9.386667 23.04-20.906667v-125.610666l-80.583111-83.740445z m-227.896889-85.532444a32.085333 32.085333 0 1 0 0 64.142222 32.085333 32.085333 0 0 0 0-64.142222z"
+    fill="#FFFFFF" p-id="6357"></path>
+</svg>
--- a/src/assets/icons/file-js.svg
+++ b/src/assets/icons/file-js.svg
@@ -0,0 +1,14 @@
+<svg t="1642408007951" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="50023" width="200" height="200">
+  <path d="M847.872 240.128v688c0 26.56-21.408 48-48 48h-576c-26.56 0-48-21.44-48-48v-832c0-26.592 21.44-48 48-48h432z"
+    fill="#E9EDED" p-id="50024"></path>
+  <path d="M160 768.128v160c0 35.456 28.544 64 64 64h576c35.456 0 64-28.544 64-64v-160H160z" fill="#25B39E"
+    p-id="50025"></path>
+  <path d="M847.872 240.128h-144c-26.56 0-48-21.44-48-48v-144" fill="#25B39E" p-id="50026"></path>
+  <path
+    d="M432.256 320.128c-35.2 0-64 28.8-64 64v32c0 18.016-14.016 32-32 32a16 16 0 0 0-3.2 0.256 16 16 0 0 0-12.384 11.232 16 16 0 0 0-0.352 1.504 16 16 0 0 0 0 0.064 16 16 0 0 0 15.936 18.944c17.984 0 32 13.984 32 32v32c0 35.2 28.8 64 64 64a16 16 0 1 0 0-32c-18.016 0-32-13.984-32-32v-32c0-19.136-8.736-36.256-22.208-48a63.68 63.68 0 0 0 22.208-48v-32c0-18.016 13.984-32 32-32a16 16 0 1 0 0-32z m157.856 0a16 16 0 0 0 1.632 32c18.016 0 32 13.984 32 32v32c0 19.168 8.736 36.224 22.208 48-13.44 11.744-22.208 28.864-22.208 48v32c0 18.016-13.984 32-32 32a16 16 0 1 0 0 32c35.2 0 64-28.8 64-64v-32c0-18.016 14.016-32 32-32a16 16 0 0 0 10.368-3.616 16 16 0 0 0 1.216-1.152 16 16 0 0 0-11.584-27.232c-17.984 0-32-13.984-32-32v-32c0-35.2-28.8-64-64-64a16 16 0 0 0-1.6 0zM512 367.936a32 32 0 0 0-32 32 32 32 0 0 0 32 32 32 32 0 0 0 32-32 32 32 0 0 0-32-32z m0 96a32 32 0 0 0-32 32 32 32 0 0 0 16.256 27.872l-14.4 28.864a16 16 0 1 0 28.64 14.272l24-48.256a32 32 0 0 0 9.44-21.504 16 16 0 0 0 0-0.192 32 32 0 0 0 0.064-1.056 32 32 0 0 0-32-32z"
+    fill="#25B39E" p-id="50027"></path>
+  <path
+    d="M335.872 800a16 16 0 0 0-15.744 16.256V912c0 9.152-6.848 16-16 16a15.616 15.616 0 0 1-16-16 16 16 0 0 0-16.256-16.192 16 16 0 0 0-15.744 16.192c0 26.304 21.696 48 48 48 24.768 0 45.12-19.296 47.488-43.52a16 16 0 0 0 0.512-4.224v-96a16 16 0 0 0-16.256-16.256z m94.4 0.128a16 16 0 0 0-2.016 0.384c-24.64 1.92-44.384 22.528-44.384 47.616 0 25.28 20.096 46.08 44.992 47.68a16 16 0 0 0 3.008 0.32h32c9.152 0 16 6.848 16 16 0 9.152-6.848 16-16 16h-64a16 16 0 1 0 0 32h64a16 16 0 0 0 3.328-0.384 48.096 48.096 0 0 0 44.672-47.616c0-25.152-19.84-45.888-44.544-47.68a16 16 0 0 0-3.456-0.32h-30.88a16 16 0 0 0-1.12 0 15.616 15.616 0 0 1-16-16c0-9.152 6.848-16 16-16h64a16 16 0 1 0 0-32h-62.88a16 16 0 0 0-1.12 0 16 16 0 0 0-1.6 0z"
+    fill="#E9EDED" p-id="50028"></path>
+</svg>
--- a/src/assets/icons/file-json.svg
+++ b/src/assets/icons/file-json.svg
@@ -0,0 +1,14 @@
+<svg t="1642407743753" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="20514" width="200" height="200">
+  <path d="M847.872 240.128v688c0 26.56-21.408 48-48 48h-576c-26.56 0-48-21.44-48-48v-832c0-26.592 21.44-48 48-48h432z"
+    fill="#E9EDED" p-id="20515"></path>
+  <path d="M160 768.128v160c0 35.456 28.544 64 64 64h576c35.456 0 64-28.544 64-64v-160H160z" fill="#F17F53"
+    p-id="20516"></path>
+  <path d="M847.872 240.128h-144c-26.56 0-48-21.44-48-48v-144" fill="#F17F53" p-id="20517"></path>
+  <path
+    d="M432.256 320.128c-35.2 0-64 28.8-64 64v32c0 18.016-14.016 32-32 32a16 16 0 0 0-15.936 12.992 16 16 0 0 0 0 0.064 16 16 0 0 0 4.736 14.56 16 16 0 0 0 2.496 1.92 16 16 0 0 0 4.448 1.92 16 16 0 0 0 3.136 0.48 16 16 0 0 0 1.12 0.064c17.984 0 32 13.984 32 32v32c0 35.2 28.8 64 64 64a16 16 0 1 0 0-32c-18.016 0-32-13.984-32-32v-32c0-19.136-8.736-36.256-22.208-48a63.68 63.68 0 0 0 22.208-48v-32c0-18.016 13.984-32 32-32a16 16 0 1 0 0-32z m125.856 0a16 16 0 0 0 1.632 32c18.016 0 32 13.984 32 32v32c0 19.168 8.736 36.224 22.208 48-13.44 11.744-22.208 28.864-22.208 48v32c0 18.016-13.984 32-32 32a16 16 0 1 0 0 32c35.2 0 64-28.8 64-64v-32c0-18.016 14.016-32 32-32a16 16 0 0 0 10.368-3.616 16 16 0 0 0 1.216-1.152 16 16 0 0 0-11.584-27.232c-17.984 0-32-13.984-32-32v-32c0-35.2-28.8-64-64-64a16 16 0 0 0-1.6 0zM496 384a16 16 0 0 0-16 16 16 16 0 0 0 16 16 16 16 0 0 0 16-16 16 16 0 0 0-16-16z m-0.256 63.808A16 16 0 0 0 480 464v96a16 16 0 1 0 32 0v-96a16 16 0 0 0-16.256-16.192z"
+    fill="#F17F53" p-id="20518"></path>
+  <path
+    d="M720.576 799.616a16 16 0 0 0-1.632 0.064 16 16 0 0 0-15.008 17.312v126.816a16 16 0 1 0 32 0v-80l66.624 88.96a16 16 0 0 0 0.064 0.096l0.448 0.576a16 16 0 0 0 28.864-9.6v-127.68a16 16 0 0 0-16.256-16.224 16 16 0 0 0-15.744 16.256v79.68l-67.136-89.6a16 16 0 0 0-12.224-6.656zM303.744 800a16 16 0 0 0-15.744 16.256V912c0 9.152-6.848 16-16 16a15.616 15.616 0 0 1-16-16 16 16 0 0 0-16.256-16.192A16 16 0 0 0 224 912c0 26.304 21.696 48 48 48 24.768 0 45.152-19.296 47.488-43.52a16 16 0 0 0 0.512-4.224v-96A16 16 0 0 0 303.744 800z m288.256 0a80.256 80.256 0 0 0-80 80c0 44 36 80 80 80s80-36 80-80-36-80-80-80z m-193.888 0.128a16 16 0 0 0-1.984 0.384c-24.64 1.92-44.384 22.528-44.384 47.616 0 25.28 20.096 46.08 44.992 47.68a16 16 0 0 0 3.008 0.32h32c9.152 0 16 6.848 16 16 0 9.152-6.848 16-16 16h-64a16 16 0 1 0 0 32h64a16 16 0 0 0 3.328-0.384 48.096 48.096 0 0 0 44.672-47.616c0-25.152-19.84-45.888-44.544-47.68a16 16 0 0 0-3.456-0.32h-30.88a16 16 0 0 0-1.12 0 15.616 15.616 0 0 1-16-16c0-9.152 6.88-16 16-16h64a16 16 0 1 0 0-32h-62.88a16 16 0 0 0-1.12 0 16 16 0 0 0-1.6 0zM592 832c26.688 0 48 21.312 48 48s-21.312 48-48 48-48-21.312-48-48 21.312-48 48-48z"
+    fill="#E9EDED" p-id="20519"></path>
+</svg>
--- a/src/assets/icons/file-music.svg
+++ b/src/assets/icons/file-music.svg
@@ -0,0 +1,11 @@
+<svg t="1642407502942" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7293"
+  width="200" height="200">
+  <path
+    d="M967.111111 281.6V910.222222c0 62.862222-50.915556 113.777778-113.777778 113.777778H170.666667c-62.862222 0-113.777778-50.915556-113.777778-113.777778V113.777778c0-62.862222 50.915556-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z"
+    fill="#A15FDE" p-id="7294"></path>
+  <path d="M685.511111 196.266667V0L967.111111 281.6H770.844444a85.333333 85.333333 0 0 1-85.333333-85.333333"
+    fill="#C386F0" p-id="7295"></path>
+  <path
+    d="M669.980444 426.268444v236.999112c0 26.254222-31.857778 47.587556-71.082666 47.587555-39.253333 0-70.741333-21.333333-70.741334-47.587555 0-26.282667 31.516444-47.587556 70.741334-47.587556 14.848 0 28.728889 3.100444 40.163555 8.334222v-165.916444l-205.767111 48.497778v211.057777c0 26.254222-32.142222 47.559111-71.992889 47.559111-39.850667 0-72.305778-21.333333-72.305777-47.559111 0-26.282667 32.426667-47.587556 72.305777-47.587555a96.711111 96.711111 0 0 1 41.102223 8.647111V474.168889c0-14.222222 9.870222-26.88 23.779555-29.980445l205.795556-47.900444a30.862222 30.862222 0 0 1 38.001777 29.980444"
+    fill="#FFFFFF" p-id="7296"></path>
+</svg>
--- a/src/assets/icons/file-open.svg
+++ b/src/assets/icons/file-open.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627364345844" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15116" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2") format("woff2"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff") format("woff"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf") format("truetype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont") format("svg"); }
+</style></defs><path d="M0 128a51.2 51.2 0 0 1 51.2-51.2h350.24a51.2 51.2 0 0 1 47.0592 31.0336L473.6 166.4h499.2a51.2 51.2 0 0 1 51.2 51.2v537.6a51.2 51.2 0 0 1-51.2 51.2H51.2a51.2 51.2 0 0 1-51.2-51.2V128z" fill="#FFA000" p-id="15117"></path><path d="M89.6 249.6m51.2 0l742.4 0q51.2 0 51.2 51.2l0 460.8q0 51.2-51.2 51.2l-742.4 0q-51.2 0-51.2-51.2l0-460.8q0-51.2 51.2-51.2Z" fill="#FFFFFF" p-id="15118"></path><path d="M0 332.8m51.2 0l921.6 0q51.2 0 51.2 51.2l0 512q0 51.2-51.2 51.2l-921.6 0q-51.2 0-51.2-51.2l0-512q0-51.2 51.2-51.2Z" fill="#FFCA28" p-id="15119"></path></svg>
--- a/src/assets/icons/file-other.svg
+++ b/src/assets/icons/file-other.svg
@@ -0,0 +1,11 @@
+<svg t="1642408119178" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="53519" width="200" height="200">
+  <path
+    d="M967.111111 281.6V910.222222c0 62.862222-50.915556 113.777778-113.777778 113.777778H170.666667c-62.862222 0-113.777778-50.915556-113.777778-113.777778V113.777778c0-62.862222 50.915556-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z"
+    fill="#BABABA" p-id="53520"></path>
+  <path d="M685.511111 167.822222V0L967.111111 281.6H799.288889c-62.862222 0-113.777778-50.915556-113.777778-113.777778"
+    fill="#979797" p-id="53521"></path>
+  <path
+    d="M733.667556 632.689778a111.104 111.104 0 0 1-110.819556 110.819555h-221.667556a111.132444 111.132444 0 0 1-110.848-110.819555 111.047111 111.047111 0 0 1 99.754667-110.279111A122.197333 122.197333 0 0 1 512 407.694222a122.197333 122.197333 0 0 1 121.912889 114.716445 111.160889 111.160889 0 0 1 99.754667 110.279111"
+    fill="#FFFFFF" p-id="53522"></path>
+</svg>
--- a/src/assets/icons/file-pdf.svg
+++ b/src/assets/icons/file-pdf.svg
@@ -0,0 +1,11 @@
+<svg t="1642407248989" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5608"
+  width="200" height="200">
+  <path
+    d="M967.111111 281.6V910.222222c0 62.577778-51.2 113.777778-113.777778 113.777778H170.666667c-62.577778 0-113.777778-51.2-113.777778-113.777778V113.777778c0-62.577778 51.2-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z"
+    fill="#D23B41" p-id="5609"></path>
+  <path d="M685.511111 224.711111V0L967.111111 281.6H742.4c-31.288889 0-56.888889-25.6-56.888889-56.888889"
+    fill="#9C171C" p-id="5610"></path>
+  <path
+    d="M680.277333 662.698667c-11.889778-1.194667-23.751111-3.640889-35.640889-9.728 10.666667-2.133333 20.110222-2.133333 30.776889-2.133334 23.751111 0 28.330667 5.774222 28.330667 9.443556-6.997333 2.417778-15.246222 3.356444-23.466667 2.417778z m-120.945777-15.530667c-25.884444 5.802667-54.556444 14.336-80.440889 23.779556v-2.446223l-2.446223 1.223111c13.084444-26.197333 25.002667-53.333333 35.640889-80.753777l0.938667 1.223111 1.194667-2.133334c13.112889 20.110222 29.866667 40.220444 47.530666 57.884445h-3.640889l1.223112 1.223111zM497.777778 417.450667c1.223111-1.223111 3.669333-1.223111 4.551111-1.223111h3.697778a96.739556 96.739556 0 0 1-1.251556 61.553777c-8.220444-18.915556-11.861333-40.220444-6.997333-60.330666zM352.142222 770.275556l-3.669333 1.223111a96.768 96.768 0 0 1 42.666667-34.417778c-9.443556 15.502222-22.556444 27.392-38.997334 33.194667z m324.494222-155.107556c-25.002667 0-49.664 3.669333-74.666666 8.248889a353.365333 353.365333 0 0 1-73.415111-94.776889c20.110222-66.417778 21.333333-111.217778 5.774222-132.551111a39.253333 39.253333 0 0 0-30.748445-15.502222c-15.246222-1.223111-29.582222 6.087111-36.579555 18.887111-21.333333 35.640889 9.443556 105.415111 23.779555 134.058666-16.782222 50.887111-36.864 99.328-63.089777 146.858667-112.412444 48.440889-114.858667 77.994667-114.858667 88.661333 0 13.084444 7.310222 26.197333 20.110222 32 4.864 3.640889 11.889778 4.835556 17.976889 4.835556 29.582222 0 64-33.194667 100.551111-98.389333 46.307556-18.887111 92.615111-34.133333 141.084445-44.8a153.941333 153.941333 0 0 0 87.722666 35.356444c20.110222 0 59.107556 0 59.107556-40.220444 1.223111-15.530667-6.997333-41.443556-62.748445-42.666667z"
+    fill="#FFFFFF" p-id="5611"></path>
+</svg>
--- a/src/assets/icons/file-ppt.svg
+++ b/src/assets/icons/file-ppt.svg
@@ -0,0 +1,12 @@
+<svg t="1642407349568" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6204"
+  width="200" height="200">
+  <path
+    d="M967.111111 281.6V910.222222c0 62.577778-51.2 113.777778-113.777778 113.777778H170.666667c-62.577778 0-113.777778-51.2-113.777778-113.777778V113.777778c0-62.577778 51.2-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z"
+    fill="#F16C41" p-id="6205"></path>
+  <path d="M685.511111 224.711111V0L967.111111 281.6H742.4c-31.288889 0-56.888889-25.6-56.888889-56.888889"
+    fill="#CD4B29" p-id="6206"></path>
+  <path
+    d="M525.880889 648.135111a88.32 88.32 0 0 1-68.750222-32.995555 87.04 87.04 0 0 1-19.626667-55.381334c0-21.048889 7.253333-40.248889 19.626667-55.381333a88.234667 88.234667 0 0 1 68.750222-32.995556 88.490667 88.490667 0 0 1 88.376889 88.376889 88.519111 88.519111 0 0 1-88.376889 88.376889m0-235.690667c-24.945778 0-48.327111 6.087111-68.750222 17.294223a143.075556 143.075556 0 0 0-58.88 56.945777v146.119112a143.132444 143.132444 0 0 0 58.88 56.974222c20.423111 11.178667 43.804444 17.265778 68.750222 17.265778a147.342222 147.342222 0 0 0 147.285333-147.285334 147.342222 147.342222 0 0 0-147.285333-147.342222"
+    fill="#FFFFFF" p-id="6207"></path>
+  <path d="M398.222222 824.888889h58.908445V412.444444H398.222222z" fill="#FFFFFF" p-id="6208"></path>
+</svg>
--- a/src/assets/icons/file-rar.svg
+++ b/src/assets/icons/file-rar.svg
@@ -0,0 +1,16 @@
+<svg t="1642407407406" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6649"
+  width="200" height="200">
+  <path
+    d="M967.111111 281.6V910.222222c0 62.862222-50.915556 113.777778-113.777778 113.777778H170.666667c-62.862222 0-113.777778-50.915556-113.777778-113.777778V113.777778c0-62.862222 50.915556-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z"
+    fill="#FFC63A" p-id="6650"></path>
+  <path d="M685.511111 167.822222V0L967.111111 281.6H799.288889c-62.862222 0-113.777778-50.915556-113.777778-113.777778"
+    fill="#DD9F08" p-id="6651"></path>
+  <path
+    d="M436.565333 68.437333h68.437334V0h-68.437334zM505.002667 136.874667h68.437333V68.437333h-68.437333zM436.565333 205.312h68.437334V136.874667h-68.437334zM505.002667 273.749333h68.437333V205.312h-68.437333z"
+    fill="#FFFFFF" p-id="6652"></path>
+  <path d="M436.565333 342.158222h68.437334V273.720889h-68.437334zM505.002667 410.624h68.437333V342.186667h-68.437333z"
+    fill="#FFFFFF" p-id="6653"></path>
+  <path
+    d="M436.565333 479.032889h68.437334v-68.437333h-68.437334zM505.002667 547.470222h68.437333v-68.437333h-68.437333zM470.784 762.225778h68.437333v-68.437334h-68.437333v68.437334z m-34.218667-136.874667v136.874667c0 18.915556 15.331556 34.218667 34.218667 34.218666h68.437333c18.915556 0 34.218667-15.303111 34.218667-34.218666v-136.874667h-136.874667z"
+    fill="#FFFFFF" p-id="6654"></path>
+</svg>
--- a/src/assets/icons/file-txt.svg
+++ b/src/assets/icons/file-txt.svg
@@ -0,0 +1,11 @@
+<svg t="1642407315436" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5906"
+  width="200" height="200">
+  <path
+    d="M967.111111 281.6V910.222222c0 62.862222-50.915556 113.777778-113.777778 113.777778H170.666667c-62.862222 0-113.777778-50.915556-113.777778-113.777778V113.777778c0-62.862222 50.915556-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z"
+    fill="#6D9FE5" p-id="5907"></path>
+  <path d="M685.511111 167.822222V0L967.111111 281.6H799.288889c-62.862222 0-113.777778-50.915556-113.777778-113.777778"
+    fill="#4B80CB" p-id="5908"></path>
+  <path
+    d="M344.177778 485.575111h312.888889V426.666667h-312.888889zM471.153778 770.019556h58.908444v-284.444445h-58.908444z"
+    fill="#FFFFFF" p-id="5909"></path>
+</svg>
--- a/src/assets/icons/file-video.svg
+++ b/src/assets/icons/file-video.svg
@@ -0,0 +1,14 @@
+<svg t="1642407389455" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6501"
+  width="200" height="200">
+  <path
+    d="M967.111111 281.6V910.222222c0 62.862222-50.915556 113.777778-113.777778 113.777778H170.666667c-62.862222 0-113.777778-50.915556-113.777778-113.777778V113.777778c0-62.862222 50.915556-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z"
+    fill="#C386F0" p-id="6502"></path>
+  <path
+    d="M284.444444 398.222222m42.666667 0l298.666667 0q42.666667 0 42.666666 42.666667l0 234.666667q0 42.666667-42.666666 42.666666l-298.666667 0q-42.666667 0-42.666667-42.666666l0-234.666667q0-42.666667 42.666667-42.666667Z"
+    fill="#FFFFFF" p-id="6503"></path>
+  <path
+    d="M738.417778 457.841778a31.971556 31.971556 0 0 1 48.014222 27.676444v154.538667c0 24.632889-26.652444 40.021333-47.985778 27.704889L684.430222 636.586667V488.96z"
+    fill="#FFFFFF" p-id="6504"></path>
+  <path d="M685.511111 167.822222V0L967.111111 281.6H799.288889c-62.862222 0-113.777778-50.915556-113.777778-113.777778"
+    fill="#A15FDE" p-id="6505"></path>
+</svg>
--- a/src/assets/icons/file-wps.svg
+++ b/src/assets/icons/file-wps.svg
@@ -0,0 +1,13 @@
+<svg t="1642407280584" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5757"
+  width="200" height="200">
+  <path
+    d="M967.111111 281.6V910.222222c0 62.577778-51.2 113.777778-113.777778 113.777778H170.666667c-62.577778 0-113.777778-51.2-113.777778-113.777778V113.777778c0-62.577778 51.2-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z"
+    fill="#4F6BF6" p-id="5758"></path>
+  <path d="M581.262222 755.626667h59.363556L739.555556 439.04h-59.335112z" fill="#FFFFFF" p-id="5759"></path>
+  <path d="M685.511111 224.711111V0L967.111111 281.6H742.4c-31.288889 0-56.888889-25.6-56.888889-56.888889"
+    fill="#243EBB" p-id="5760"></path>
+  <path
+    d="M640.625778 755.626667h-59.363556l-98.929778-277.020445h59.335112zM442.737778 755.626667h-59.363556L284.444444 439.04h59.335112z"
+    fill="#FFFFFF" p-id="5761"></path>
+  <path d="M383.374222 755.626667h59.363556l98.929778-277.020445h-59.335112z" fill="#FFFFFF" p-id="5762"></path>
+</svg>
--- a/src/assets/icons/file-zip.svg
+++ b/src/assets/icons/file-zip.svg
@@ -0,0 +1 @@
+<svg t="1642421944380" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="865" width="200" height="200"><path d="M97.9 376h828.4v269.2H97.9z" fill="#F95F5D" p-id="866"></path><path d="M926.3 376V161.5c0-26.6-23.8-50.3-52.1-50.3H149.9c-28.3 0-52.1 23.7-52.1 50.3V376h828.5z m0 0" fill="#55C7F7" p-id="867"></path><path d="M97.9 645.2v214.5c0 26.6 23.6 50.3 51.7 50.3h725c28.1 0 51.7-23.7 51.7-50.3V645.2H97.9z m0 0" fill="#7ECF3B" p-id="868"></path><path d="M421.8 111.2h184.9V910H421.8z" fill="#FDAF42" p-id="869"></path><path d="M606.7 457.4v112.4H413V457.4h193.7m31.1-45.9H381.9c-4.4 0-11.8 4.4-11.8 11.8v179c0 4.4 4.4 11.8 11.8 11.8h255.9c4.4 0 11.8-4.4 11.8-11.8v-179c-2.9-8.8-7.4-11.8-11.8-11.8z m0 0" fill="#FFFFFF" p-id="870"></path></svg>
--- a/src/assets/icons/file.svg
+++ b/src/assets/icons/file.svg
@@ -0,0 +1,12 @@
+<svg t="1640574422482" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3140"
+  width="128" height="128">
+  <path
+    d="M913.29536 941.04064c0.0256 24.82688-16.54784 44.96384-37.0176 44.98432l-708.23936 0.6912c-20.46464 0.02048-37.07904-20.08576-37.10464-44.91264l-0.83968-859.02848c-0.0256-24.82688 16.54784-44.96384 37.0176-44.98432l521.10848-0.50688 224.39424 210.50368 0.68096 693.25312z"
+    fill="#e6e6e6" p-id="3141"></path>
+  <path
+    d="M913.29536 253.26592l-189.11744 0.18432c-20.46464 0.02048-37.07904-20.08576-37.10464-44.91264l-0.16384-165.77024 226.38592 210.49856z"
+    fill="#C4BCB1" p-id="3142"></path>
+  <path
+    d="M720.72192 396.84096a22.54848 22.54848 0 0 1-22.54848 22.54848H326.13376a22.54848 22.54848 0 0 1 0-45.09696h372.0448a22.54848 22.54848 0 0 1 22.54336 22.54848zM720.72192 565.95456a22.54848 22.54848 0 0 1-22.54848 22.54848H326.13376a22.54848 22.54848 0 0 1 0-45.09696h372.0448a22.54848 22.54848 0 0 1 22.54336 22.54848zM720.72192 746.33728a22.54848 22.54848 0 0 1-22.54848 22.54848H326.13376a22.54848 22.54848 0 0 1 0-45.09696h372.0448a22.54848 22.54848 0 0 1 22.54336 22.54848z"
+    fill="#8a8a8a" p-id="3143"></path>
+</svg>
--- a/src/assets/images/avatar/female.png
+++ b/src/assets/images/avatar/female.png
--- a/src/assets/images/avatar/male.png
+++ b/src/assets/images/avatar/male.png
--- a/src/assets/images/avatar/unknown.png
+++ b/src/assets/images/avatar/unknown.png
--- a/src/assets/images/banner.png
+++ b/src/assets/images/banner.png
--- a/src/assets/images/logo.svg
+++ b/src/assets/images/logo.svg
@@ -0,0 +1,9 @@
+<svg width="33" height="33" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174.8 204">
+<path fill="#307AF2" d="M86.7,0l88,51v.2l-16.3,9.4v-.2L86.7,18.9Zm71.8,143.5,16.3,9.4v.2L86.8,204h0l-16.3-9.4,16.3-9.4h0l71.7-41.5v-.2Z"/>
+<path fill="#12D2AC" d="M16.3,143.5v.2L58,167.8l-16.3,9.4L0,153.1v-.2Z"/>
+<path fill="#12D2AC" d="M104.1,93,15.9,143.8l-.2-.1V124.9l.2.1L87.7,83.6,104.1,93Z"/>
+<path fill="#0057FE" d="M88.1,0,.1,51v.2l16.3,9.4v-.2L88.1,18.9Z"/>
+<path fill="#307AF2" d="M.1,50.9.2,152.6l.2.1,16.3-9.4-.2-.1-.1-82.9L.1,50.9Z"/>
+<path fill="#0057FE" d="M174.7,50.9l-.1,101.7-.2.1-16.3-9.4.2-.1.1-82.9Z"/>
+<path fill="#12D2AC" d="M41.7,158.5l16.1,9.4,100.6-58.7V90.4Z"/>
+</svg>
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -0,0 +1,63 @@
+<template>
+  <a-breadcrumb>
+    <a-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
+      <span
+        v-if="item.redirect === 'noRedirect' || item.redirect === '' || index === breadcrumbList.length - 1"
+        class="gi_line_1"
+        >{{ item.meta.title }}</span
+      >
+      <span v-else class="gi_line_1 breadcrumb-item-title" @click="handleLink(item)">{{ item.meta.title }}</span>
+    </a-breadcrumb-item>
+  </a-breadcrumb>
+</template>
+
+<script lang="ts" setup>
+import type { RouteLocationMatched } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+
+const breadcrumbList = ref<RouteLocationMatched[]>([])
+function getBreadcrumbList() {
+  // 只显示有title标题的
+  const matched = route.matched.filter((item) => item.meta && item.meta.title)
+  const first = matched[0]
+  if (!isHome(first)) {
+    matched.unshift({ path: '/', meta: { title: '首页' } } as RouteLocationMatched)
+  }
+  breadcrumbList.value = matched.filter((item) => item.meta && item.meta.title && item.meta.breadcrumb !== false)
+}
+getBreadcrumbList()
+
+watchEffect(() => {
+  if (route.path.startsWith('/redirect/')) return
+  getBreadcrumbList()
+})
+
+// 判断是否为首页
+function isHome(route: RouteLocationMatched) {
+  const name = (route?.name as string) || ''
+  if (!name) return false
+  return name.trim() === 'Home'
+}
+
+// 路由跳转
+function handleLink(item: RouteLocationMatched) {
+  const { redirect, path } = item
+  if (redirect) {
+    return router.push(redirect as string)
+  }
+  router.push(path)
+}
+</script>
+
+<style lang="scss" scoped>
+.breadcrumb-item-title {
+  transition: all 0.3s;
+  cursor: pointer;
+  &:hover {
+    color: $color-theme;
+    font-weight: 600;
+  }
+}
+</style>
--- a/src/components/DateRangePicker/index.vue
+++ b/src/components/DateRangePicker/index.vue
@@ -0,0 +1,66 @@
+<template>
+  <a-range-picker
+    :placeholder="placeholder"
+    :format="format"
+    :show-time="showTime"
+    :shortcuts="shortcuts"
+    shortcuts-position="left"
+    style="height: 32px"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { ShortcutType } from '@arco-design/web-vue'
+import dayjs from 'dayjs'
+
+defineProps({
+  format: {
+    type: String,
+    default: 'YYYY-MM-DD HH:mm:ss'
+  },
+  showTime: {
+    type: Boolean,
+    default: true
+  },
+  placeholder: {
+    type: Array as PropType<string[]>,
+    default: (): string[] => ['开始时间', '结束时间']
+  }
+})
+
+const shortcuts = computed<ShortcutType[]>(() => {
+  return [
+    {
+      label: '今天',
+      value: (): Date[] => [dayjs().startOf('day').toDate(), dayjs().toDate()]
+    },
+    {
+      label: '昨天',
+      value: (): Date[] => [
+        dayjs().subtract(1, 'day').startOf('day').toDate(),
+        dayjs().subtract(1, 'day').endOf('day').toDate()
+      ]
+    },
+    {
+      label: '本周',
+      value: (): Date[] => [dayjs().startOf('week').add(1, 'day').toDate(), dayjs().toDate()]
+    },
+    {
+      label: '本月',
+      value: (): Date[] => [dayjs().startOf('month').toDate(), dayjs().toDate()]
+    },
+    {
+      label: '本年',
+      value: (): Date[] => [dayjs().startOf('year').toDate(), dayjs().toDate()]
+    }
+  ]
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'DateRangePicker'
+}
+</script>
+
+<style scoped lang="less"></style>
--- a/src/components/GiCell/GiCellAvatar.vue
+++ b/src/components/GiCell/GiCellAvatar.vue
@@ -0,0 +1,31 @@
+<template>
+  <a-space fill>
+    <a-avatar :size="24" shape="circle">
+      <img :src="props.avatar" alt="avatar" />
+    </a-avatar>
+    <a-link v-if="props.isLink" @click="emit('click')">{{ props.name }}</a-link>
+    <span v-else>{{ props.name }}</span>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'GiCellAvatar' })
+
+interface Props {
+  avatar: string
+  name: string
+  isLink?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  avatar: '',
+  name: '',
+  isLink: false // 是否可以点击
+})
+
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+</script>
+
+<style lang="scss" scoped></style>
--- a/src/components/GiCell/GiCellGender.vue
+++ b/src/components/GiCell/GiCellGender.vue
@@ -0,0 +1,27 @@
+<template>
+  <a-tag v-if="props.gender === 1" color="arcoblue" size="small" class="gi_round">
+    <template #icon><icon-man /></template>
+    <template #default>男</template>
+  </a-tag>
+  <a-tag v-else-if="props.gender === 2" color="magenta" size="small" class="gi_round">
+    <template #icon><icon-woman /></template>
+    <template #default>女</template>
+  </a-tag>
+  <a-tag v-else color="gray" size="small" class="gi_round">
+    <template #default>未知</template>
+  </a-tag>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'GiCellGender' })
+
+interface Props {
+  gender: 1 | 2 | 0
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  gender: 1
+})
+</script>
+
+<style lang="scss" scoped></style>
--- a/src/components/GiCell/GiCellStatus.vue
+++ b/src/components/GiCell/GiCellStatus.vue
@@ -0,0 +1,39 @@
+<template>
+  <span v-if="props.status === 1">
+    <icon-check-circle-fill class="success" />
+    <span>启用</span>
+  </span>
+  <span v-if="props.status === 2">
+    <icon-minus-circle-fill class="warning" />
+    <span>禁用</span>
+  </span>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'GiCellStatus' })
+
+interface Props {
+  status: 0 | 1
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  status: 1
+})
+</script>
+
+<style lang="scss" scoped>
+.arco-icon.success {
+  color: rgb(var(--success-6));
+  margin-right: 4px;
+}
+
+.arco-icon.warning {
+  color: rgb(var(--warning-6));
+  margin-right: 4px;
+}
+
+.arco-icon.danger {
+  color: rgb(var(--danger-6));
+  margin-right: 4px;
+}
+</style>
--- a/src/components/GiCell/GiCellTag.vue
+++ b/src/components/GiCell/GiCellTag.vue
@@ -0,0 +1,45 @@
+<template>
+  <span v-if="!dictItem"></span>
+  <span v-else-if="!dictItem.color">{{ dictItem.label }}</span>
+  <a-tag v-else-if="dictItem.color === 'primary'" color="arcoblue">{{
+      dictItem.label
+    }}</a-tag>
+  <a-tag v-else-if="dictItem.color === 'success'" color="green">{{
+      dictItem.label
+    }}</a-tag>
+  <a-tag v-else-if="dictItem.color === 'warning'" color="orangered">{{
+      dictItem.label
+    }}</a-tag>
+  <a-tag v-else-if="dictItem.color === 'error'" color="red">{{
+      dictItem.label
+    }}</a-tag>
+  <a-tag v-else-if="dictItem.color === 'default'" color="gray">{{
+      dictItem.label
+    }}</a-tag>
+  <a-tag v-else :color="dictItem.color">{{ dictItem.label }}</a-tag>
+</template>
+
+<script lang="ts" setup>
+import type { LabelValueState } from '@/types/global'
+
+defineOptions({ name: 'GiCellTag' })
+
+const props = defineProps({
+  dict: {
+    type: Array<LabelValueState>,
+    required: true,
+  },
+  value: {
+    type: [Number, String],
+    required: true,
+  },
+});
+
+const dictItem = computed(() =>
+  props.dict.find(
+    (d) => d.value === String(props.value) || d.value === Number(props.value),
+  ),
+);
+</script>
+
+<style lang="scss" scoped></style>
--- a/src/components/GiCell/GiCellTags.vue
+++ b/src/components/GiCell/GiCellTags.vue
@@ -0,0 +1,33 @@
+<template>
+  <a-overflow-list v-if="data.length">
+    <a-tag v-for="(item, index) in data" :key="index" size="small">
+      {{ item }}
+    </a-tag>
+    <template #overflow="{ number }">
+      <a-popover :content-style="{ maxWidth: '300px', padding: '8px 12px' }">
+        <a-tag color="arcoblue" size="small">+{{ number }}</a-tag>
+        <template #content>
+          <a-space wrap>
+            <a-tag v-for="tag in data.filter((i, n) => n >= data.length - number)" :key="tag" size="small">
+              {{ tag }}
+            </a-tag>
+          </a-space>
+        </template>
+      </a-popover>
+    </template>
+  </a-overflow-list>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'GiCellTags' })
+
+interface Props {
+  data: string[]
+}
+
+withDefaults(defineProps<Props>(), {
+  data: () => []
+})
+</script>
+
+<style lang="scss" scoped></style>
--- a/src/components/GiCodeView/index.vue
+++ b/src/components/GiCodeView/index.vue
@@ -0,0 +1,59 @@
+<template>
+  <CodeMirror
+    :model-value="codeValue"
+    :tab-size="config.tabSize"
+    :basic="config.basic"
+    :dark="config.dark"
+    :readonly="config.readonly"
+    :extensions="extensions"
+  />
+</template>
+
+<script lang="ts" setup>
+import CodeMirror from 'vue-codemirror6'
+import { javascript } from '@codemirror/lang-javascript'
+import { vue } from '@codemirror/lang-vue'
+import { oneDark } from '@codemirror/theme-one-dark'
+
+interface Props {
+  type?: 'javascript' | 'vue'
+  codeJson: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'javascript',
+  codeJson: ''
+})
+
+const visible = ref(false)
+const open = () => {
+  visible.value = true
+}
+defineExpose({ open })
+
+const defaultConfig = {
+  tabSize: 2,
+  basic: true,
+  dark: true,
+  readonly: true
+}
+const config = defaultConfig
+
+const codeValue = computed(() => props.codeJson)
+const extensions = computed(() => {
+  const arr = [oneDark]
+  if (props.type === 'javascript') {
+    arr.push(javascript())
+  }
+  if (props.type === 'vue') {
+    arr.push(vue())
+  }
+  return arr
+})
+</script>
+
+<style lang="scss" scoped>
+:deep(.ͼ1 .cm-scroller) {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
+}
+</style>
--- a/src/components/GiDot/dot.scss
+++ b/src/components/GiDot/dot.scss
@@ -0,0 +1,54 @@
+.gi-dot {
+  display: inline-block;
+  background: #000;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  vertical-align: middle;
+}
+
+$types: primary, success, warning, danger, info;
+
+@each $i in $types {
+  .gi-dot-#{$i} {
+    background-color: rgb(var(--#{$i}-6));
+  }
+
+  @if ($i ==info) {
+    .gi-dot-#{$i} {
+      background-color: rgb(var(--gray-6));
+    }
+  }
+}
+
+.gi-dot-processing {
+  position: relative;
+}
+
+.gi-dot-processing:after {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: inherit;
+  content: '';
+  animation: gi-dot-animated 1.2s ease-in-out infinite;
+}
+
+@keyframes gi-dot-animated {
+  0% {
+    transform: scale(0.5);
+    opacity: 1;
+  }
+
+  30% {
+    opacity: 0.7;
+  }
+
+  100% {
+    transform: scale(2.5);
+    opacity: 0;
+  }
+}
--- a/src/components/GiDot/index.tsx
+++ b/src/components/GiDot/index.tsx
@@ -0,0 +1,20 @@
+import { defineComponent, type PropType } from 'vue'
+import './dot.scss'
+
+type TPropsType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
+export default defineComponent({
+  name: 'GiDot',
+  props: {
+    animation: {
+      type: Boolean,
+      default: true
+    },
+    type: {
+      type: String as PropType<TPropsType>,
+      default: 'primary'
+    }
+  },
+  setup(props) {
+    return () => <span class={['gi-dot', { 'gi-dot-processing': props.animation }, `gi-dot-${props.type}`]}></span>
+  }
+})
--- a/src/components/GiFlexibleBox/index.vue
+++ b/src/components/GiFlexibleBox/index.vue
@@ -0,0 +1,36 @@
+<template>
+  <div ref="BoxRef" class="gi-flexible-box" :style="style">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+
+defineOptions({ name: 'GiFlexibleBox' })
+
+interface Props {
+  modelValue: boolean
+  direction: 'left' | 'right'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  direction: 'right'
+})
+
+const BoxRef = ref<HTMLElement | null>()
+
+const style = computed(() => {
+  const obj: CSSProperties = {}
+  obj[`margin-${props.direction}`] =
+    !props.modelValue && BoxRef.value && BoxRef.value.clientWidth ? `-${BoxRef.value.clientWidth}px` : 0
+  return obj
+})
+</script>
+
+<style lang="scss" scoped>
+.gi-flexible-box {
+  transition: all 0.36s;
+}
+</style>
--- a/src/components/GiFooter/index.vue
+++ b/src/components/GiFooter/index.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="gi-footer">Copyright © 2022-{{ year }} ContiNew Admin</div>
+</template>
+
+<script lang="ts" setup>
+import Dayjs from 'dayjs'
+
+defineOptions({ name: 'GiFooter' })
+
+const year = Dayjs(new Date()).format('YYYY')
+</script>
+
+<style lang="scss" scoped>
+.gi-footer {
+  height: 50px;
+  font-size: 12px;
+  color: var(--color-text-3);
+  margin-top: 12px;
+  border-top: 1px dashed var(--color-neutral-3);
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>
--- a/src/components/GiForm/index.ts
+++ b/src/components/GiForm/index.ts
@@ -0,0 +1,6 @@
+import GiForm from './src/GiForm.vue'
+import { useGiForm } from './src/hooks'
+
+export type * from './src/type'
+export { GiForm, useGiForm }
+export default GiForm
--- a/src/components/GiForm/src/GiForm.vue
+++ b/src/components/GiForm/src/GiForm.vue
@@ -0,0 +1,239 @@
+<template>
+  <a-form ref="formRef" v-bind="options.form" :model="modelValue" size="large" :auto-label-width="true">
+    <a-row :gutter="14" v-bind="options.row" class="w-full">
+      <template v-for="(item, index) in columns" :key="item.field">
+        <a-col
+          v-if="!isHide(item.hide)"
+          :span="item.span || 12"
+          v-bind="item.col || item.span ? item.col : options.col"
+          v-show="index <= (options.fold?.index || 0) || (index >= (options.fold?.index || 0) && !collapsed)"
+        >
+          <a-form-item v-bind="item.item" :label="item.label" :field="item.field" :rules="item.rules">
+            <slot :name="item.field">
+              <template v-if="item.type === 'input'">
+                <a-input
+                  :placeholder="`请输入${item.label}`"
+                  v-bind="(item.props as A.InputInstance['$props'])"
+                  :model-value="modelValue[item.field as keyof typeof modelValue]"
+                  @update:model-value="valueChange($event, item.field)"
+                ></a-input>
+              </template>
+
+              <template v-if="item.type === 'input-number'">
+                <a-input-number
+                  :placeholder="`请输入${item.label}`"
+                  v-bind="(item.props as A.InputNumberInstance['$props'])"
+                  :model-value="modelValue[item.field as keyof typeof modelValue]"
+                  @update:model-value="valueChange($event, item.field)"
+                ></a-input-number>
+              </template>
+
+              <template v-if="item.type === 'textarea'">
+                <a-textarea
+                  :placeholder="`请输入${item.label}`"
+                  :show-word-limit="true"
+                  v-bind="(item.props as A.TextareaInstance['$props'])"
+                  :model-value="modelValue[item.field as keyof typeof modelValue]"
+                  @update:model-value="valueChange($event, item.field)"
+                ></a-textarea>
+              </template>
+
+              <template v-if="item.type === 'select'">
+                <a-select
+                  :placeholder="`请选择${item.label}`"
+                  v-bind="(item.props as A.SelectInstance['$props'])"
+                  :options="dicData[item.field] || (item.options as A.SelectInstance['$props']['options'])"
+                  :model-value="modelValue[item.field as keyof typeof modelValue]"
+                  @update:model-value="valueChange($event, item.field)"
+                ></a-select>
+              </template>
+
+              <template v-if="item.type === 'cascader'">
+                <a-cascader
+                  :placeholder="`请选择${item.label}`"
+                  v-bind="(item.props as A.CascaderInstance['$props'])"
+                  :options="dicData[item.field] || (item.options as A.CascaderInstance['$props']['options'])"
+                  :model-value="modelValue[item.field as keyof typeof modelValue]"
+                  @update:model-value="valueChange($event, item.field)"
+                />
+              </template>
+
+              <template v-if="item.type === 'tree-select'">
+                <a-tree-select
+                  :placeholder="`请选择${item.label}`"
+                  v-bind="(item.props as A.TreeSelectInstance['$props'])"
+                  :data="dicData[item.field] || (item.data as A.TreeSelectInstance['$props']['data'])"
+                  :model-value="modelValue[item.field as keyof typeof modelValue]"
+                  @update:model-value="valueChange($event, item.field)"
+                >
+                </a-tree-select>
+              </template>
+
+              <template v-if="item.type === 'radio-group'">
+                <a-radio-group
+                  v-bind="(item.props as A.RadioGroupInstance['$props'])"
+                  :options="dicData[item.field] || (item.options as A.RadioGroupInstance['$props']['options'])"
+                  :model-value="modelValue[item.field as keyof typeof modelValue]"
+                  @update:model-value="valueChange($event, item.field)"
+                ></a-radio-group>
+              </template>
+
+              <template v-if="item.type === 'checkbox-group'">
+                <a-checkbox-group
+                  v-bind="(item.props as A.CheckboxGroupInstance['$props'])"
+                  :options="dicData[item.field] || (item.options as A.CheckboxGroupInstance['$props']['options'])"
+                  :model-value="modelValue[item.field as keyof typeof modelValue]"
+                  @update:model-value="valueChange($event, item.field)"
+                ></a-checkbox-group>
+              </template>
+
+              <template v-if="item.type === 'date-picker'">
+                <a-date-picker
+                  :placeholder="`请选择日期`"
+                  v-bind="(item.props as A.DatePickerInstance['$props'])"
+                  :model-value="modelValue[item.field as keyof typeof modelValue]"
+                  @update:model-value="valueChange($event, item.field)"
+                ></a-date-picker>
+              </template>
+
+              <template v-if="item.type === 'time-picker'">
+                <a-time-picker
+                  :placeholder="`请选择时间`"
+                  v-bind="(item.props as A.TimePickerInstance['$props'])"
+                  :model-value="modelValue[item.field as keyof typeof modelValue]"
+                  @update:model-value="valueChange($event, item.field)"
+                >
+                </a-time-picker>
+              </template>
+
+              <template v-if="item.type === 'rate'">
+                <a-rate
+                  v-bind="(item.props as A.RateInstance['$props'])"
+                  :model-value="modelValue[item.field as keyof typeof modelValue]"
+                  @update:model-value="valueChange($event, item.field)"
+                />
+              </template>
+
+              <template v-if="item.type === 'switch'">
+                <a-switch
+                  v-bind="(item.props as A.SwitchInstance['$props'])"
+                  :model-value="modelValue[item.field as keyof typeof modelValue]"
+                  @update:model-value="valueChange($event, item.field)"
+                />
+              </template>
+
+              <template v-if="item.type === 'slider'">
+                <a-slider
+                  v-bind="(item.props as A.SliderInstance['$props'])"
+                  :model-value="modelValue[item.field as keyof typeof modelValue]"
+                  @update:model-value="valueChange($event, item.field)"
+                />
+              </template>
+            </slot>
+          </a-form-item>
+        </a-col>
+      </template>
+      <a-col :span="options.btns?.span || 12" v-bind="options.btns?.col" v-if="!options.btns?.hide">
+        <a-space wrap>
+          <slot name="suffix">
+            <a-button type="primary" @click="emit('search')">
+              <template #icon><icon-search /></template>
+              <template #default>{{ options.btns?.searchBtnText || '查询' }}</template>
+            </a-button>
+            <a-button @click="emit('reset')">重置</a-button>
+            <a-button v-if="options.fold?.enable" type="text" size="mini" @click="collapsed = !collapsed">
+              <template #icon>
+                <icon-up v-if="!collapsed" />
+                <icon-down v-else />
+              </template>
+              <template #default>{{ collapsed ? '展开' : '收起' }}</template>
+            </a-button>
+          </slot>
+        </a-space>
+      </a-col>
+    </a-row>
+  </a-form>
+</template>
+
+<script setup lang="ts">
+import type { Options, Columns, ColumnsItemHide, ColumnsItem } from './type'
+import type * as A from '@arco-design/web-vue'
+import _ from 'lodash'
+
+interface Props {
+  modelValue: any
+  options: Options
+  columns: Columns
+}
+
+const props = withDefaults(defineProps<Props>(), {})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: any): void
+  (e: 'search'): void
+  (e: 'reset'): void
+}>()
+
+const valueChange = (value: any, field: string) => {
+  emit('update:modelValue', Object.assign(props.modelValue, { [field]: value }))
+}
+
+const collapsed = ref(props.options.fold?.defaultCollapsed ?? false)
+const formRef = ref<A.FormInstance>()
+defineExpose({ formRef })
+
+const isHide = (hide?: ColumnsItemHide<boolean | object>) => {
+  if (hide === undefined) return false
+  if (typeof hide === 'boolean') return hide
+  if (typeof hide === 'function') {
+    return hide(props.modelValue)
+  }
+}
+
+const dicData: Record<string, any> = reactive({})
+props.columns.forEach((item) => {
+  if (item.request && typeof item.request === 'function' && item?.init) {
+    item.request(props.modelValue).then((res) => {
+      dicData[item.field] = item.resultFormat ? item.resultFormat(res) : res.data
+    })
+  }
+})
+
+// 先找出有级联的项
+// 如果这个字段改变了值，那么就找出它的cascader属性对应的字段项，去请求里面的request
+const hasCascaderColumns: ColumnsItem[] = []
+props.columns.forEach((item) => {
+  const arr = hasCascaderColumns.map((i) => i.field)
+  if (item.cascader?.length && !arr.includes(item.field)) {
+    hasCascaderColumns.push(item)
+  }
+})
+
+// 要深克隆，否则无法监听新旧值变化
+const cloneForm = computed(() => _.cloneDeep(props.modelValue))
+
+watch(cloneForm as any, (newVal, oldVal) => {
+  hasCascaderColumns.forEach((item) => {
+    if (newVal[item.field] !== oldVal[item.field]) {
+      const arr = props.columns.filter((a) => {
+        return item?.cascader?.includes(a.field)
+      })
+      arr.forEach((i) => {
+        if (i.request && Boolean(newVal[item.field])) {
+          i.request(props.modelValue).then((res) => {
+            dicData[i.field] = i.resultFormat ? i.resultFormat(res) : res.data
+            if (!dicData[i.field].map((i: any) => i.value).includes(props.modelValue[i.field])) {
+              emit('update:modelValue', Object.assign(props.modelValue, { [i.field]: '' }))
+            }
+          })
+        } else if (i.request && !newVal[item.field]) {
+          dicData[i.field] = []
+          emit('update:modelValue', Object.assign(props.modelValue, { [i.field]: '' }))
+        }
+      })
+    }
+  })
+})
+</script>
+
+<style lang="scss" scoped></style>
--- a/src/components/GiForm/src/hooks.ts
+++ b/src/components/GiForm/src/hooks.ts
@@ -0,0 +1,48 @@
+import { reactive } from 'vue'
+import _ from 'lodash'
+import type { Columns, ColumnsItem, ColumnsItemPropsKey } from './type'
+import { Message } from '@arco-design/web-vue'
+
+export function useGiForm(initValue: Columns) {
+  const getInitValue = () => _.cloneDeep(initValue)
+
+  const columns = reactive(getInitValue())
+
+  const resetColumns = () => {
+    Object.assign(columns, getInitValue())
+  }
+
+  const setValue = <T>(field: string, key: keyof ColumnsItem, value: T) => {
+    if (!columns.length) return
+    const obj = columns.find((i) => i.field === field)
+    if (obj) {
+      obj[key] = value as never
+    } else {
+      Message.warning(`没有这个field属性值-${field}，请检查！`)
+    }
+  }
+
+  const setPropsValue = <T>(field: string, key: ColumnsItemPropsKey, value: T) => {
+    if (!columns.length) return
+    const obj = columns.find((i) => i.field === field)
+    if (obj) {
+      if (!obj.props) {
+        obj.props = {}
+      }
+      obj.props[key as keyof ColumnsItem['props']] = value as never
+    } else {
+      Message.warning(`没有这个field属性值-${field}，请检查！`)
+    }
+  }
+
+  return {
+    /** 配置项 */
+    columns,
+    /** 重置 columns */
+    resetColumns,
+    /** 设置 columns 某个对象属性的值 */
+    setValue,
+    /** 设置 columns.props 某个属性的值 */
+    setPropsValue
+  }
+}
--- a/src/components/GiForm/src/type.ts
+++ b/src/components/GiForm/src/type.ts
@@ -0,0 +1,96 @@
+import type * as A from '@arco-design/web-vue'
+
+export type FormType =
+  | 'input'
+  | 'select'
+  | 'radio-group'
+  | 'checkbox-group'
+  | 'textarea'
+  | 'date-picker'
+  | 'time-picker'
+  | 'input-number'
+  | 'rate'
+  | 'switch'
+  | 'slider'
+  | 'cascader'
+  | 'tree-select'
+
+export type ColumnsItemPropsKey =
+  | keyof A.InputInstance['$props']
+  | keyof A.SelectInstance['$props']
+  | keyof A.TextareaInstance['$props']
+  | keyof A.DatePickerInstance['$props']
+  | keyof A.TimePickerInstance['$props']
+  | keyof A.RadioGroupInstance['$props']
+  | keyof A.CheckboxGroupInstance['$props']
+  | keyof A.InputNumberInstance['$props']
+  | keyof A.RateInstance['$props']
+  | keyof A.SwitchInstance['$props']
+  | keyof A.SliderInstance['$props']
+  | keyof A.CascaderInstance['$props']
+  | keyof A.TreeSelectInstance['$props']
+
+export type ColumnsItemHide<F> = boolean | ((form: F) => boolean)
+export type ColumnsItemRequest<F = any> = (form: F) => Promise<any>
+export type ColumnsItemFormat<T = any> = (
+  res: T
+) =>
+  | A.SelectInstance['$props']['options']
+  | A.RadioGroupInstance['$props']['options']
+  | A.CheckboxGroupInstance['$props']['options']
+  | A.CascaderInstance['$props']['options']
+  | A.TreeSelectInstance['$props']['data']
+
+export type ColumnsItemOptionsOrData =
+  | A.SelectInstance['$props']['options']
+  | A.RadioGroupInstance['$props']['options']
+  | A.CheckboxGroupInstance['$props']['options']
+  | A.CascaderInstance['$props']['options']
+  | A.TreeSelectInstance['$props']['data']
+
+export interface ColumnsItem<F = any> {
+  type: FormType // 类型
+  label: A.FormItemInstance['label'] // 标签
+  field: A.FormItemInstance['field'] // 字段(必须唯一)
+  span?: number // 栅格占位格数
+  col?: A.ColProps // a-col的props, 响应式布局, 优先级大于span
+  item?: Omit<A.FormItemInstance['$props'], 'label' | 'field'> // a-form-item的props
+  props?:
+    | A.InputInstance['$props']
+    | A.SelectInstance['$props']
+    | A.TextareaInstance['$props']
+    | A.DatePickerInstance['$props']
+    | A.TimePickerInstance['$props']
+    | A.RadioGroupInstance['$props']
+    | A.CheckboxGroupInstance['$props']
+    | A.InputNumberInstance['$props']
+    | A.RateInstance['$props']
+    | A.SwitchInstance['$props']
+    | A.SliderInstance['$props']
+    | A.CascaderInstance['$props']
+    | A.TreeSelectInstance['$props']
+  rules?: A.FormItemInstance['$props']['rules'] // 表单校验规则
+  // 下拉列表|复选框组|单选框组|级联选择组件的options
+  options?:
+    | A.SelectInstance['$props']['options']
+    | A.RadioGroupInstance['$props']['options']
+    | A.CheckboxGroupInstance['$props']['options']
+    | A.CascaderInstance['$props']['options']
+  // 下拉树组件的data
+  data?: A.TreeSelectInstance['$props']['data']
+  hide?: ColumnsItemHide<F> // 是否隐藏
+  request?: ColumnsItemRequest<F> // 接口请求api
+  resultFormat?: ColumnsItemFormat // 结果集格式化
+  init?: boolean // 初始化请求
+  cascader?: string[] // 级联的field字段列表
+}
+
+export interface Options {
+  form: Omit<A.FormInstance['$props'], 'model'>
+  row?: Partial<typeof import('@arco-design/web-vue')['Row']['__defaults']>
+  col?: A.ColProps
+  btns?: { hide?: boolean; span?: number; col?: A.ColProps; searchBtnText?: string }
+  fold?: { enable?: boolean; index?: number; defaultCollapsed?: boolean }
+}
+
+export type Columns<F = any> = ColumnsItem<F>[]
--- a/src/components/GiIconSelector/index.vue
+++ b/src/components/GiIconSelector/index.vue
@@ -0,0 +1,216 @@
+<template>
+  <a-popover trigger="click">
+    <a-input
+      placeholder="请选择图标"
+      :model-value="modelValue"
+      allow-clear
+      readonly
+      @clear="emit('update:modelValue', '')"
+    >
+      <template #prefix>
+        <template v-if="modelValue">
+          <component v-if="props.type === 'arco'" :size="16" :is="modelValue" />
+          <GiSvgIcon v-if="modelValue" :size="16" :name="modelValue" />
+        </template>
+        <icon-search v-else />
+      </template>
+    </a-input>
+
+    <template #content>
+      <div class="container" :class="{ 'is-list': !isGridView }">
+        <a-row>
+          <section style="flex: 1; margin-right: 8px">
+            <a-input
+              v-model="searchValue"
+              placeholder="搜索图标名称"
+              allow-clear
+              size="small"
+              @input="search"
+              @clear="search"
+            >
+              <template #prefix>
+                <icon-search />
+              </template>
+            </a-input>
+          </section>
+
+          <a-button size="small" @click="isGridView = !isGridView">
+            <template #icon>
+              <icon-apps v-if="isGridView" />
+              <icon-unordered-list v-else />
+            </template>
+          </a-button>
+        </a-row>
+
+        <section class="icon-list">
+          <a-row wrap :gutter="4">
+            <a-col :span="isGridView ? 4 : 8" v-for="item of currentPageIconList" :key="item">
+              <div class="icon-item" :class="{ active: modelValue === item }" @click="handleSelectedIcon(item)">
+                <component v-if="props.type === 'arco'" :is="item" :size="20" />
+                <GiSvgIcon v-if="props.type === 'custom'" :name="item" :size="20"></GiSvgIcon>
+                <div class="gi_line_1 icon-name">{{ item }}</div>
+              </div>
+            </a-col>
+          </a-row>
+        </section>
+
+        <a-row justify="center" align="center">
+          <a-pagination
+            size="mini"
+            :pageSize="pageSize"
+            :total="total"
+            :show-size-changer="false"
+            @change="onPageChange"
+          ></a-pagination>
+        </a-row>
+      </div>
+    </template>
+  </a-popover>
+</template>
+
+<script setup lang="ts">
+import * as ArcoIcons from '@arco-design/web-vue/es/icon'
+import { useClipboard } from '@vueuse/core'
+import { Message } from '@arco-design/web-vue'
+// 自定义图标模块
+const SvgIconModules = import.meta.glob('@/icons/*.svg')
+
+defineOptions({ name: 'GiIconSelector' })
+const emit = defineEmits(['select', 'update:modelValue'])
+
+interface Props {
+  type?: 'arco' | 'custom'
+  modelValue?: string
+  enableCopy?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'arco', // 默认是arco图标类型 custom自定义图标
+  modelValue: '',
+  enableCopy: false
+})
+
+const searchValue = ref('') // 搜索词
+
+// 图标列表
+const isGridView = ref(true)
+
+let IconList: string[] = []
+if (props.type === 'arco') {
+  IconList = Object.keys(ArcoIcons).filter((i) => i !== 'default')
+}
+if (props.type === 'custom') {
+  for (const path in SvgIconModules) {
+    const name = path.replace('/src/icons/', '').replace('.svg', '')
+    IconList.push(name)
+  }
+}
+
+const pageSize = 42
+const current = ref(1)
+const total = ref(IconList.length) // 图标总数
+
+// 当前页的图标列表
+const currentPageIconList = ref(IconList.slice(0, pageSize))
+// 搜索列表
+const searchList = ref<string[]>([])
+
+// 页码改变
+const onPageChange = (page: number) => {
+  current.value = page
+  if (!searchList.value.length) {
+    currentPageIconList.value = IconList.slice((page - 1) * pageSize, page * pageSize)
+  } else {
+    currentPageIconList.value = searchList.value.slice((page - 1) * pageSize, page * pageSize)
+  }
+}
+
+// 搜索
+const search = () => {
+  if (searchValue.value) {
+    const temp = searchValue.value.toLowerCase()
+    searchList.value = IconList.filter((item) => {
+      return item.toLowerCase().startsWith((temp.startsWith('icon') ? '' : 'icon') + temp)
+    })
+    total.value = searchList.value.length
+    currentPageIconList.value = searchList.value.slice(0, pageSize)
+  } else {
+    searchList.value = []
+    total.value = IconList.length
+    currentPageIconList.value = IconList.slice((current.value - 1) * pageSize, current.value * pageSize)
+  }
+}
+
+// 点击选择图标
+const handleSelectedIcon = async (icon: string) => {
+  emit('select', icon)
+  emit('update:modelValue', icon)
+  if (props.enableCopy) {
+    const { isSupported, copied, copy } = useClipboard()
+    if (isSupported) {
+      await copy(`<${icon} />`)
+      if (copied) {
+        Message.success(`已选择并且复制成功 ${icon} 图标`)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 300px;
+  overflow: hidden;
+  .icon-list {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    .icon-item {
+      height: 30px;
+      margin-bottom: 4px;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      border: 1px dashed var(--color-bg-1);
+      .icon-name {
+        display: none;
+      }
+      &.active {
+        border: 1px dashed rgb(var(--primary-3));
+        background-color: rgba(var(--primary-6), 0.05);
+      }
+
+      &:not(.active) {
+        &:hover {
+          border-color: var(--color-border-3);
+        }
+      }
+    }
+  }
+}
+
+.is-list {
+  min-width: 400px;
+  .icon-list {
+    height: 300px;
+    overflow: hidden;
+    overflow-y: auto;
+    .icon-item {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      padding-left: 4px;
+      box-sizing: border-box;
+      .icon-name {
+        margin-left: 6px;
+        font-size: 12px;
+        color: var(--color-text-2);
+        display: block;
+      }
+    }
+  }
+}
+</style>
--- a/src/components/GiOption/index.vue
+++ b/src/components/GiOption/index.vue
@@ -0,0 +1,16 @@
+<template>
+  <ul class="gi-option">
+    <slot></slot>
+  </ul>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'GiOption' })
+</script>
+
+<style lang="scss" scoped>
+.gi-option {
+  width: 100%;
+  min-width: 120px;
+}
+</style>
--- a/src/components/GiOptionItem/index.vue
+++ b/src/components/GiOptionItem/index.vue
@@ -0,0 +1,77 @@
+<template>
+  <li
+    class="gi-option-item"
+    :class="{ 'gi-option-item--more': props.more, 'gi-option-item--active': props.active }"
+    @click="handleClick"
+  >
+    <div class="gi-option-item__wrapper">
+      <span class="gi-option-item__icon">
+        <slot name="icon">
+          <GiSvgIcon :name="props.icon"></GiSvgIcon>
+        </slot>
+      </span>
+      <slot>
+        <span class="gi-option-item__label">{{ props.label }}</span>
+      </slot>
+    </div>
+    <IconRight v-if="props.more" />
+  </li>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'GiOptionItem' })
+
+interface Props {
+  icon?: string
+  label?: string
+  more?: boolean
+  active?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  icon: '',
+  label: '',
+  more: false,
+  active: false
+})
+
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+
+const handleClick = () => {
+  emit('click')
+}
+</script>
+
+<style lang="scss" scoped>
+.gi-option-item {
+  padding: 0 5px 0 10px;
+  height: 34px;
+  line-height: 34px;
+  user-select: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  color: var(--color-text-2);
+  font-size: 14px;
+  cursor: pointer;
+  &__wrapper {
+    display: flex;
+    align-items: center;
+  }
+  &__icon {
+    margin-right: 8px;
+    display: flex;
+    align-items: center;
+  }
+  &--active,
+  &:hover {
+    color: rgb(var(--primary-6));
+    background: var(--color-primary-light-1);
+  }
+  &--more {
+    justify-content: space-between;
+  }
+}
+</style>
--- a/src/components/GiOverFlowTags/index.vue
+++ b/src/components/GiOverFlowTags/index.vue
@@ -0,0 +1,32 @@
+<template>
+  <a-overflow-list v-if="data.length">
+    <a-tag v-for="(item, index) in data" :key="index" size="small">
+      {{ item }}
+    </a-tag>
+    <template #overflow="{ number }">
+      <a-popover :content-style="{ maxWidth: '300px', padding: '8px 12px' }">
+        <a-tag color="arcoblue" size="small">+{{ number }}</a-tag>
+        <template #content>
+          <a-space wrap>
+            <a-tag v-for="tag in data.filter((i, n) => n >= data.length - number)" :key="tag" size="small">
+              {{ tag }}
+            </a-tag>
+          </a-space>
+        </template>
+      </a-popover>
+    </template>
+  </a-overflow-list>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'GiOverFlowTags' })
+
+interface Props {
+  data: string[]
+}
+withDefaults(defineProps<Props>(), {
+  data: () => []
+})
+</script>
+
+<style lang="scss" scoped></style>
--- a/src/components/GiSvgIcon/index.vue
+++ b/src/components/GiSvgIcon/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <svg
+    aria-hidden="true"
+    :class="svgClass"
+    v-bind="$attrs"
+    :style="{ color: color, fill: color, width: iconSize, height: iconSize }"
+  >
+    <use :xlink:href="iconName"></use>
+  </svg>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'GiSvgIcon' })
+
+interface Props {
+  name: string
+  color?: string
+  size?: string | number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  name: '',
+  color: '',
+  size: 20
+})
+
+// 判断传入的值，是否带有单位，如果没有，就默认用px单位
+const getUnitValue = (value: string | number): string | number => {
+  return /(px|em|rem|%)$/.test(value.toString()) ? value : value + 'px'
+}
+
+const iconSize = computed<string | number>(() => {
+  return getUnitValue(props.size)
+})
+
+const iconName = computed<string>(() => `#icon-${props.name}`)
+
+const svgClass = computed<string>(() => {
+  if (props.name) return `svg-icon icon-${props.name}`
+  return 'svg-icon'
+})
+</script>
+
+<style lang="scss" scoped>
+.svg-icon {
+  width: auto;
+  height: auto;
+  // fill: currentColor;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+</style>
--- a/src/components/GiTable/index.vue
+++ b/src/components/GiTable/index.vue
@@ -0,0 +1,216 @@
+<template>
+  <div class="gi-table" :class="{ 'gi-table--fullscreen': isFullscreen }" ref="giTableRef">
+    <a-row justify="space-between" align="center" class="gi-table__toolbar">
+      <a-space wrap class="gi-table__toolbar-left" :size="[8, 8]">
+        <slot name="custom-left"></slot>
+      </a-space>
+      <a-space wrap class="gi-table__toolbar-right" :size="[8, 8]">
+        <slot name="custom-right"></slot>
+        <a-tooltip content="刷新">
+          <a-button v-if="showRefreshBtn" @click="refresh">
+            <template #icon><icon-refresh /></template>
+          </a-button>
+        </a-tooltip>
+        <a-popover
+          v-if="showSettingColumnBtn"
+          trigger="click"
+          position="br"
+          :content-style="{ minWidth: '120px', padding: '6px 8px 10px' }"
+        >
+          <a-tooltip content="列设置">
+            <a-button>
+              <template #icon>
+                <icon-settings />
+              </template>
+            </a-button>
+          </a-tooltip>
+          <template #content>
+            <div class="gi-table__draggable">
+              <VueDraggable ref="el" v-model="settingColumnList">
+                <div v-for="item in settingColumnList" :key="item.title" class="drag-item">
+                  <div class="drag-item__move"><icon-drag-dot-vertical /></div>
+                  <a-checkbox v-model:model-value="item.show" :disabled="item.disabled">{{ item.title }}</a-checkbox>
+                </div>
+              </VueDraggable>
+            </div>
+            <a-divider :margin="6" />
+            <a-row justify="center">
+              <a-button type="primary" size="mini" long @click="resetSettingColumns">
+                <template #icon><icon-refresh /></template>
+                <template #default>重置</template>
+              </a-button>
+            </a-row>
+          </template>
+        </a-popover>
+      </a-space>
+    </a-row>
+    <div class="gi-table__container">
+      <a-table
+        ref="tableRef"
+        :stripe="stripe"
+        :size="size"
+        :bordered="{ cell: isBordered }"
+        v-bind="{ ...attrs, columns: _columns }"
+      >
+        <template v-for="key in Object.keys(slots)" :key="key" #[key]="scoped">
+          <slot :key="key" :name="key" v-bind="scoped"></slot> </template
+      ></a-table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TableInstance, TableColumnData } from '@arco-design/web-vue'
+import { VueDraggable } from 'vue-draggable-plus'
+
+defineOptions({ name: 'GiTable', inheritAttrs: false })
+const emit = defineEmits<{
+  (e: 'refresh'): void
+}>()
+
+const attrs = useAttrs()
+const slots = useSlots()
+
+interface Props {
+  disabledTools?: string[]
+  disabledColumnKeys?: string[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabledTools: () => [], // 禁止显示的工具
+  disabledColumnKeys: () => [] // 禁止控制显示隐藏的列
+})
+
+const tableRef = ref<TableInstance | null>(null)
+const stripe = ref(false)
+const size = ref<TableInstance['size']>('medium')
+const isBordered = ref(false)
+const isFullscreen = ref(false)
+
+const refresh = () => {
+  emit('refresh')
+}
+
+const showRefreshBtn = computed(() => !props.disabledTools.includes('refresh'))
+const showSettingColumnBtn = computed(
+  () => !props.disabledTools.includes('setting') && attrs?.columns && (attrs?.columns as TableColumnData[])?.length
+)
+type SettingColumnItem = { title: string; key: string; show: boolean; disabled: boolean }
+const settingColumnList = ref<SettingColumnItem[]>([])
+
+// 重置配置列
+const resetSettingColumns = () => {
+  settingColumnList.value = []
+  if (attrs.columns) {
+    const arr = attrs.columns as TableColumnData[]
+    arr.forEach((item) => {
+      settingColumnList.value.push({
+        key: item.dataIndex || (typeof item.title === 'string' ? item.title : ''),
+        title: typeof item.title === 'string' ? item.title : '',
+        show: item.show ?? true,
+        disabled: props.disabledColumnKeys.includes(
+          item.dataIndex || (typeof item.title === 'string' ? item.title : '')
+        )
+      })
+    })
+  }
+}
+
+watch(
+  () => attrs,
+  () => {
+    resetSettingColumns()
+  },
+  { immediate: true }
+)
+
+// 排序和过滤可显示的列数据
+const _columns = computed(() => {
+  if (!attrs.columns) return []
+  const arr = attrs.columns as TableColumnData[]
+  // 显示的dataIndex
+  const showDataIndexs = settingColumnList.value
+    .filter((i) => i.show)
+    .map((i) => i.key || (typeof i.title === 'string' ? i.title : ''))
+  // 显示的columns数据
+  const filterColumns = arr.filter((i) =>
+    showDataIndexs.includes(i.dataIndex || (typeof i.title === 'string' ? i.title : ''))
+  )
+  const sortedColumns: TableColumnData[] = []
+  settingColumnList.value.forEach((i) => {
+    filterColumns.forEach((j) => {
+      if (i.key === (j.dataIndex || j.title)) {
+        sortedColumns.push(j)
+      }
+    })
+  })
+  return sortedColumns
+})
+
+defineExpose({ tableRef })
+</script>
+
+<style lang="scss" scoped>
+.gi-table {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--color-bg-1);
+  &--fullscreen {
+    padding: $padding;
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 1001;
+  }
+  &__container {
+    max-height: 100%;
+    overflow: hidden;
+  }
+  &__toolbar {
+    :deep(.arco-form-item-layout-inline) {
+      margin-right: 8px;
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }
+
+    :deep(.arco-form-layout-inline .arco-form-item) {
+      margin-bottom: 0;
+    }
+  }
+  &__draggable {
+    padding: 1px 0; // 解决 max-height 和 overflow:auto 始终显示垂直滚动条问题
+    max-height: 250px;
+    box-sizing: border-box;
+    overflow: hidden;
+    overflow-y: auto;
+  }
+}
+
+.drag-item {
+  display: flex;
+  align-items: center;
+
+  cursor: pointer;
+  &:hover {
+    background-color: var(--color-fill-2);
+  }
+  &__move {
+    padding-left: 2px;
+    padding-right: 2px;
+    cursor: move;
+  }
+  :deep(.arco-checkbox) {
+    width: 100%;
+    font-size: 12px;
+    .arco-checkbox-icon {
+      width: 14px;
+      height: 14px;
+    }
+  }
+}
+</style>
--- a/src/components/GiTag/index.tsx
+++ b/src/components/GiTag/index.tsx
@@ -0,0 +1,66 @@
+import { defineComponent, computed, type PropType } from 'vue'
+import './tag.scss'
+
+type TPropsType = 'dark' | 'light' | 'outline' | 'light-outline'
+type TPropsStatus = 'primary' | 'success' | 'warning' | 'danger' | 'info'
+type TPropsSize = 'mini' | 'small' | 'large'
+
+export default defineComponent({
+  name: 'GiTag',
+  props: {
+    type: {
+      type: String as PropType<TPropsType>,
+      default: 'light'
+    },
+    status: {
+      type: String as PropType<TPropsStatus>,
+      default: 'primary'
+    },
+    size: {
+      type: String as PropType<TPropsSize>,
+      default: 'small'
+    },
+    closable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['click', 'close'],
+  setup(props, { slots, emit }) {
+    const className = computed(() => {
+      const arr = ['gi-tag']
+      if (props.type) {
+        arr.push(`gi-tag-${props.type}`)
+      }
+      if (props.size) {
+        arr.push(`gi-tag-size-${props.size}`)
+      }
+      if (props.status) {
+        arr.push(`gi-tag-status-${props.status === 'info' ? 'gray' : props.status}`)
+      }
+      return arr
+    })
+
+    const handleClick = () => {
+      emit('click')
+    }
+
+    const handleClose = (event: MouseEvent) => {
+      event.stopPropagation()
+      emit('close')
+    }
+
+    const CloseIcon = (
+      <span class="gi-tag-close-btn" onClick={(e) => handleClose(e)}>
+        <icon-close class="close-icon" />
+      </span>
+    )
+
+    return () => (
+      <span class={className.value} onClick={handleClick}>
+        {slots.default?.()}
+        {props.closable && CloseIcon}
+      </span>
+    )
+  }
+})
--- a/src/components/GiTag/tag.scss
+++ b/src/components/GiTag/tag.scss
@@ -0,0 +1,156 @@
+.gi-tag {
+  display: inline-flex;
+  padding: 0 8px;
+  // padding-top: 1px;
+  height: 20px;
+  font-size: 12px;
+  line-height: 1;
+  border-radius: 3px;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.gi-tag-close-btn {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  margin-left: 4px;
+
+  .close-icon {
+    width: 12px;
+    height: 12px;
+    z-index: 9;
+  }
+
+  &::before {
+    width: 16px;
+    height: 16px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    content: '';
+    position: absolute;
+    display: block;
+    box-sizing: border-box;
+    background-color: transparent;
+    border-radius: var(--border-radius-circle);
+    transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
+  }
+}
+
+$status: primary, success, warning, danger, 'gray';
+
+.gi-tag-dark {
+  color: #fff;
+
+  @each $i in $status {
+    &.gi-tag-status-#{$i} {
+      border: 1px solid rgb(var(--#{$i}-6));
+      background-color: rgb(var(--#{$i}-6));
+
+      .gi-tag-close-btn {
+        &:hover {
+          color: rgb(var(--#{$i}-6));
+
+          &::before {
+            background-color: rgb(var(--#{$i}-2));
+          }
+        }
+      }
+    }
+  }
+}
+
+.gi-tag-light {
+  color: #fff;
+
+  @each $i in $status {
+    &.gi-tag-status-#{$i} {
+      color: rgb(var(--#{$i}-6));
+      background-color: rgb(var(--#{$i}-1));
+
+      .gi-tag-close-btn {
+        &:hover {
+          color: #fff;
+
+          &::before {
+            background-color: rgb(var(--#{$i}-6));
+          }
+        }
+      }
+    }
+  }
+}
+
+.gi-tag-outline {
+  background: transparent;
+
+  @each $i in $status {
+    &.gi-tag-status-#{$i} {
+      color: rgb(var(--#{$i}-6));
+      border: 1px solid rgb(var(--#{$i}-6));
+
+      .gi-tag-close-btn {
+        &:hover {
+          color: #fff;
+
+          &::before {
+            background-color: rgb(var(--#{$i}-6));
+          }
+        }
+      }
+    }
+  }
+}
+
+.gi-tag-light-outline {
+  @each $i in $status {
+    &.gi-tag-status-#{$i} {
+      color: rgb(var(--#{$i}-6));
+      border: 1px solid rgb(var(--#{$i}-2));
+      background-color: rgb(var(--#{$i}-1));
+
+      .gi-tag-close-btn {
+        &:hover {
+          color: #fff;
+
+          &::before {
+            background-color: rgb(var(--#{$i}-6));
+          }
+        }
+      }
+    }
+  }
+}
+
+.gi-tag-size-mini {
+  height: 22px;
+  padding: 0 4px;
+
+  .gi-tag-close-btn {
+    .close-icon {
+      width: 10px;
+      height: 10px;
+    }
+
+    &::before {
+      width: 14px;
+      height: 14px;
+    }
+  }
+}
+
+.gi-tag-size-small {
+  height: 24px;
+}
+
+.gi-tag-size-large {
+  height: 28px;
+  padding: 0 10px;
+  font-size: 14px;
+}
--- a/src/components/GiThemeBtn/index.vue
+++ b/src/components/GiThemeBtn/index.vue
@@ -0,0 +1,33 @@
+<template>
+  <a-button size="mini" class="gi_hover_btn" @click="handleToggleTheme">
+    <template #icon>
+      <icon-sun-fill :size="18" v-if="appStore.theme === 'light'"></icon-sun-fill>
+      <icon-moon-fill :size="18" v-else></icon-moon-fill>
+    </template>
+  </a-button>
+</template>
+
+<script setup lang="ts">
+import { useDark, useToggle } from '@vueuse/core'
+import { useAppStore } from '@/stores'
+
+defineOptions({ name: 'GiThemeBtn' })
+const appStore = useAppStore()
+
+const isDark = useDark({
+  selector: 'body',
+  attribute: 'arco-theme',
+  valueDark: 'dark',
+  valueLight: 'light',
+  storageKey: 'arco-theme',
+  onChanged(dark: boolean) {
+    appStore.toggleTheme(dark)
+  }
+})
+
+const toggleTheme = useToggle(isDark)
+
+const handleToggleTheme = () => {
+  toggleTheme()
+}
+</script>
--- a/src/components/ParentView/index.vue
+++ b/src/components/ParentView/index.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <router-view v-slot="{ Component, route }">
+      <keep-alive :include="(tabsStore.cacheList as string[])">
+        <component :is="Component" :key="route.path" />
+      </keep-alive>
+    </router-view>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTabsStore } from '@/stores'
+
+defineOptions({ name: 'ParentView' })
+
+const tabsStore = useTabsStore()
+</script>
+
+<style lang="scss" scoped></style>
--- a/src/components/icons/Icon403.vue
+++ b/src/components/icons/Icon403.vue
@@ -0,0 +1,898 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+    <g id="freepik--Floor--inject-70">
+      <ellipse
+        id="freepik--floor--inject-70"
+        cx="250"
+        cy="384.61"
+        rx="209.73"
+        ry="94.79"
+        style="fill: #f5f5f5"
+      ></ellipse>
+    </g>
+    <g id="freepik--Shadows--inject-70">
+      <ellipse
+        id="freepik--Shadow--inject-70"
+        cx="352.36"
+        cy="395.73"
+        rx="56.05"
+        ry="32.36"
+        style="fill: #e0e0e0"
+      ></ellipse>
+      <path
+        id="freepik--shadow--inject-70"
+        d="M91.71,412.52c-9.53,5.57-9.53,14.59,0,20.15s25,5.56,34.51,0,9.53-14.58,0-20.15S101.24,407,91.71,412.52Z"
+        style="fill: #e0e0e0"
+      ></path>
+    </g>
+    <g id="freepik--Door--inject-70">
+      <g id="freepik--Bricks--inject-70">
+        <path
+          d="M103.87,225.91v3.46c0,1.09.77,1.53,1.71,1l3.34-1.92V221L105.58,223A3.78,3.78,0,0,0,103.87,225.91Z"
+          style="fill: #e0e0e0"
+        ></path>
+        <path
+          d="M93.28,223v3.45c0,1.09.77,1.53,1.71,1l13.93-8V212L95,220A3.78,3.78,0,0,0,93.28,223Z"
+          style="fill: #e0e0e0"
+        ></path>
+        <path
+          d="M100.82,262.05,85,271.18a3.8,3.8,0,0,0-1.71,3v3.46c0,1.09.77,1.53,1.71,1l15.82-9.13a3.78,3.78,0,0,0,1.71-3V263C102.53,261.94,101.76,261.5,100.82,262.05Z"
+          style="fill: #e0e0e0"
+        ></path>
+        <path
+          d="M108.92,302.88l-13.93,8a3.78,3.78,0,0,0-1.71,3v3.46c0,1.09.77,1.53,1.71,1l13.93-8Z"
+          style="fill: #e0e0e0"
+        ></path>
+        <path
+          d="M93.28,186.59V190c0,1.09.77,1.53,1.71,1l13.93-8v-7.4l-13.93,8A3.78,3.78,0,0,0,93.28,186.59Z"
+          style="fill: #e0e0e0"
+        ></path>
+        <path
+          d="M77.44,295.91v3.46c0,1.09.76,1.53,1.71,1L95,291.23a3.77,3.77,0,0,0,1.71-3v-3.46c0-1.09-.76-1.53-1.71-1L79.15,293A3.77,3.77,0,0,0,77.44,295.91Z"
+          style="fill: #e0e0e0"
+        ></path>
+        <path
+          d="M93.28,259.32v3.46c0,1.09.77,1.53,1.71,1l13.93-8v-7.41L95,256.37A3.78,3.78,0,0,0,93.28,259.32Z"
+          style="fill: #e0e0e0"
+        ></path>
+        <path
+          d="M91.94,318.09v-3.45c0-1.09-.76-1.54-1.71-1l-15.82,9.13a3.8,3.8,0,0,0-1.71,3v3.46c0,1.09.77,1.53,1.71,1l15.82-9.14A3.75,3.75,0,0,0,91.94,318.09Z"
+          style="fill: #e0e0e0"
+        ></path>
+        <path
+          d="M92,176.33,76.2,185.46a3.8,3.8,0,0,0-1.71,3v3.46c0,1.09.77,1.53,1.71,1L92,183.74a3.8,3.8,0,0,0,1.71-3v-3.46C93.73,176.23,93,175.79,92,176.33Z"
+          style="fill: #e0e0e0"
+        ></path>
+        <path
+          d="M100.82,189.31,85,198.44a3.8,3.8,0,0,0-1.71,3v3.46c0,1.09.77,1.53,1.71,1l15.82-9.14a3.78,3.78,0,0,0,1.71-3v-3.46C102.53,189.2,101.76,188.76,100.82,189.31Z"
+          style="fill: #e0e0e0"
+        ></path>
+        <path
+          d="M100.82,225.68,85,234.81a3.8,3.8,0,0,0-1.71,3v3.46c0,1.09.77,1.53,1.71,1l15.82-9.13a3.78,3.78,0,0,0,1.71-3v-3.46C102.53,225.57,101.76,225.13,100.82,225.68Z"
+          style="fill: #e0e0e0"
+        ></path>
+        <path
+          d="M85,333.14,100.82,324a3.8,3.8,0,0,0,1.71-3v-3.46c0-1.09-.77-1.53-1.71-1L85,325.73a3.8,3.8,0,0,0-1.71,3v3.46C83.29,333.24,84.06,333.68,85,333.14Z"
+          style="fill: #e0e0e0"
+        ></path>
+        <path
+          d="M235.65,161.92v3.46a3.77,3.77,0,0,1-1.7,3l-3.34,1.93v-7.41l3.34-1.92C234.89,160.39,235.65,160.83,235.65,161.92Z"
+          style="fill: #e0e0e0"
+        ></path>
+        <path
+          d="M230.61,281.09l13.93-8c.94-.55,1.7-.1,1.7,1v3.45a3.77,3.77,0,0,1-1.7,3l-13.93,8Z"
+          style="fill: #e0e0e0"
+        ></path>
+        <path
+          d="M246.24,146.74v3.46a3.79,3.79,0,0,1-1.7,3l-13.93,8v-7.4l13.93-8C245.48,145.21,246.24,145.65,246.24,146.74Z"
+          style="fill: #e0e0e0"
+        ></path>
+        <path
+          d="M238.71,194.54l15.82-9.14c.94-.54,1.71-.1,1.71,1v3.46a3.8,3.8,0,0,1-1.71,3l-15.82,9.13c-1,.55-1.71.1-1.71-1V197.5A3.75,3.75,0,0,1,238.71,194.54Z"
+          style="fill: #e0e0e0"
+        ></path>
+        <path
+          d="M230.61,244.72l13.93-8c.94-.54,1.7-.1,1.7,1v3.45a3.77,3.77,0,0,1-1.7,3l-13.93,8Z"
+          style="fill: #e0e0e0"
+        ></path>
+        <path
+          d="M246.24,110.37v3.46a3.77,3.77,0,0,1-1.7,3l-13.93,8v-7.4l13.93-8C245.48,108.84,246.24,109.28,246.24,110.37Z"
+          style="fill: #e0e0e0"
+        ></path>
+        <path
+          d="M262.09,201.4v3.46a3.77,3.77,0,0,1-1.71,3L244.56,217c-.94.55-1.7.11-1.7-1v-3.46a3.77,3.77,0,0,1,1.7-3l15.82-9.13C261.33,199.87,262.09,200.31,262.09,201.4Z"
+          style="fill: #e0e0e0"
+        ></path>
+        <path
+          d="M246.24,183.11v3.46a3.79,3.79,0,0,1-1.7,3l-13.93,8v-7.4l13.93-8C245.48,181.58,246.24,182,246.24,183.11Z"
+          style="fill: #e0e0e0"
+        ></path>
+        <path
+          d="M247.59,240.33v-3.46a3.77,3.77,0,0,1,1.71-3l15.82-9.13c.94-.55,1.71-.11,1.71,1v3.46a3.78,3.78,0,0,1-1.71,3l-15.82,9.14C248.35,241.86,247.59,241.42,247.59,240.33Z"
+          style="fill: #e0e0e0"
+        ></path>
+        <path
+          d="M238.71,121.8l15.82-9.14c.94-.54,1.71-.1,1.71,1v3.46a3.8,3.8,0,0,1-1.71,3l-15.82,9.13c-1,.55-1.71.1-1.71-1v-3.46A3.75,3.75,0,0,1,238.71,121.8Z"
+          style="fill: #e0e0e0"
+        ></path>
+        <path
+          d="M238.71,158.17,254.53,149c.94-.54,1.71-.1,1.71,1v3.46a3.8,3.8,0,0,1-1.71,3l-15.82,9.13c-1,.55-1.71.1-1.71-1v-3.45A3.75,3.75,0,0,1,238.71,158.17Z"
+          style="fill: #e0e0e0"
+        ></path>
+        <path
+          d="M254.53,247.36l-15.82,9.14c-1,.54-1.71.1-1.71-1v-3.46a3.77,3.77,0,0,1,1.71-3L254.53,240c.94-.55,1.71-.1,1.71,1v3.46A3.78,3.78,0,0,1,254.53,247.36Z"
+          style="fill: #e0e0e0"
+        ></path>
+        <path
+          d="M230.61,299.27l13.93-8c.94-.54,1.7-.1,1.7,1v3.46a3.79,3.79,0,0,1-1.7,3l-13.93,8Z"
+          style="fill: #e0e0e0"
+        ></path>
+      </g>
+      <g id="freepik--door--inject-70">
+        <g id="freepik--door--inject-70">
+          <path
+            d="M108.92,413V165.44a12,12,0,0,1,5.42-9.38L221.46,94.21a3.83,3.83,0,0,1,3.83-.38L229,96a3.79,3.79,0,0,1,1.6,3.51V347.06l-7.81,4.51-6.34-3.67-96,55.42v7.33l-7.81,4.51Z"
+            style="fill: #37474f"
+          ></path>
+          <path
+            d="M134.28,395.32l-13.85,8v7.33l-7.81,4.51-3.7-2.14V165.44a11,11,0,0,1,1.6-5.35l23.58,13.62Z"
+            style="fill: #263238"
+          ></path>
+          <path
+            d="M112.62,167.59V415.14l7.81-4.5v-7.32l96-55.42,6.34,3.66,7.81-4.5V99.48c0-3.47-2.43-4.85-5.4-3.13L118,158.21A12,12,0,0,0,112.62,167.59Z"
+            style="fill: #455a64"
+          ></path>
+          <polygon
+            points="120.43 168.9 120.43 406.38 219.1 349.42 219.1 111.95 120.43 168.9"
+            style="fill: currentColor"
+          ></polygon>
+          <polygon
+            points="120.43 168.9 120.43 406.38 219.1 349.42 219.1 111.95 120.43 168.9"
+            style="fill: #fff; opacity: 0.7000000000000001"
+          ></polygon>
+          <g style="opacity: 0.43">
+            <path
+              d="M137.25,377.26V178.61l65-37.54V339.71ZM140,180.19V372.53l59.59-34.4V145.8Z"
+              style="fill: currentColor"
+            ></path>
+            <path
+              d="M137.25,178.61V377.26l65-37.55V141.07Zm62.31,159.52L140,372.53V180.19l59.59-34.39Z"
+              style="opacity: 0.1"
+            ></path>
+          </g>
+          <polygon
+            points="219.1 349.42 219.1 111.95 222.75 109.83 222.76 351.57 219.1 349.42"
+            style="fill: #263238"
+          ></polygon>
+          <polygon
+            points="120.43 410.64 222.76 351.57 219.1 349.42 120.43 406.38 120.43 410.64"
+            style="fill: #e0e0e0"
+          ></polygon>
+        </g>
+        <g id="freepik--Latch--inject-70">
+          <polygon
+            points="122.34 258.22 124.31 259.36 124.32 292.09 122.34 290.95 122.34 258.22"
+            style="fill: #e0e0e0"
+          ></polygon>
+          <polygon
+            points="124.31 259.36 134.94 253.22 134.95 285.95 124.32 292.09 124.31 259.36"
+            style="fill: #fafafa"
+          ></polygon>
+          <path d="M135,262.23l-4.66,2.68v5.32a.64.64,0,0,0,1,.55l3.7-2.13Z" style="opacity: 0.05"></path>
+          <polygon
+            points="134.94 253.22 132.97 252.08 122.34 258.22 124.31 259.36 134.94 253.22"
+            style="fill: #ebebeb"
+          ></polygon>
+          <path
+            d="M128.39,263.82l4.88,2.81,1.95-3.38-4.88-2.81h0a.94.94,0,0,0-1,.09,3,3,0,0,0-1.38,2.39A1,1,0,0,0,128.39,263.82Z"
+            style="fill: #e0e0e0"
+          ></path>
+          <polygon
+            points="130.29 264.91 132.06 265.94 132.06 263.61 133.95 262.52 132.18 261.5 130.29 262.58 130.29 264.91"
+            style="opacity: 0.1"
+          ></polygon>
+          <polygon
+            points="132.65 263.98 132.65 269.09 152.15 257.84 152.15 252.73 132.65 263.98"
+            style="fill: #fafafa"
+          ></polygon>
+          <polygon
+            points="132.65 263.98 130.88 262.95 130.88 268.07 132.65 269.09 132.65 263.98"
+            style="fill: #e0e0e0"
+          ></polygon>
+          <polygon
+            points="152.15 252.73 150.38 251.7 130.88 262.95 132.65 263.98 152.15 252.73"
+            style="fill: #ebebeb"
+          ></polygon>
+          <path
+            d="M127.84,278.23a4,4,0,0,1,1.79-3.1c1-.57,1.79-.11,1.79,1a3.92,3.92,0,0,1-1.08,2.52V282a1.35,1.35,0,0,1-.61,1.05l-.2.12c-.34.19-.61,0-.61-.35v-3.34C128.28,279.56,127.84,279.08,127.84,278.23Z"
+            style="fill: #455a64"
+          ></path>
+        </g>
+        <g id="freepik--Close--inject-70">
+          <path
+            d="M155.5,200.16l30.07-17.36c1.79-1,3.25-.2,3.25,1.87v20.65a7.21,7.21,0,0,1-3.25,5.63L155.5,228.31c-1.79,1-3.25.19-3.25-1.88V205.78A7.17,7.17,0,0,1,155.5,200.16Z"
+            style="opacity: 0.15"
+          ></path>
+          <path
+            d="M156.65,201l30.07-17.36c1.79-1,3.25-.2,3.25,1.87v20.65a7.21,7.21,0,0,1-3.25,5.63l-30.07,17.36c-1.8,1-3.25.19-3.25-1.88V206.66A7.15,7.15,0,0,1,156.65,201Z"
+            style="fill: #455a64"
+          ></path>
+          <path
+            d="M165.59,198h-.08a.37.37,0,0,1-.29-.45l6.1-26.68a.36.36,0,0,1,.35-.29h0a.37.37,0,0,1,.36.26l6.1,19.65a.38.38,0,1,1-.72.22l-5.68-18.31L166,197.74A.38.38,0,0,1,165.59,198Z"
+            style="fill: #263238"
+          ></path>
+          <path
+            d="M157.66,220.88a.72.72,0,0,1-.09-.44V209.63a1.37,1.37,0,0,1,.09-.55.58.58,0,0,1,.29-.31l3.27-1.89c.11-.06.18,0,.23.05a1.51,1.51,0,0,1,.06.52v.45a2.41,2.41,0,0,1-.06.6.5.5,0,0,1-.23.31l-2.16,1.25v3L161,212c.1-.06.18,0,.22.05a1.3,1.3,0,0,1,.07.53V213a1.89,1.89,0,0,1-.07.6.55.55,0,0,1-.22.32L159.06,215v3.28l2.17-1.26a.15.15,0,0,1,.22,0,1.54,1.54,0,0,1,.06.53v.45a2.34,2.34,0,0,1-.06.61.54.54,0,0,1-.22.3l-3.28,1.9C157.81,220.93,157.71,220.94,157.66,220.88Z"
+            style="fill: #fafafa"
+          ></path>
+          <path
+            d="M162.78,217.6v-11a1.19,1.19,0,0,1,.1-.53.72.72,0,0,1,.29-.33l1.81-1q2.25-1.31,2.25,2a5.9,5.9,0,0,1-1,3.53v.07c.3.08.55.56.76,1.44l.68,2.95a.44.44,0,0,0,0,.1.34.34,0,0,1,0,.1c0,.27-.2.52-.61.75l-.32.19c-.35.2-.55.18-.58-.06l-.62-3a1.21,1.21,0,0,0-.31-.64c-.12-.08-.29-.05-.53.09l-.42.24v4.26a1,1,0,0,1-.59.85l-.31.17C163,218,162.78,217.93,162.78,217.6Zm2.28-7.69a1.4,1.4,0,0,0,.51-.76,3.86,3.86,0,0,0,.22-1.37,2,2,0,0,0-.21-1.1q-.21-.27-.57-.06l-.76.44v3.32Z"
+            style="fill: #fafafa"
+          ></path>
+          <path
+            d="M168.65,214.21v-11a1.38,1.38,0,0,1,.09-.54.8.8,0,0,1,.3-.33l1.81-1q2.25-1.31,2.25,2a5.94,5.94,0,0,1-1,3.53v.06c.3.09.55.57.76,1.45l.67,2.94,0,.1s0,.07,0,.11c0,.26-.2.51-.61.74l-.32.19c-.36.2-.55.18-.59-.06l-.61-3a1.19,1.19,0,0,0-.31-.63c-.12-.08-.3-.06-.54.08l-.41.24v4.27a1,1,0,0,1-.6.84l-.3.18C168.84,214.6,168.65,214.55,168.65,214.21Zm2.28-7.69a1.36,1.36,0,0,0,.51-.76,4.07,4.07,0,0,0,.21-1.37,1.92,1.92,0,0,0-.2-1.09.39.39,0,0,0-.57-.07l-.76.44V207Z"
+            style="fill: #fafafa"
+          ></path>
+          <path
+            d="M174.29,205.36q0-6.15,2.89-7.82t2.89,4.48q0,6.18-2.89,7.85T174.29,205.36Zm3.93,1a13.59,13.59,0,0,0,.33-3.46,9.2,9.2,0,0,0-.33-3.07q-.33-.77-1-.36a2.49,2.49,0,0,0-1,1.56,13.45,13.45,0,0,0-.33,3.45,9.36,9.36,0,0,0,.33,3.08c.23.52.57.64,1,.37A2.55,2.55,0,0,0,178.22,206.36Z"
+            style="fill: #fafafa"
+          ></path>
+          <path
+            d="M181.35,206.88v-11a1.38,1.38,0,0,1,.09-.54.68.68,0,0,1,.3-.33l1.8-1q2.27-1.31,2.26,2a5.94,5.94,0,0,1-1.05,3.53v.06c.29.09.55.57.76,1.45l.67,2.94a.3.3,0,0,1,0,.1.41.41,0,0,1,0,.11c0,.26-.2.51-.6.74l-.33.19c-.35.2-.54.18-.58-.06l-.62-3a1.13,1.13,0,0,0-.31-.63c-.11-.09-.29-.06-.53.08l-.41.24V206a1,1,0,0,1-.6.84l-.3.17C181.54,207.27,181.35,207.21,181.35,206.88Zm2.27-7.69a1.32,1.32,0,0,0,.52-.76,4.11,4.11,0,0,0,.21-1.37,2,2,0,0,0-.21-1.1.39.39,0,0,0-.56-.06l-.76.44v3.32Z"
+            style="fill: #fafafa"
+          ></path>
+        </g>
+      </g>
+      <g id="freepik--Tapes--inject-70">
+        <polygon
+          points="112.53 369.86 108.83 367.75 108.84 380.2 112.53 382.31 112.53 369.86"
+          style="opacity: 0.2"
+        ></polygon>
+        <polygon
+          points="112.53 366.54 108.35 364.1 108.36 376.55 112.53 378.99 112.53 366.54"
+          style="fill: currentColor"
+        ></polygon>
+        <polygon
+          points="112.53 366.54 108.35 364.1 108.36 376.55 112.53 378.99 112.53 366.54"
+          style="opacity: 0.2"
+        ></polygon>
+        <polygon
+          points="230.53 215.01 112.53 369.86 112.54 382.31 230.53 227.47 230.53 215.01"
+          style="opacity: 0.25"
+        ></polygon>
+        <polygon
+          points="230.53 211.7 112.53 366.54 112.54 378.99 230.53 224.15 230.53 211.7"
+          style="fill: currentColor"
+        ></polygon>
+        <polygon
+          points="230.53 224.13 230.53 218.48 224.68 219.38 219.81 225.77 230.53 224.13"
+          style="fill: #455a64"
+        ></polygon>
+        <polygon
+          points="215.94 243.32 205.18 244.97 200.3 251.37 211.07 249.71 215.94 243.32"
+          style="fill: #455a64"
+        ></polygon>
+        <polygon
+          points="225.69 230.52 214.93 232.17 210.05 238.57 220.82 236.92 225.69 230.52"
+          style="fill: #455a64"
+        ></polygon>
+        <polygon
+          points="206.19 256.11 195.43 257.77 190.55 264.16 201.32 262.51 206.19 256.11"
+          style="fill: #455a64"
+        ></polygon>
+        <polygon
+          points="196.44 268.91 185.67 270.56 180.8 276.96 191.56 275.31 196.44 268.91"
+          style="fill: #455a64"
+        ></polygon>
+        <polygon
+          points="186.69 281.71 175.92 283.36 171.05 289.76 181.81 288.11 186.69 281.71"
+          style="fill: #455a64"
+        ></polygon>
+        <polygon
+          points="176.94 294.5 166.17 296.16 161.29 302.55 172.06 300.9 176.94 294.5"
+          style="fill: #455a64"
+        ></polygon>
+        <polygon
+          points="167.18 307.3 156.42 308.95 151.54 315.35 162.31 313.7 167.18 307.3"
+          style="fill: #455a64"
+        ></polygon>
+        <polygon
+          points="157.43 320.1 146.67 321.75 141.79 328.15 152.56 326.5 157.43 320.1"
+          style="fill: #455a64"
+        ></polygon>
+        <polygon
+          points="147.68 332.89 136.91 334.55 132.04 340.94 142.81 339.29 147.68 332.89"
+          style="fill: #455a64"
+        ></polygon>
+        <polygon
+          points="137.93 345.69 127.16 347.34 122.29 353.74 133.05 352.09 137.93 345.69"
+          style="fill: #455a64"
+        ></polygon>
+        <polygon
+          points="128.18 358.49 117.41 360.14 112.53 366.54 123.3 364.88 128.18 358.49"
+          style="fill: #455a64"
+        ></polygon>
+        <polygon
+          points="118.41 371.29 112.53 372.19 112.53 378.99 113.53 377.68 118.41 371.29"
+          style="fill: #455a64"
+        ></polygon>
+        <polygon
+          points="112.53 283.52 230.53 298.93 230.53 311.38 112.53 295.98 112.53 283.52"
+          style="opacity: 0.25"
+        ></polygon>
+        <polygon
+          points="112.53 281.42 230.53 296.82 230.53 309.27 112.53 293.87 112.53 281.42"
+          style="fill: currentColor"
+        ></polygon>
+        <polygon
+          points="112.53 283.52 108.83 281.35 108.84 293.81 112.53 295.97 112.53 283.52"
+          style="opacity: 0.2"
+        ></polygon>
+        <polygon
+          points="112.53 281.42 108.35 278.97 108.36 291.43 112.53 293.87 112.53 281.42"
+          style="fill: currentColor"
+        ></polygon>
+        <polygon
+          points="112.53 281.42 108.35 278.97 108.36 291.43 112.53 293.87 112.53 281.42"
+          style="opacity: 0.2"
+        ></polygon>
+        <path
+          d="M117.8,284.78s.06,0,.07.09a.54.54,0,0,1,0,.22l-.17,1.15a.52.52,0,0,1-.06.2c0,.06-.07.08-.1.08l-1.34-.17-.22,1.48,1.25.16s.06,0,.08.1a.74.74,0,0,1,0,.21l-.17,1.16a.66.66,0,0,1-.06.2s-.07.08-.1.07l-1.25-.16-.34,2.35a.77.77,0,0,1-.07.2c0,.06-.07.09-.1.08l-.59-.07s0,0-.07-.1a.49.49,0,0,1,0-.21l1-7a.59.59,0,0,1,.06-.2s.07-.08.1-.08Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M118.2,287.72a7.33,7.33,0,0,1,.27-1.14,4.74,4.74,0,0,1,.41-.9,1.83,1.83,0,0,1,.53-.57A.8.8,0,0,1,120,285a.81.81,0,0,1,.55.31,1.82,1.82,0,0,1,.35.68,4.55,4.55,0,0,1,.13,1,7.67,7.67,0,0,1,0,1.16c0,.32-.09.64-.14,1s-.1.66-.15,1a7.47,7.47,0,0,1-.27,1.13,4.85,4.85,0,0,1-.41.91,2,2,0,0,1-.53.57.86.86,0,0,1-.61.16.84.84,0,0,1-.56-.31,1.88,1.88,0,0,1-.34-.68,4,4,0,0,1-.13-1,7.78,7.78,0,0,1,0-1.16c0-.3.08-.62.13-1S118.14,288,118.2,287.72Zm1.69,2.13c0-.13,0-.28.07-.43s.06-.33.08-.49,0-.33.07-.49,0-.29,0-.42a2.9,2.9,0,0,0,0-.5,1.58,1.58,0,0,0-.05-.41.71.71,0,0,0-.13-.29.34.34,0,0,0-.48-.06.74.74,0,0,0-.22.24,2.29,2.29,0,0,0-.16.38,3.33,3.33,0,0,0-.12.5,3.86,3.86,0,0,0-.07.41c0,.16,0,.32-.08.49s0,.33-.07.49,0,.3,0,.43a2.79,2.79,0,0,0,0,.93c0,.25.17.39.36.41a.47.47,0,0,0,.46-.31A2.93,2.93,0,0,0,119.89,289.85Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M123.63,285.52a1,1,0,0,1,.5.22,1.3,1.3,0,0,1,.34.51,2.92,2.92,0,0,1,.13.81,5.59,5.59,0,0,1-.07,1.11,5.42,5.42,0,0,1-.34,1.34,1.91,1.91,0,0,1-.51.77l.18,2.66v.12a.38.38,0,0,1-.06.16s0,.07-.08.07l-.61-.08a.13.13,0,0,1-.11-.12.69.69,0,0,1,0-.2l-.16-2.39-.42-.05-.34,2.32a.52.52,0,0,1-.06.2c0,.06-.07.09-.1.08l-.59-.07s0,0-.07-.1a.49.49,0,0,1,0-.21l1-7a.59.59,0,0,1,.06-.2c0-.05.07-.08.1-.08Zm-1,3.23.51.07a.37.37,0,0,0,.33-.14,1.11,1.11,0,0,0,.22-.61,1.27,1.27,0,0,0,0-.65.35.35,0,0,0-.29-.21l-.51-.07Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M124.75,293.42a.12.12,0,0,1-.07-.1.48.48,0,0,1,0-.21l1-7a.93.93,0,0,1,.07-.2c0-.05.07-.08.1-.07l1.44.18a.69.69,0,0,1,.48.27,1.37,1.37,0,0,1,.25.56,2.93,2.93,0,0,1,.08.75,7.35,7.35,0,0,1-.07.82,3.19,3.19,0,0,1-.11.54,4,4,0,0,1-.12.4c0,.11-.09.19-.13.26l-.09.15a2,2,0,0,1,.15.71,7.05,7.05,0,0,1-.07.94,6.25,6.25,0,0,1-.18.86,3.27,3.27,0,0,1-.29.73,1.32,1.32,0,0,1-.4.49.63.63,0,0,1-.51.14Zm1-1.6.74.1c.09,0,.17-.05.24-.17a1.24,1.24,0,0,0,.15-.46,1.26,1.26,0,0,0,0-.48c0-.14-.1-.21-.19-.22l-.74-.09Zm1.49-3.49a1.17,1.17,0,0,0,0-.46c0-.12-.09-.19-.18-.2l-.7-.09-.18,1.24.7.09c.09,0,.16,0,.23-.14A1.44,1.44,0,0,0,127.2,288.33Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M128.27,293.87s-.05,0-.07-.1a.49.49,0,0,1,0-.21l1-7a.59.59,0,0,1,.06-.2c0-.05.07-.08.1-.07l.59.07a.12.12,0,0,1,.07.1.48.48,0,0,1,0,.21l-1,7a.86.86,0,0,1-.07.21c0,.05-.07.08-.1.07Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M132.37,286.64a.83.83,0,0,1,.53.29,1.72,1.72,0,0,1,.35.69,3.94,3.94,0,0,1,.16,1,8.93,8.93,0,0,1-.06,1.24q0,.24-.06.42c0,.13,0,.25,0,.37s0,.23-.06.36a3.55,3.55,0,0,1-.06.4,7.41,7.41,0,0,1-.29,1.21,4.66,4.66,0,0,1-.43.92,1.94,1.94,0,0,1-.52.57.81.81,0,0,1-.59.15l-1.22-.15s0,0-.07-.1a.7.7,0,0,1,0-.21l1-7a.59.59,0,0,1,.06-.2c0-.05.07-.08.1-.07Zm.15,3.06c.11-.83,0-1.28-.42-1.32l-.46-.06-.6,4.13.48.06c.37.05.63-.34.77-1.18l.06-.42.06-.4.06-.38C132.49,290,132.5,289.86,132.52,289.7Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M136,287.1a.79.79,0,0,1,.53.29,1.75,1.75,0,0,1,.35.68,4.1,4.1,0,0,1,.16,1,8.93,8.93,0,0,1-.06,1.24c0,.16,0,.29-.06.42s0,.25,0,.37,0,.23-.05.35,0,.26-.07.41a7.67,7.67,0,0,1-.29,1.21,4.66,4.66,0,0,1-.43.92,1.94,1.94,0,0,1-.52.57.81.81,0,0,1-.59.15l-1.22-.15s0,0-.07-.1a.49.49,0,0,1,0-.21l1-7a.59.59,0,0,1,.06-.2s.07-.08.1-.07Zm.15,3.06c.11-.83,0-1.28-.42-1.33l-.46-.05-.6,4.13.48.06c.37,0,.63-.34.77-1.18l.06-.43L136,291l.06-.38C136.08,290.46,136.09,290.32,136.11,290.16Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M139.62,293.55s0,0,.07.09a.49.49,0,0,1,0,.21l-.16,1.16a.93.93,0,0,1-.07.2.14.14,0,0,1-.1.08l-2.13-.28s0,0-.07-.1a.67.67,0,0,1,0-.2l1-7a.52.52,0,0,1,.06-.2c0-.06.07-.08.1-.08l2.09.27s.06,0,.08.1a.74.74,0,0,1,0,.21l-.17,1.15a.52.52,0,0,1-.06.2c0,.06-.07.08-.1.08l-1.38-.18-.17,1.18,1.28.16a.12.12,0,0,1,.07.1.48.48,0,0,1,0,.21l-.17,1.15a.65.65,0,0,1-.06.21c0,.05-.07.08-.1.07l-1.28-.16-.18,1.21Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M142.39,295.67s-.08,0-.1-.11a.41.41,0,0,1,0-.16l-.49-3.85-.53,3.67a.77.77,0,0,1-.07.2c0,.06-.07.09-.1.08l-.59-.07s-.05,0-.07-.1a.7.7,0,0,1,0-.21l1-7a.59.59,0,0,1,.06-.2c0-.05.07-.08.1-.07l.47.06s.09,0,.11.11,0,.12,0,.16l.48,3.85.54-3.68a.59.59,0,0,1,.06-.2c0-.05.07-.08.1-.07l.59.07s.06,0,.07.1a.48.48,0,0,1,0,.21l-1,7a.65.65,0,0,1-.06.21s-.07.08-.1.07Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M146.72,296.22s-.06,0-.08-.09a.74.74,0,0,1,0-.21l.16-1.11-1.41-.18s-.06,0-.08-.1a.74.74,0,0,1,0-.21l.17-1.15a1.4,1.4,0,0,1,.12-.47l1.94-3.92a.42.42,0,0,1,.1-.15.14.14,0,0,1,.09,0l.68.09s.06,0,.07.1a.48.48,0,0,1,0,.21l-.61,4.17.39.05a.12.12,0,0,1,.07.1.48.48,0,0,1,0,.21l-.17,1.15a.48.48,0,0,1-.07.21c0,.05-.06.08-.09.07l-.39,0-.16,1.11a.52.52,0,0,1-.07.2c0,.06-.06.08-.1.08Zm.35-3.15.3-2-1,1.92Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M151.09,288.92a.79.79,0,0,1,.54.31,1.88,1.88,0,0,1,.31.7,4.59,4.59,0,0,1,.1,1A11.23,11.23,0,0,1,152,292c0,.32-.09.64-.14,1s-.1.66-.14,1a11.3,11.3,0,0,1-.26,1.11,4.09,4.09,0,0,1-.38.91,1.84,1.84,0,0,1-.49.59.81.81,0,0,1-.61.17.79.79,0,0,1-.55-.31,1.81,1.81,0,0,1-.31-.7,4.59,4.59,0,0,1-.1-1,11.23,11.23,0,0,1,.07-1.13c0-.3.08-.62.13-1s.1-.67.16-1a9,9,0,0,1,.25-1.11,4.09,4.09,0,0,1,.38-.91,1.84,1.84,0,0,1,.49-.59A.82.82,0,0,1,151.09,288.92Zm-.23,4.89c.1-.62.19-1.22.27-1.83,0-.18,0-.35,0-.5a2.55,2.55,0,0,0,0-.41.71.71,0,0,0-.11-.28.27.27,0,0,0-.21-.13.3.3,0,0,0-.24.07.7.7,0,0,0-.18.25,2.35,2.35,0,0,0-.14.38c0,.15-.07.32-.1.5q-.15.9-.27,1.83a4.77,4.77,0,0,0,0,.5,1.76,1.76,0,0,0,0,.41.66.66,0,0,0,.11.28.27.27,0,0,0,.21.13.3.3,0,0,0,.24-.07.7.7,0,0,0,.18-.25,1.68,1.68,0,0,0,.14-.38C150.8,294.16,150.83,294,150.86,293.81Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M155.51,289.6s.06,0,.07.09a.49.49,0,0,1,0,.21l-.17,1.16a.65.65,0,0,1-.06.21l-.09.16-.73,1.25a1.59,1.59,0,0,1,.46.81,3.34,3.34,0,0,1,0,1.39,3.93,3.93,0,0,1-.62,1.81,1.09,1.09,0,0,1-1.06.49.92.92,0,0,1-.55-.26,1.49,1.49,0,0,1-.35-.54,2.71,2.71,0,0,1-.16-.72,3.56,3.56,0,0,1,0-.8.69.69,0,0,1,0-.17s.05-.06.08-.06l.57.07a.17.17,0,0,1,.13.12,2.17,2.17,0,0,0,.07.24.7.7,0,0,0,.13.24.32.32,0,0,0,.26.14.43.43,0,0,0,.38-.13.84.84,0,0,0,.22-.53.86.86,0,0,0-.06-.58.47.47,0,0,0-.33-.22l-.37,0a.12.12,0,0,1-.07-.1.48.48,0,0,1,0-.21l.14-.94a.65.65,0,0,1,.06-.21l.09-.17.64-1.1-1.17-.15s-.06,0-.07-.1a.48.48,0,0,1,0-.21l.17-1.15a.4.4,0,0,1,.07-.2c0-.06.06-.08.09-.08Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M160.1,290.18s.06,0,.08.1a.74.74,0,0,1,0,.21l-.17,1.15a.58.58,0,0,1-.06.21s-.07.08-.1.07l-1.34-.17-.22,1.49,1.25.16s.06,0,.08.1a.74.74,0,0,1,0,.21l-.17,1.15a.65.65,0,0,1-.06.21c0,.05-.07.08-.1.07L158,295l-.34,2.35a.52.52,0,0,1-.07.2c0,.06-.06.08-.1.08l-.59-.08s-.05,0-.07-.09a.54.54,0,0,1,0-.22l1-7a.52.52,0,0,1,.06-.2c0-.06.07-.08.1-.08Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M160.47,293.12a8.91,8.91,0,0,1,.27-1.13,4.74,4.74,0,0,1,.41-.9,2.15,2.15,0,0,1,.53-.58.91.91,0,0,1,.62-.16.86.86,0,0,1,.55.31,2,2,0,0,1,.34.69,3.93,3.93,0,0,1,.13,1,6.63,6.63,0,0,1,0,1.16c0,.31-.09.64-.14,1s-.1.66-.14,1a8.64,8.64,0,0,1-.28,1.14,4.19,4.19,0,0,1-.41.9,1.88,1.88,0,0,1-.53.58.84.84,0,0,1-.61.15.89.89,0,0,1-.56-.3,1.93,1.93,0,0,1-.33-.69,3.9,3.9,0,0,1-.14-1,7.71,7.71,0,0,1,.06-1.16c0-.3.08-.62.13-1S160.42,293.43,160.47,293.12Zm1.69,2.13c0-.13.05-.27.08-.43s0-.32.07-.49.05-.33.07-.48,0-.3.05-.42a4.77,4.77,0,0,0,0-.51,2.42,2.42,0,0,0-.05-.41.78.78,0,0,0-.14-.29.34.34,0,0,0-.23-.13.32.32,0,0,0-.25.07.83.83,0,0,0-.21.24,1.76,1.76,0,0,0-.17.39,3.19,3.19,0,0,0-.12.49c0,.12,0,.26-.07.42s-.05.31-.08.48l-.06.49c0,.16,0,.31-.06.44a2.73,2.73,0,0,0,0,.92c0,.25.17.39.36.41s.34-.08.47-.3A3,3,0,0,0,162.16,295.25Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M165.89,290.92a1,1,0,0,1,.51.22,1.19,1.19,0,0,1,.33.51,2.64,2.64,0,0,1,.13.81,5.59,5.59,0,0,1-.07,1.11,6,6,0,0,1-.33,1.34,2,2,0,0,1-.52.77l.18,2.66a.48.48,0,0,1,0,.12.43.43,0,0,1-.06.17.1.1,0,0,1-.07.06l-.62-.08a.14.14,0,0,1-.11-.11.76.76,0,0,1,0-.21l-.16-2.39-.41,0-.34,2.33a.59.59,0,0,1-.07.2c0,.05-.06.08-.1.07l-.58-.07s-.06,0-.08-.1a.74.74,0,0,1,0-.21l1-7a.48.48,0,0,1,.07-.21s.06-.08.09-.07Zm-1,3.23.51.07a.39.39,0,0,0,.34-.14,1.12,1.12,0,0,0,.21-.61,1.08,1.08,0,0,0,0-.65.35.35,0,0,0-.29-.21l-.5-.07Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M167,298.82s-.06,0-.07-.1a.48.48,0,0,1,0-.21l1-7a.65.65,0,0,1,.07-.21s.06-.08.1-.07l1.44.18a.73.73,0,0,1,.48.27,1.37,1.37,0,0,1,.25.56,3,3,0,0,1,.07.75,5.55,5.55,0,0,1-.06.82,5.33,5.33,0,0,1-.11.55,2.54,2.54,0,0,1-.13.39,1.29,1.29,0,0,1-.12.26l-.09.15a1.8,1.8,0,0,1,.14.71,5.5,5.5,0,0,1-.06.94c-.05.3-.11.58-.18.86a3.83,3.83,0,0,1-.29.73,1.47,1.47,0,0,1-.4.5.67.67,0,0,1-.51.14Zm.95-1.6.74.1c.09,0,.17,0,.25-.16a1.37,1.37,0,0,0,.15-.47,1.25,1.25,0,0,0,0-.48c0-.13-.09-.21-.18-.22l-.74-.09Zm1.5-3.49a1.4,1.4,0,0,0,0-.46c0-.12-.09-.19-.18-.2l-.7-.09-.18,1.24.7.09a.22.22,0,0,0,.22-.14A1.14,1.14,0,0,0,169.47,293.73Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M170.55,299.27s-.06,0-.07-.1a.48.48,0,0,1,0-.21l1-7a.52.52,0,0,1,.07-.2c0-.06.06-.08.1-.08l.58.08s.06,0,.08.09a.74.74,0,0,1,0,.21l-1,7a.4.4,0,0,1-.07.2c0,.06-.06.08-.09.08Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M174.66,292a.82.82,0,0,1,.53.3,1.75,1.75,0,0,1,.35.68,4.1,4.1,0,0,1,.16,1,9,9,0,0,1-.06,1.24q0,.23-.06.42c0,.13,0,.25-.05.36s0,.24-.05.36,0,.26-.07.4a7.54,7.54,0,0,1-.29,1.22,4.94,4.94,0,0,1-.43.92,1.94,1.94,0,0,1-.52.57.86.86,0,0,1-.59.15l-1.22-.16s-.05,0-.07-.09a.5.5,0,0,1,0-.21l1-7a.52.52,0,0,1,.06-.2c0-.06.07-.08.1-.08Zm.15,3.07c.11-.84,0-1.28-.42-1.33l-.46-.06-.6,4.13.48.07c.37,0,.63-.35.77-1.18l.06-.43.06-.39.06-.39C174.78,295.4,174.79,295.26,174.81,295.11Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M178.25,292.5a.87.87,0,0,1,.53.3,1.75,1.75,0,0,1,.35.68,3.63,3.63,0,0,1,.15,1,6.71,6.71,0,0,1-.06,1.24c0,.15,0,.29-.05.42s0,.25,0,.36l-.06.36c0,.12,0,.26-.06.4a6.81,6.81,0,0,1-.3,1.22,4.38,4.38,0,0,1-.42.92,1.94,1.94,0,0,1-.52.57.93.93,0,0,1-.6.15L176,300s-.06,0-.07-.1a.48.48,0,0,1,0-.21l1-7a.77.77,0,0,1,.07-.2c0-.06.07-.08.1-.08Zm.15,3.07c.1-.84,0-1.28-.43-1.33l-.46-.06-.6,4.13.48.06c.38.05.64-.34.77-1.17,0-.15.05-.3.07-.43l.06-.39c0-.13,0-.26.05-.39S178.38,295.72,178.4,295.57Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M181.91,299s.05,0,.07.1a.49.49,0,0,1,0,.21l-.16,1.15a.77.77,0,0,1-.07.2c0,.06-.07.09-.1.08l-2.12-.27s-.06,0-.08-.1a.74.74,0,0,1,0-.21l1-7a.48.48,0,0,1,.07-.21c0-.05.06-.08.09-.07l2.09.27s.06,0,.08.09a.8.8,0,0,1,0,.22l-.17,1.15a.59.59,0,0,1-.06.2.14.14,0,0,1-.1.08l-1.38-.18-.17,1.17,1.28.17s.06,0,.07.1a.48.48,0,0,1,0,.21l-.17,1.15a.52.52,0,0,1-.06.2c0,.06-.07.08-.1.08l-1.29-.17-.17,1.22Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M184.67,301.08a.15.15,0,0,1-.11-.12.73.73,0,0,1,0-.16L184,297l-.53,3.68a.4.4,0,0,1-.07.2c0,.06-.06.08-.09.08l-.59-.08s-.06,0-.07-.1a.48.48,0,0,1,0-.21l1-7a.52.52,0,0,1,.07-.2c0-.06.06-.08.1-.08l.46.06a.14.14,0,0,1,.11.11.9.9,0,0,1,0,.16l.49,3.85.53-3.67a.4.4,0,0,1,.07-.2c0-.06.06-.08.09-.08l.59.07s.06,0,.08.1a.74.74,0,0,1,0,.21l-1,7a.4.4,0,0,1-.07.2c0,.06-.06.08-.09.08Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M189,301.63a.12.12,0,0,1-.07-.1.48.48,0,0,1,0-.21l.16-1.11-1.41-.18s-.06,0-.07-.1a.48.48,0,0,1,0-.21l.17-1.15a1.61,1.61,0,0,1,.12-.46l1.94-3.93a.42.42,0,0,1,.1-.15.11.11,0,0,1,.1,0l.67.08s.06,0,.08.1a.74.74,0,0,1,0,.21l-.6,4.18.38.05s.06,0,.07.09a.53.53,0,0,1,0,.22l-.17,1.15a.52.52,0,0,1-.06.2s-.07.08-.1.08l-.39-.05-.16,1.11a.43.43,0,0,1-.07.2c0,.05-.06.08-.09.07Zm.36-3.16.29-2-.95,1.92Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M193.37,294.33a.76.76,0,0,1,.54.31,1.83,1.83,0,0,1,.31.69,4.07,4.07,0,0,1,.1,1,8.94,8.94,0,0,1-.07,1.14c0,.31-.08.64-.13,1s-.1.66-.15.95a8.77,8.77,0,0,1-.26,1.12,4.53,4.53,0,0,1-.37.91,2,2,0,0,1-.5.59.79.79,0,0,1-.61.16.76.76,0,0,1-.55-.31,1.83,1.83,0,0,1-.3-.69,4.63,4.63,0,0,1-.11-1,9,9,0,0,1,.08-1.14c0-.3.08-.62.13-1s.1-.66.15-1a9,9,0,0,1,.25-1.11,4.53,4.53,0,0,1,.38-.91,2,2,0,0,1,.49-.59A.82.82,0,0,1,193.37,294.33Zm-.23,4.88c.11-.61.19-1.22.27-1.82,0-.18,0-.35,0-.51a1.67,1.67,0,0,0,0-.4.7.7,0,0,0-.11-.29.28.28,0,0,0-.21-.12.26.26,0,0,0-.23.06.86.86,0,0,0-.19.25,2.49,2.49,0,0,0-.14.39,4.9,4.9,0,0,0-.1.5c-.1.59-.19,1.2-.27,1.82,0,.18,0,.35,0,.5a1.73,1.73,0,0,0,0,.41.7.7,0,0,0,.11.29.28.28,0,0,0,.21.12.29.29,0,0,0,.24-.06.7.7,0,0,0,.18-.25,1.77,1.77,0,0,0,.14-.39A3.15,3.15,0,0,0,193.14,299.21Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M197.78,295s.05,0,.07.1a.7.7,0,0,1,0,.21l-.17,1.15a.65.65,0,0,1-.07.21.79.79,0,0,1-.08.16l-.73,1.26a1.52,1.52,0,0,1,.46.8,3.57,3.57,0,0,1,0,1.4,3.84,3.84,0,0,1-.62,1.8,1.13,1.13,0,0,1-1.07.5,1,1,0,0,1-.54-.26,1.48,1.48,0,0,1-.35-.55,2.54,2.54,0,0,1-.16-.72,3.07,3.07,0,0,1,0-.8.42.42,0,0,1,.05-.17s0-.06.08-.06l.57.08q.09,0,.12.12c0,.07.05.15.08.23a.85.85,0,0,0,.13.25.34.34,0,0,0,.26.13.45.45,0,0,0,.38-.12.94.94,0,0,0,.22-.54.84.84,0,0,0-.06-.57.44.44,0,0,0-.33-.22l-.37-.05s-.06,0-.08-.1a.74.74,0,0,1,0-.21l.13-.93a.81.81,0,0,1,.07-.22l.09-.16.64-1.11-1.17-.14a.12.12,0,0,1-.07-.1.48.48,0,0,1,0-.21l.17-1.16a.59.59,0,0,1,.06-.2c0-.05.07-.08.1-.07Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M202.36,295.59s.06,0,.08.09a.81.81,0,0,1,0,.22l-.17,1.15a.59.59,0,0,1-.06.2c0,.05-.07.08-.1.08l-1.34-.18-.22,1.49,1.25.16s.06,0,.08.1a.74.74,0,0,1,0,.21l-.17,1.16a.59.59,0,0,1-.06.2s-.07.08-.1.07l-1.25-.16-.34,2.35a.77.77,0,0,1-.07.2c0,.06-.06.08-.1.08l-.59-.08s0,0-.07-.09a.49.49,0,0,1,0-.21l1-7a.59.59,0,0,1,.06-.2c0-.06.07-.08.1-.08Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M202.76,298.53a7.18,7.18,0,0,1,.28-1.13,3.78,3.78,0,0,1,.41-.9,2,2,0,0,1,.52-.58.87.87,0,0,1,.62-.16.84.84,0,0,1,.55.31,1.89,1.89,0,0,1,.34.68,4.06,4.06,0,0,1,.14,1,7.85,7.85,0,0,1-.06,1.16c0,.31-.08.63-.13,1s-.1.66-.15.95A7.6,7.6,0,0,1,205,302a3.94,3.94,0,0,1-.41.9,1.85,1.85,0,0,1-.52.58.88.88,0,0,1-1.17-.15,1.86,1.86,0,0,1-.34-.69,4.52,4.52,0,0,1-.14-1,7.91,7.91,0,0,1,.06-1.17c0-.29.08-.61.13-.95S202.71,298.84,202.76,298.53Zm1.7,2.13c0-.13,0-.27.07-.43s.05-.32.08-.49l.06-.49c0-.15,0-.29.05-.42a3,3,0,0,0,0-.5,1.64,1.64,0,0,0-.05-.41.71.71,0,0,0-.13-.29.32.32,0,0,0-.23-.13.36.36,0,0,0-.26.07.63.63,0,0,0-.21.24,2.7,2.7,0,0,0-.17.38c0,.15-.08.32-.11.5s-.05.26-.08.42,0,.31-.07.48-.05.33-.07.49,0,.3-.05.44a3,3,0,0,0,0,.92c.06.25.18.39.37.41a.47.47,0,0,0,.46-.31A2.83,2.83,0,0,0,204.46,300.66Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M208.17,296.33a.91.91,0,0,1,.5.22,1.13,1.13,0,0,1,.33.5,2.62,2.62,0,0,1,.14.81,6.52,6.52,0,0,1-.07,1.12,5.54,5.54,0,0,1-.34,1.34,2,2,0,0,1-.51.77l.18,2.65v.12a.43.43,0,0,1-.06.17c0,.05-.05.06-.08.06l-.61-.08c-.06,0-.1,0-.11-.11a.75.75,0,0,1,0-.2l-.16-2.39-.42-.06-.34,2.33a.52.52,0,0,1-.06.2c0,.06-.07.08-.1.08l-.59-.08s-.05,0-.07-.09a.79.79,0,0,1,0-.22l1-7a.52.52,0,0,1,.06-.2c0-.06.07-.08.1-.08Zm-1,3.23.51.06a.37.37,0,0,0,.33-.13,1.68,1.68,0,0,0,.19-1.26.38.38,0,0,0-.29-.22l-.51-.06Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M209.29,304.22s-.06,0-.07-.09a.48.48,0,0,1,0-.21l1-7a.77.77,0,0,1,.07-.2c0-.06.06-.08.1-.08l1.44.19a.68.68,0,0,1,.48.26,1.41,1.41,0,0,1,.25.57,2.52,2.52,0,0,1,.07.75,5.55,5.55,0,0,1-.06.82,4.63,4.63,0,0,1-.11.54,2.35,2.35,0,0,1-.13.4,2.17,2.17,0,0,1-.12.26l-.09.14a1.85,1.85,0,0,1,.14.72,5.39,5.39,0,0,1-.06.93,6.09,6.09,0,0,1-.18.87,3.27,3.27,0,0,1-.29.73,1.53,1.53,0,0,1-.4.49.67.67,0,0,1-.51.14Zm1-1.59.75.09c.08,0,.16,0,.24-.16a1.31,1.31,0,0,0,.15-.46,1.5,1.5,0,0,0,0-.48c0-.14-.1-.21-.19-.22l-.74-.1Zm1.5-3.5a1.17,1.17,0,0,0,0-.46c0-.12-.09-.18-.18-.19l-.7-.09-.18,1.24.7.09c.09,0,.16,0,.23-.14A1.43,1.43,0,0,0,211.74,299.13Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M212.83,304.68s-.06,0-.08-.1a.74.74,0,0,1,0-.21l1-7a.43.43,0,0,1,.07-.2c0-.05.06-.08.09-.07l.59.07s.06,0,.07.1a.48.48,0,0,1,0,.21l-1,7a.52.52,0,0,1-.07.2c0,.06-.06.09-.1.08Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M216.92,297.45a.81.81,0,0,1,.53.29,1.89,1.89,0,0,1,.35.68,4.13,4.13,0,0,1,.15,1,6.68,6.68,0,0,1-.06,1.24c0,.15,0,.29,0,.42l-.06.37c0,.11,0,.23-.05.35s0,.26-.06.41a7.64,7.64,0,0,1-.3,1.21,4.15,4.15,0,0,1-.42.92,2,2,0,0,1-.53.57.8.8,0,0,1-.59.15l-1.21-.15a.12.12,0,0,1-.07-.1.48.48,0,0,1,0-.21l1-7a.59.59,0,0,1,.07-.2c0-.05.06-.08.1-.07Zm.15,3.06c.1-.83,0-1.28-.43-1.33l-.46-.06-.6,4.14.48.06c.38.05.64-.35.77-1.18,0-.15,0-.29.07-.43l.06-.39c0-.12,0-.25,0-.38S217.05,300.66,217.07,300.51Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M220.51,297.91a.81.81,0,0,1,.54.29,2.06,2.06,0,0,1,.35.68,4.69,4.69,0,0,1,.15,1,6.68,6.68,0,0,1-.06,1.24l-.06.42c0,.13,0,.25-.05.36s0,.24,0,.36l-.06.4a8.71,8.71,0,0,1-.3,1.22,4.15,4.15,0,0,1-.42.92,2,2,0,0,1-.53.57.81.81,0,0,1-.59.15l-1.21-.16s-.06,0-.08-.09a.74.74,0,0,1,0-.21l1-7a.4.4,0,0,1,.07-.2c0-.06.06-.08.1-.08Zm.16,3.06c.1-.83,0-1.28-.43-1.33l-.46-.06-.6,4.14.48.06c.38,0,.63-.35.77-1.18,0-.15,0-.29.07-.43s0-.26.05-.39l.06-.38C220.63,301.27,220.65,301.12,220.67,301Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M224.18,304.36s0,0,.07.09a.49.49,0,0,1,0,.21l-.16,1.16a.93.93,0,0,1-.07.2c0,.05-.06.08-.1.07l-2.13-.27s0,0-.07-.09a.74.74,0,0,1,0-.21l1-7a.4.4,0,0,1,.07-.2c0-.06.06-.08.09-.08l2.09.27s.06,0,.08.1a.74.74,0,0,1,0,.21l-.17,1.15a.52.52,0,0,1-.06.2c0,.06-.07.08-.1.08l-1.38-.18-.17,1.18,1.28.16a.12.12,0,0,1,.07.1.48.48,0,0,1,0,.21l-.17,1.15a.52.52,0,0,1-.06.2c0,.06-.07.08-.1.08l-1.29-.16-.17,1.21Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M226.94,306.48c-.05,0-.08,0-.11-.11a.69.69,0,0,1,0-.16l-.49-3.85-.54,3.67a.52.52,0,0,1-.06.2c0,.06-.07.08-.1.08l-.59-.08s-.06,0-.07-.09a.48.48,0,0,1,0-.21l1-7a.52.52,0,0,1,.06-.2c0-.06.07-.08.1-.08l.47.06c.05,0,.08.05.1.12a.41.41,0,0,1,0,.16l.49,3.85.53-3.68a.77.77,0,0,1,.07-.2.14.14,0,0,1,.1-.08l.59.08s0,0,.07.1a.48.48,0,0,1,0,.21l-1,7a.52.52,0,0,1-.06.2c0,.06-.07.08-.1.08Z"
+          style="fill: #37474f"
+        ></path>
+      </g>
+    </g>
+    <g id="freepik--error-403--inject-70">
+      <g id="freepik--404--inject-70">
+        <path
+          d="M142.21,105.27a1.09,1.09,0,0,0-.17-.13l-5.26-3V77.19a1.71,1.71,0,0,0-.41-1.27.64.64,0,0,0-.17-.13l-5.62-3.24a.75.75,0,0,0-.82,0L122,77.11a3.55,3.55,0,0,0-1.07.89,7.56,7.56,0,0,0-.85,1.65L104.56,118.6a10.66,10.66,0,0,0-.67,3.81v8.45a1.67,1.67,0,0,0,.42,1.27.7.7,0,0,0,.17.13l5.62,3.25a.75.75,0,0,0,.81-.06l10.67-6.16v1.63a1.69,1.69,0,0,0,.42,1.27l.16.13,5.63,3.25a.79.79,0,0,0,.82-.06l6.77-3.91a2.64,2.64,0,0,0,1-1.21,4.14,4.14,0,0,0,.41-1.75v-8.12l4.45-2.57a2.63,2.63,0,0,0,1-1.21,4,4,0,0,0,.41-1.75v-8.44A1.7,1.7,0,0,0,142.21,105.27Z"
+          style="fill: currentColor"
+        ></path>
+        <path
+          d="M126.47,81.24l0,.1a7.51,7.51,0,0,0-.79,1.55l-15.47,39a9.49,9.49,0,0,0-.46,1.6l-5.66-3.27a10.25,10.25,0,0,1,.45-1.58L120,79.65a7.74,7.74,0,0,1,.86-1.65,0,0,0,0,1,0,0Z"
+          style="opacity: 0.15"
+        ></path>
+        <path
+          d="M110,135.47c-.63-.37-5.32-3.08-5.55-3.2l-.17-.14a1.7,1.7,0,0,1-.42-1.28v-8.43a11.37,11.37,0,0,1,.22-2.22l5.62,3.25a11.3,11.3,0,0,0-.21,2.22v8.44a1.73,1.73,0,0,0,.41,1.27Z"
+          style="opacity: 0.30000000000000004"
+        ></path>
+        <polygon
+          points="127.47 98.5 127.47 113.15 122.73 110.42 127.47 98.5"
+          style="opacity: 0.30000000000000004"
+        ></polygon>
+        <polygon points="127.47 113.15 119.92 117.51 122.73 110.42 127.47 113.15" style="opacity: 0.4"></polygon>
+        <path
+          d="M127.62,135.44l.1.08-5.55-3.2a.43.43,0,0,1-.17-.13,1.67,1.67,0,0,1-.42-1.27v-1.63l5.63-3.25v8.12A1.74,1.74,0,0,0,127.62,135.44Z"
+          style="opacity: 0.30000000000000004"
+        ></path>
+        <path d="M142,105.11a.78.78,0,0,0-.74.09l-4.45,2.57v-5.66Z" style="opacity: 0.15"></path>
+        <path
+          d="M136.16,75.77a.79.79,0,0,0-.78.07l-7.81,4.51a3.76,3.76,0,0,0-1,.89L120.89,78a3.72,3.72,0,0,1,1-.88l7.82-4.51a.75.75,0,0,1,.82,0Z"
+          style="fill: #fff; opacity: 0.4"
+        ></path>
+        <path
+          d="M128.61,135.51a.77.77,0,0,1-1-.07,1.74,1.74,0,0,1-.41-1.28V126l-16.3,9.41a.74.74,0,0,1-1-.07,1.74,1.74,0,0,1-.41-1.28v-8.44a10.45,10.45,0,0,1,.67-3.81l15.47-39a7.24,7.24,0,0,1,.85-1.64,3.51,3.51,0,0,1,1.06-.89l7.81-4.51a.75.75,0,0,1,1,.07,1.71,1.71,0,0,1,.41,1.27v30.58l4.45-2.57a.76.76,0,0,1,1,.07,1.7,1.7,0,0,1,.41,1.28V115a4,4,0,0,1-.41,1.75,2.63,2.63,0,0,1-1,1.21l-4.45,2.57v8.12a4.14,4.14,0,0,1-.41,1.75,2.64,2.64,0,0,1-1,1.21Zm-1.14-22.36V98.5l-7.55,19Z"
+          style="fill: currentColor"
+        ></path>
+        <path
+          d="M181.49,70a34.85,34.85,0,0,0-1.06-7.63,11.8,11.8,0,0,0-2.74-5.31A6.76,6.76,0,0,0,176.28,56l-5.64-3.25a6.94,6.94,0,0,0-3.21-.91,12.68,12.68,0,0,0-6.67,2.1,24.42,24.42,0,0,0-6.67,5.6,32.84,32.84,0,0,0-4.63,7.38,38.69,38.69,0,0,0-2.75,8.47,55.19,55.19,0,0,0-1.06,8.85q-.1,3.5-.1,7.23c0,2.5,0,4.81.1,7a35.47,35.47,0,0,0,1.06,7.63,11.81,11.81,0,0,0,2.75,5.31,6.12,6.12,0,0,0,1.4,1.1c.94.56,5.18,3,5.72,3.31a7.11,7.11,0,0,0,3.13.86,12.68,12.68,0,0,0,6.67-2.1,24.46,24.46,0,0,0,6.68-5.6,33.57,33.57,0,0,0,4.63-7.38,38.67,38.67,0,0,0,2.74-8.47,54.08,54.08,0,0,0,1.06-8.85q.1-3.33.1-7.07T181.49,70Zm-20.44,28.3a22.2,22.2,0,0,1-.2-2.6q-.25-6.63,0-13.38a26.75,26.75,0,0,1,.36-3.88,17.86,17.86,0,0,1,.93-3.44,11.62,11.62,0,0,1,1.66-2.91,8.47,8.47,0,0,1,2.25-2q.16,1.17.24,2.58.21,6.48,0,13.38a29.35,29.35,0,0,1-.33,3.85,15.61,15.61,0,0,1-.93,3.45,11.91,11.91,0,0,1-1.69,2.92A8.75,8.75,0,0,1,161.05,98.32Z"
+          style="fill: currentColor"
+        ></path>
+        <path
+          d="M156.43,115.65c-.93-.53-4.7-2.7-5.57-3.22a6.65,6.65,0,0,1-1.4-1.1,11.81,11.81,0,0,1-2.75-5.31,35.47,35.47,0,0,1-1.06-7.63c-.06-2.14-.1-4.45-.1-7s0-4.91.1-7.23a55.06,55.06,0,0,1,1.06-8.85,38.81,38.81,0,0,1,1.75-6.06l5.62,3.25a39,39,0,0,0-1.74,6,53.12,53.12,0,0,0-1.06,8.86q-.1,3.48-.11,7.23c0,2.5,0,4.81.11,7a34.34,34.34,0,0,0,1.06,7.63,11.71,11.71,0,0,0,2.74,5.3A6.54,6.54,0,0,0,156.43,115.65Z"
+          style="opacity: 0.15"
+        ></path>
+        <path
+          d="M176.06,55.85a7.13,7.13,0,0,0-3-.79q-2.79-.14-6.68,2.1a24.57,24.57,0,0,0-6.67,5.61,33.21,33.21,0,0,0-4.63,7.36c-.19.41-.36.81-.53,1.23l-.47,1.19h0l-5.62-3.25c.13-.36.27-.71.41-1.06s.38-.9.59-1.35a33.3,33.3,0,0,1,4.62-7.38,24.76,24.76,0,0,1,6.68-5.6,12.59,12.59,0,0,1,6.67-2.1,6.9,6.9,0,0,1,3.21.91Z"
+          style="fill: #fff; opacity: 0.4"
+        ></path>
+        <path
+          d="M171.92,89.32a29.32,29.32,0,0,1-.34,3.86,15.52,15.52,0,0,1-.92,3.44A12,12,0,0,1,170,98l-5.62-3.25a12.61,12.61,0,0,0,.63-1.34,15.77,15.77,0,0,0,.94-3.45,29.35,29.35,0,0,0,.33-3.85q.21-6.89,0-13.38c0-.94-.13-1.8-.24-2.59l.33-.21a4.35,4.35,0,0,1,2.59-.78,2.34,2.34,0,0,1,1.66,1,6.11,6.11,0,0,1,.9,2.38,26.61,26.61,0,0,1,.39,3.45Q172.12,82.43,171.92,89.32Z"
+          style="opacity: 0.30000000000000004"
+        ></path>
+        <path
+          d="M170,98a10.51,10.51,0,0,1-1,1.58,8.86,8.86,0,0,1-2.59,2.21,4.38,4.38,0,0,1-2.58.77,2.33,2.33,0,0,1-1.68-1,5.76,5.76,0,0,1-.93-2.37c-.06-.28-.1-.57-.14-.87a8.6,8.6,0,0,0,2.29-2,11.4,11.4,0,0,0,1-1.58Z"
+          style="opacity: 0.4"
+        ></path>
+        <path
+          d="M166.38,57.16q3.88-2.25,6.68-2.1a6.71,6.71,0,0,1,4.63,2,11.8,11.8,0,0,1,2.74,5.31A34.85,34.85,0,0,1,181.49,70q.1,3.36.1,7.11t-.1,7.07a54.08,54.08,0,0,1-1.06,8.85,38.67,38.67,0,0,1-2.74,8.47,33.57,33.57,0,0,1-4.63,7.38,24.46,24.46,0,0,1-6.68,5.6,12.68,12.68,0,0,1-6.67,2.1,6.68,6.68,0,0,1-4.63-2,11.71,11.71,0,0,1-2.74-5.3,34.94,34.94,0,0,1-1.06-7.63c-.07-2.14-.1-4.45-.1-7s0-4.9.1-7.23a54,54,0,0,1,1.06-8.85,38.93,38.93,0,0,1,2.74-8.48,33.5,33.5,0,0,1,4.63-7.37A24.57,24.57,0,0,1,166.38,57.16Zm5.54,32.16q.21-6.88,0-13.38a26.64,26.64,0,0,0-.39-3.44,6.17,6.17,0,0,0-.9-2.38,2.31,2.31,0,0,0-1.66-1,4.44,4.44,0,0,0-2.59.78,9,9,0,0,0-2.58,2.21A11.62,11.62,0,0,0,162.14,75a17.86,17.86,0,0,0-.93,3.44,26.75,26.75,0,0,0-.36,3.88q-.25,6.75,0,13.38a21.32,21.32,0,0,0,.34,3.46,5.52,5.52,0,0,0,.93,2.37,2.31,2.31,0,0,0,1.68,1,4.38,4.38,0,0,0,2.58-.77A9,9,0,0,0,169,99.55a11.88,11.88,0,0,0,1.68-2.92,15.76,15.76,0,0,0,.93-3.45A31.14,31.14,0,0,0,171.92,89.32Z"
+          style="fill: currentColor"
+        ></path>
+        <path
+          d="M219.68,56a6.27,6.27,0,0,0-1.16-.85,6.56,6.56,0,0,0-.76-.35,6,6,0,0,1,.58.25l-4.27-2.48h0l5.3-11.28c.21-.44.43-1,.66-1.57a4.82,4.82,0,0,0,.36-1.77V29.59a1.68,1.68,0,0,0-.41-1.26.91.91,0,0,0-.24-.16h0L214.25,25a.81.81,0,0,0-.79.07L189,39.14a2.31,2.31,0,0,0-.83,1,1.49,1.49,0,0,0-.14.24,4.17,4.17,0,0,0-.41,1.74V50.4a1.66,1.66,0,0,0,.41,1.25,1.46,1.46,0,0,0,.21.16c.19.09,4.54,2.62,5.41,3.12,0,0-.05,0-.06-.06h0a.75.75,0,0,0,1,.07l3.61-2.09L197,55.57a17.85,17.85,0,0,0-.71,1.67,3.17,3.17,0,0,0-.14.4c0,.13-.08.26-.11.4a.11.11,0,0,1,0,.05,1.9,1.9,0,0,0,0,.25s0,0,0,.08a3.1,3.1,0,0,0-.05.6v6.76a1.73,1.73,0,0,0,.4,1.26,1.43,1.43,0,0,0,.22.15L202,70.34l-.08-.06a.75.75,0,0,0,.94,0l4.23-2.45h0a7.94,7.94,0,0,1-1.52,3.72,12.92,12.92,0,0,1-4.06,3.6,5.83,5.83,0,0,1-3.13,1.07,5.76,5.76,0,0,1-.66-.1h0l-2.44-1.41a1,1,0,0,0-.34-.11,2,2,0,0,0-1.23.36l-6.44,3.72a2.18,2.18,0,0,0-.79,1,.49.49,0,0,0,0,.11h0a4.15,4.15,0,0,0-.22.65,2.88,2.88,0,0,0-.07.65,12.08,12.08,0,0,0,1.09,5.06,7.11,7.11,0,0,0,3,3.28c.82.46,4.08,2.38,5.34,3.09-.18-.11-.34-.24-.5-.36a6,6,0,0,0,.72.48,7.9,7.9,0,0,0,4.77.78A17.12,17.12,0,0,0,207.06,91a29.39,29.39,0,0,0,15.12-26.58C222.18,60.32,221.35,57.52,219.68,56Z"
+          style="fill: currentColor"
+        ></path>
+        <path
+          d="M188.18,40.22a.64.64,0,0,0,0-.07l-.13.25a4,4,0,0,0-.41,1.74v8.32a1.63,1.63,0,0,0,.41,1.26.7.7,0,0,0,.2.15L193.68,55a.12.12,0,0,0-.06-.06h0a1.65,1.65,0,0,1-.41-1.26V45.34a3.87,3.87,0,0,1,.41-1.72,3,3,0,0,1,.28-.46c-.06.09-.13.17-.19.28Z"
+          style="opacity: 0.15"
+        ></path>
+        <path
+          d="M201.46,62.06l-5.56-3.21c0,.06,0,.11,0,.17v6.76a1.73,1.73,0,0,0,.4,1.26,1.43,1.43,0,0,0,.22.15c.21.11,4.83,2.78,5.46,3.15l-.07-.07,0,0a1.65,1.65,0,0,1-.41-1.24V62.23S201.46,62.12,201.46,62.06Z"
+          style="opacity: 0.15"
+        ></path>
+        <path
+          d="M201.8,60.45c.24-.61.48-1.16.72-1.67l5.41-11.54-9.72,5.62L197,55.57c-.24.5-.48,1-.71,1.67a3,3,0,0,0-.14.39c0,.14-.08.26-.11.4v.06a2,2,0,0,1,0,.24.19.19,0,0,1,0,.08,2.25,2.25,0,0,0,0,.44l5.56,3.21A5.05,5.05,0,0,1,201.8,60.45Z"
+          style="opacity: 0.30000000000000004"
+        ></path>
+        <path
+          d="M186.45,79.66s0,.07,0,.11h0a3.41,3.41,0,0,0-.22.66,3,3,0,0,0-.08.64,12.13,12.13,0,0,0,1.1,5.07,7,7,0,0,0,3,3.27l5.33,3.1a.45.45,0,0,1-.1-.09,7.07,7.07,0,0,1-2.66-3.06,12,12,0,0,1-1.1-5.07,3.33,3.33,0,0,1,.33-1.41,3,3,0,0,1,.27-.44l-5.57-3.2A2.77,2.77,0,0,0,186.45,79.66Z"
+          style="opacity: 0.15"
+        ></path>
+        <path
+          d="M197.71,76.16h0l-2.44-1.42a1.13,1.13,0,0,0-.34-.1,2.08,2.08,0,0,0-1.23.35l-6.44,3.73a1.76,1.76,0,0,0-.52.53l5.57,3.2a1.9,1.9,0,0,1,.53-.53l6.43-3.71c.71-.41,1.26-.48,1.63-.19l-3.17-1.85Z"
+          style="opacity: 0.30000000000000004"
+        ></path>
+        <path
+          d="M203.92,79.47a5.75,5.75,0,0,0,3.15-1.07,12.88,12.88,0,0,0,4.05-3.6,8.13,8.13,0,0,0,1.62-4.94c0-1.82-.55-2.86-1.62-3.08a6,6,0,0,0-4.05,1.1,7.85,7.85,0,0,1-1.52,3.71,12.88,12.88,0,0,1-4.05,3.6,5.71,5.71,0,0,1-3.14,1.06,4.25,4.25,0,0,1-.65-.09L200.88,78l1.26.89A3.75,3.75,0,0,0,203.92,79.47Z"
+          style="opacity: 0.4"
+        ></path>
+        <path
+          d="M214.07,52.55s3.08,1.8,4.27,2.48a.46.46,0,0,0-.14-.05.34.34,0,0,0-.15-.07,7.72,7.72,0,0,0-4.86-.48Z"
+          style="fill: #fff; opacity: 0.4"
+        ></path>
+        <path
+          d="M216.76,26.52l-2.52-1.47a.81.81,0,0,0-.79.07L189,39.21a2.36,2.36,0,0,0-.84.94.64.64,0,0,1,0,.07l5.55,3.22c.06-.11.13-.19.19-.28a3,3,0,0,1,.19-.3,1.79,1.79,0,0,1,.49-.43L219,28.34a.82.82,0,0,1,.71-.11Z"
+          style="fill: #fff; opacity: 0.4"
+        ></path>
+        <path
+          d="M219,28.26a.75.75,0,0,1,1,.07,1.68,1.68,0,0,1,.41,1.26v8.34A4.82,4.82,0,0,1,220,39.7c-.23.61-.45,1.13-.66,1.57l-5.3,11.28-.88,1.88a7.58,7.58,0,0,1,5.33.71,6.63,6.63,0,0,1,1.16.85c1.67,1.53,2.5,4.33,2.5,8.42A29.39,29.39,0,0,1,207.06,91a17.12,17.12,0,0,1-6.51,2.42,7.9,7.9,0,0,1-4.77-.78,7.12,7.12,0,0,1-3-3.27,12.2,12.2,0,0,1-1.1-5.07,3.3,3.3,0,0,1,.33-1.41,2.07,2.07,0,0,1,.8-1l6.43-3.72c.72-.41,1.26-.48,1.64-.2s.79.58,1.25.89a3.68,3.68,0,0,0,1.78.58,5.86,5.86,0,0,0,3.14-1.06,13.09,13.09,0,0,0,4.06-3.61,8,8,0,0,0,1.61-4.93c0-1.84-.53-2.86-1.61-3.08a6.09,6.09,0,0,0-4.06,1.08l-4.23,2.45a.75.75,0,0,1-1-.07,1.69,1.69,0,0,1-.4-1.26V62.23a5,5,0,0,1,.35-1.78c.24-.61.48-1.16.72-1.67l5.41-11.54-13.33,7.7a.75.75,0,0,1-1-.07,1.69,1.69,0,0,1-.41-1.26V45.28a4.06,4.06,0,0,1,.41-1.73,2.61,2.61,0,0,1,1-1.19Z"
+          style="fill: currentColor"
+        ></path>
+      </g>
+    </g>
+    <g id="freepik--Character--inject-70">
+      <g id="freepik--character--inject-70">
+        <path d="M414.41,218.19l7.08-.31,4.58,8.68s-2.85,1.48-13.05,1.6Z" style="fill: #f28f8f"></path>
+        <path
+          d="M369.6,197.3c2.7,1.27,4.17,2.74,7.07,5.1,3.58,2.92,15.93,11.31,18.58,12a170.44,170.44,0,0,0,21.36,3.44s-1.15,7,.34,10.45c-6.34.28-22.5.82-28.14-.51-6-1.42-12.66-4.8-17.78-7.77S367.05,199.82,369.6,197.3Z"
+          style="fill: currentColor"
+        ></path>
+        <g style="opacity: 0.7000000000000001">
+          <path
+            d="M369.6,197.3c2.7,1.27,4.17,2.74,7.07,5.1,3.58,2.92,15.93,11.31,18.58,12a170.44,170.44,0,0,0,21.36,3.44s-1.15,7,.34,10.45c-6.34.28-22.5.82-28.14-.51-6-1.42-12.66-4.8-17.78-7.77S367.05,199.82,369.6,197.3Z"
+            style="fill: #fff"
+          ></path>
+        </g>
+        <path
+          d="M371,220.06c5.12,3,11.74,6.35,17.78,7.77,4.08,1,13.68.95,21.08.76a118.81,118.81,0,0,1-19-3.06,73.51,73.51,0,0,1-11.77-6.2c-3.33-2.37-3.53-6.62-5.23-12.77-2.26-8.16-4.25-9.26-4.25-9.26C367.05,199.82,365.92,217.09,371,220.06Z"
+          style="opacity: 0.1"
+        ></path>
+        <path d="M409.89,228.59a14.48,14.48,0,0,1,.31-8.69s-2.06,2-1.62,8.72Z" style="fill: currentColor"></path>
+        <path d="M409.89,228.59a14.48,14.48,0,0,1,.31-8.69s-2.06,2-1.62,8.72Z" style="opacity: 0.1"></path>
+        <path
+          d="M424.39,226.71c6-.21,8.23-3.25,9.07-8.52s.69-12.16.76-14-.47-2.46-1.2-2.56c-.27,0-1.43.25-1.56,2.2-.24,3.56-.33,5.75-1,5.72s-.57-2.66-.51-6.25c0-2.42,0-4.46-1.4-4.46s-1.79,1.44-1.86,4.71,0,5.7-.86,5.77c-.7,0-.56-3.43-.72-5.67s-.15-3.58-1.55-3.55-1.61,1.83-1.56,4a86.09,86.09,0,0,1-.23,9c-.39,1.29-1.73-1.89-2.71-3.2-1.61-2.15-3.58-1.17-2.78.79a38.83,38.83,0,0,1,2.18,7.4C418.88,220.58,419.89,226.73,424.39,226.71Z"
+          style="fill: #ffa8a7"
+        ></path>
+        <path
+          d="M424.36,215.82s3.62,3.77,2.32,7.8a5.35,5.35,0,0,0,.65-5.4A4.09,4.09,0,0,0,424.36,215.82Z"
+          style="fill: #f28f8f"
+        ></path>
+        <path
+          d="M345.39,404.83c-.13,1.14-.28,4.34-6.07,5.13s-9.44-1.12-11-3.9-1.19-5.06-1.44-7.64-2.37-3.95-3-5.28c-.9-1.95.42-5,.42-5Z"
+          style="fill: #263238"
+        ></path>
+        <path
+          d="M387.63,395.77a3.49,3.49,0,0,1-.38,2.8,12.16,12.16,0,0,1-9.28,2.48,22.39,22.39,0,0,1-9.81-3.85,12.92,12.92,0,0,0-7.58-2.18c-2.79-.1-4.82-.72-5-1.45-.37-1.28-.37-2.1.23-2.06Z"
+          style="fill: #263238"
+        ></path>
+        <path
+          d="M345,402.2a31.89,31.89,0,0,0-2.66-3.17,28.64,28.64,0,0,1-6-15.36c0-.31-.06-.91-.37-1.1s-.63.08-1,.22h0v0a6,6,0,0,1-1.79.47,33.38,33.38,0,0,1-4.83-.19c-.4.05-.52,1.29-.49,2.62-.73-.46-1-1.38-1.62-1.91-.36-.29-.51-.3-.51-.77,0-.31,0-.59,0-.9-.52-.15-1,1.87-1.4,3.41-.5,1.78-1.12,3.79-.42,5.6a15.72,15.72,0,0,0,1.63,2.8,11.62,11.62,0,0,1,2.1,5.12c.08.81,0,1.64.13,2.45a7.16,7.16,0,0,0,5.06,5.87c3.52,1.11,8.82.93,11.93-1.53C345.85,405,345.48,403.15,345,402.2Z"
+          style="fill: #455a64"
+        ></path>
+        <path
+          d="M385.29,392c-.77-.24-1.53-.52-2.28-.82a41.85,41.85,0,0,1-6.07-3c-.85-.52-1.69-1.06-2.51-1.63s-1.65-1.27-2.47-1.93a8.81,8.81,0,0,1-1.18-1.26,13,13,0,0,1-1.74-2.82,1,1,0,0,0-.43-.57.84.84,0,0,0-.82.17,4,4,0,0,1-.64.43l-.68.28a7.85,7.85,0,0,1-2.28.56c-2.94.26-3-.33-3.16.62a7.93,7.93,0,0,0,0,1.06c-1.55-.25-2.77-.76-2.84-1.34l-.18-1.88c-2.31-.32-2.08,2.38-2.36,5.34-.23,2.54-.82,4.73-.12,6.58,2.33,2,6.46,1.54,8.81,1.93,3.32.55,4.88,3,9.5,4.61,7.44,2.58,12.15-.4,13.54-1.69C388.28,395,388.46,393.05,385.29,392Z"
+          style="fill: #455a64"
+        ></path>
+        <path
+          d="M329.2,250.14c-.93,9-1.91,22.55-2.29,33.12-.7,19.86-.43,44.69-.43,44.69a68.59,68.59,0,0,0-2.14,12.73c-.47,12.69-.38,44.1-.38,44.1s5.26,5.3,13.13,1.14c0,0,7-42.87,8.92-55.38,1.87-11.93,5.5-38,5.5-38l1.64,36.05a52.37,52.37,0,0,0-1.23,16.26c.42,5.81,3.74,37.44,3.74,37.44,3,2.84,11.84,1.3,13.77-1,0,0,3.09-45.34,3.43-51.47.74-13.26,1-63.83,0-71.5S329.2,250.14,329.2,250.14Z"
+          style="fill: #263238"
+        ></path>
+        <path d="M351.51,292.56l2.31-15.29a30.68,30.68,0,0,0,11-4.64s-1.8,4.08-8.82,7l-2.28,14.23-.55,34.75Z"></path>
+        <path
+          d="M340,155.33s-.21,0-.54.11a2.48,2.48,0,0,0-1.33-2.8,2.67,2.67,0,0,0-3.45,1.41l3.76,1.73a5.24,5.24,0,0,0-2.86,2.44c-1,2.12.33,6.64,1.7,12.22a79,79,0,0,0,3,10.34c.63,1.63,1.77,1.68,1.77,1.68v-5.57l-.24-4.61s3-4.05,3.29-7.37c.41-4.26-.48-6-.48-6Z"
+          style="fill: #263238"
+        ></path>
+        <path
+          d="M342,171.54c-1.11,1-2-1.53-2.95-2.51s-4-2.3-5.5.91,1.39,7.71,3.68,8.77c3.34,1.55,4.84-1.82,4.84-1.82v13.93c3.52,6.35,11.29,6.14,14.89,7a12.33,12.33,0,0,0-.14-6.25l0-4.54a16.7,16.7,0,0,0,4.6.25c3-.48,4.67-3,5.58-6.28,1.47-5.29,1.77-14.18-.27-24.45-3.4-2.63-14.92-2.21-22.06,2.32C345.19,168,343.14,170.57,342,171.54Z"
+          style="fill: #ffa8a7"
+        ></path>
+        <path
+          d="M356.82,187.06s-6.79-1.34-9.17-2.6a7.88,7.88,0,0,1-3.29-3.23,10.64,10.64,0,0,0,1.88,3.82c1.74,2.21,10.59,3.82,10.59,3.82Z"
+          style="fill: #f28f8f"
+        ></path>
+        <path d="M353.73,169.64a1.45,1.45,0,1,1-1.45-1.45A1.45,1.45,0,0,1,353.73,169.64Z" style="fill: #263238"></path>
+        <path d="M365.24,168.58a1.45,1.45,0,1,1-1.45-1.45A1.45,1.45,0,0,1,365.24,168.58Z" style="fill: #263238"></path>
+        <path
+          d="M351.77,165.78l-3,1.59a1.79,1.79,0,0,1,.75-2.37A1.67,1.67,0,0,1,351.77,165.78Z"
+          style="fill: #263238"
+        ></path>
+        <path
+          d="M354.48,178.6l5.09,1.32a2.57,2.57,0,0,1-3.15,2A2.75,2.75,0,0,1,354.48,178.6Z"
+          style="fill: #b16668"
+        ></path>
+        <path
+          d="M355,179.67a3.05,3.05,0,0,0-.52.05,2.73,2.73,0,0,0,2,2.17,2.41,2.41,0,0,0,1.28,0A2.77,2.77,0,0,0,355,179.67Z"
+          style="fill: #f28f8f"
+        ></path>
+        <path
+          d="M366.44,166.06l-3.12-1.48a1.66,1.66,0,0,1,2.25-.86A1.82,1.82,0,0,1,366.44,166.06Z"
+          style="fill: #263238"
+        ></path>
+        <polygon points="358.23 167.93 359.14 177.24 363.79 175.15 358.23 167.93" style="fill: #f28f8f"></polygon>
+        <path
+          d="M336.08,190.82c-6.18,2.21-10.77,4.37-15.06,8.05,0,0,4.44,19.27,7.22,29.88,2.52,9.67.16,29.37.16,29.37s3.89,5.88,26,5.24C366.9,263,373,259,373,259s1.06-21.73.58-39.9c-.38-14.62-1.44-18.15-3.93-21.81-1.8-1.22-11.75-4.9-11.75-4.9a26.09,26.09,0,0,0-.86,5.45C353.36,192.18,336.08,190.82,336.08,190.82Z"
+          style="fill: currentColor"
+        ></path>
+        <path
+          d="M336.08,190.82c-6.18,2.21-10.77,4.37-15.06,8.05,0,0,4.44,19.27,7.22,29.88,2.52,9.67.16,29.37.16,29.37s3.89,5.88,26,5.24C366.9,263,373,259,373,259s1.06-21.73.58-39.9c-.38-14.62-1.44-18.15-3.93-21.81-1.8-1.22-11.75-4.9-11.75-4.9a26.09,26.09,0,0,0-.86,5.45C353.36,192.18,336.08,190.82,336.08,190.82Z"
+          style="fill: #fff; opacity: 0.30000000000000004"
+        ></path>
+        <path
+          d="M333.15,240.67c-.26-6.51-1.67-18.85-1.57-28.2l-4.41-6.69-2.57,8.31c1.23,5.1,2.56,10.54,3.64,14.66,2.52,9.67.16,29.37.16,29.37s3.89,5.88,26,5.24l.4,0A37.07,37.07,0,0,1,342.93,260C336.06,256.6,333.41,247.19,333.15,240.67Z"
+          style="opacity: 0.1"
+        ></path>
+        <path
+          d="M342.1,184.93V186c.2,1,2.25,3.45,7.41,5.77a17.37,17.37,0,0,1,7.48,6.06s-1.76-2.71-3.93-1.28-4.37,5-5.49,5-4.86-3.57-7.79-6.63c-2.45-2.58-3.7-4.13-3.7-4.13S340.09,185,342.1,184.93Z"
+          style="fill: currentColor"
+        ></path>
+        <path d="M357,197.85c1.57-3.76,4.4-.55,4.58-.53.82.05-1.79-6.86-4.73-8.76v3Z" style="fill: currentColor"></path>
+        <path
+          d="M342.1,184.93V186c.2,1,2.25,3.45,7.41,5.77a17.37,17.37,0,0,1,7.48,6.06s-1.76-2.71-3.93-1.28-4.37,5-5.49,5-4.86-3.57-7.79-6.63c-2.45-2.58-3.7-4.13-3.7-4.13S340.09,185,342.1,184.93Z"
+          style="fill: #fff; opacity: 0.65"
+        ></path>
+        <path
+          d="M357,197.85c1.57-3.76,4.4-.55,4.58-.53.82.05-1.79-6.86-4.73-8.76v3Z"
+          style="fill: #fff; opacity: 0.65"
+        ></path>
+        <path
+          d="M361.11,262.77c.26-13.86.62-49.46-4.12-64.92,0,0,4.47,32.91,2.05,65.19Q360.12,262.92,361.11,262.77Z"
+          style="fill: currentColor"
+        ></path>
+        <path
+          d="M361.11,262.77c.26-13.86.62-49.46-4.12-64.92,0,0,4.47,32.91,2.05,65.19Q360.12,262.92,361.11,262.77Z"
+          style="opacity: 0.1"
+        ></path>
+        <path
+          d="M338.56,214.48a38.54,38.54,0,0,0,14.09-1.7l.22,2.72a35,35,0,0,1-14,1.46Z"
+          style="fill: currentColor"
+        ></path>
+        <path d="M338.56,214.48a38.54,38.54,0,0,0,14.09-1.7l.22,2.72a35,35,0,0,1-14,1.46Z" style="opacity: 0.1"></path>
+        <g id="freepik--Shield--inject-70">
+          <path
+            d="M373.17,208.11a.2.2,0,0,0-.07-.2h0c-.05,0-.38-.23-.43-.26h0c-.05,0-.12,0-.22.06a3.15,3.15,0,0,1-3.12.34,2.24,2.24,0,0,1-.35-.34v0h0a.32.32,0,0,0-.09-.08l-.44-.27h0c-.1-.05-.2,0-.27.14-.93,2.11-2.84,4.22-4.08,4.72a.7.7,0,0,0-.25.17.53.53,0,0,0-.15.35c-.09,2.75,1.27,7.19,4.07,8.76a5.58,5.58,0,0,0,.52.32C372.32,217.85,373.06,211.37,373.17,208.11Z"
+            style="fill: #ebebeb"
+          ></path>
+          <path
+            d="M367.74,221.45c-2.8-1.57-4.16-6-4.07-8.76a.55.55,0,0,1,.06-.22l.43.28a.46.46,0,0,0-.05.21C364,215.56,365.23,219.68,367.74,221.45Z"
+            style="fill: #e0e0e0"
+          ></path>
+          <path
+            d="M373.17,208.11c-.11,3.26-.85,9.74-4.91,13.66-2.86-1.53-4.24-6-4.15-8.81a.53.53,0,0,1,.15-.35.74.74,0,0,1,.25-.17c1.24-.5,3.15-2.61,4.08-4.72.07-.15.16-.19.26-.14h0a.32.32,0,0,1,.09.08h0v0a3,3,0,0,0,3.91.28.25.25,0,0,1,.22-.07h0A.2.2,0,0,1,373.17,208.11Z"
+            style="fill: #fafafa"
+          ></path>
+          <path
+            d="M368.85,207.58c-.1-.05-.19,0-.26.14-.93,2.11-2.84,4.22-4.08,4.72a.74.74,0,0,0-.25.17.53.53,0,0,0-.15.35c-.09,2.77,1.29,7.28,4.15,8.81A30.26,30.26,0,0,0,368.85,207.58Z"
+            style="fill: #f0f0f0"
+          ></path>
+        </g>
+        <path d="M346.57,160.89s9.32,4.54,19.32.61c10.27-4.05,1.27-6.92,1.27-6.92Z" style="fill: #263238"></path>
+        <path
+          d="M367.42,141c-7.75-1.72-16.22-2.63-26.39,1.54s-12.73,10.4-12.73,10.4,9.86,3.38,18.19,1.55S367.42,141,367.42,141Z"
+          style="fill: #455a64"
+        ></path>
+        <path
+          d="M334.13,158.62s-5.45-4.43-5.83-5.73a34.25,34.25,0,0,0,11.82-1.45c6.68-2,13.93-8.7,21.41-10.25s10.4,2,10.4,2a35.42,35.42,0,0,1-4.74,8.65s-2.61,5.09-11.41,6.75S334.13,158.62,334.13,158.62Z"
+          style="fill: #37474f"
+        ></path>
+        <path
+          d="M334.13,158.62a14.94,14.94,0,0,0,.42,1.74,8.37,8.37,0,0,0,.81,1.47c3.12.61,10.62,1.1,20.51-1.26,6.2-1.49,9.06-3.21,10.24-4.45a3.36,3.36,0,0,0,1.2-2.9l-.12-1.37s-2.06,2.73-12.2,5.26A70.36,70.36,0,0,1,334.13,158.62Z"
+          style="fill: currentColor"
+        ></path>
+        <path
+          d="M334.13,158.62a14.94,14.94,0,0,0,.42,1.74,8.37,8.37,0,0,0,.81,1.47c3.12.61,10.62,1.1,20.51-1.26,6.2-1.49,9.06-3.21,10.24-4.45a3.36,3.36,0,0,0,1.2-2.9l-.12-1.37s-2.06,2.73-12.2,5.26A70.36,70.36,0,0,1,334.13,158.62Z"
+          style="opacity: 0.05"
+        ></path>
+        <path
+          d="M339.53,295.16c-1-1.46-3.31-2.78-4.17-3.64-1.52-1.54-3.74-4.79-3.41-5.39s1.26.18,3.2.17c3,0,3.82-1.18,3.79-2.28,0-.86-1.83-.7-4-1.18-1.91-.61-4.2-2.76-5.45-4.45s-2.26-6.1-2.26-6.1-6.49.09-11,3.16c0,0,1.29,6.7,2.77,11.45,1.65,5.33,5.39,11.21,11.08,12.53a13.83,13.83,0,0,0,7.16-.36,5.29,5.29,0,0,0,1.9-.94A2,2,0,0,0,339.53,295.16Z"
+          style="fill: #ffa8a7"
+        ></path>
+        <path
+          d="M321,198.87s-1-.2-2.68,3.66a61.94,61.94,0,0,0-3.27,11.53c-.67,3.22-3.87,20.13-3.87,27.4s2.17,21.88,5,34.33c3.48.35,9.46-.55,11.46-2.83-1.31-12.42-2.41-18.81-2.11-28.58,2-14.5,7.87-29.69,8.12-31.38C334.18,209.29,328.32,197.63,321,198.87Z"
+          style="fill: currentColor"
+        ></path>
+        <path
+          d="M321,198.87s-1-.2-2.68,3.66a61.94,61.94,0,0,0-3.27,11.53c-.67,3.22-3.87,20.13-3.87,27.4s2.17,21.88,5,34.33c3.48.35,9.46-.55,11.46-2.83-1.31-12.42-2.41-18.81-2.11-28.58,2-14.5,7.87-29.69,8.12-31.38C334.18,209.29,328.32,197.63,321,198.87Z"
+          style="fill: #fff; opacity: 0.65"
+        ></path>
+        <path
+          d="M316.27,260c-1.74-8.5-4.59-25.14-2.64-38.23-1.12,6.43-2.43,15-2.43,19.69,0,7.27,2.17,21.88,5,34.33a20.33,20.33,0,0,0,4.16-.08C319.11,271.6,317.34,265.24,316.27,260Z"
+          style="opacity: 0.1"
+        ></path>
+        <path d="M314.94,269.69c2.84.18,7.89-.62,10-2,0,0-3.68,1.63-10.19.7Z" style="fill: currentColor"></path>
+        <path d="M314.94,269.69c2.84.18,7.89-.62,10-2,0,0-3.68,1.63-10.19.7Z" style="opacity: 0.1"></path>
+        <g id="freepik--shield--inject-70">
+          <path
+            d="M364.79,145.63c0-.08,0-.13,0-.15h0l-.32-.2h0s-.1,0-.17,0a2.37,2.37,0,0,1-2.33.25,1.6,1.6,0,0,1-.26-.26h0a.19.19,0,0,0-.07-.06l-.32-.2h0c-.07,0-.14,0-.19.11a7.61,7.61,0,0,1-3.05,3.52.5.5,0,0,0-.19.13.41.41,0,0,0-.11.26c-.07,2,.95,5.37,3,6.54a3,3,0,0,0,.38.24C364.16,152.9,364.71,148.07,364.79,145.63Z"
+            style="fill: #ebebeb"
+          ></path>
+          <path
+            d="M360.74,155.59c-2.1-1.17-3.11-4.49-3-6.54a.42.42,0,0,1,0-.16l.33.2a.29.29,0,0,0,0,.16C358,151.19,358.86,154.27,360.74,155.59Z"
+            style="fill: #e0e0e0"
+          ></path>
+          <path
+            d="M364.79,145.63c-.08,2.44-.63,7.27-3.67,10.2-2.13-1.14-3.16-4.51-3.09-6.58a.36.36,0,0,1,.11-.26.59.59,0,0,1,.18-.13,7.5,7.5,0,0,0,3.05-3.52c.05-.11.13-.15.2-.11h0a.19.19,0,0,1,.07.06h0a2.19,2.19,0,0,0,2.92.21c.07-.05.12-.06.16,0h0S364.8,145.55,364.79,145.63Z"
+            style="fill: #fafafa"
+          ></path>
+          <path
+            d="M361.57,145.23c-.07,0-.15,0-.2.11a7.5,7.5,0,0,1-3.05,3.52.59.59,0,0,0-.18.13.36.36,0,0,0-.11.26c-.07,2.07,1,5.44,3.09,6.58A22.54,22.54,0,0,0,361.57,145.23Z"
+            style="fill: #f0f0f0"
+          ></path>
+        </g>
+      </g>
+    </g>
+    <g id="freepik--speech-bubble--inject-70">
+      <g id="freepik--speech-bubble--inject-70">
+        <g id="freepik--speech-bubble--inject-70">
+          <path
+            d="M349.86,130l-5.46-12.44,4.39-12.67V97.08l-13.44,7.76v7.76l5.78,12.18a.87.87,0,0,0,.39.35h0Z"
+            style="fill: currentColor"
+          ></path>
+          <path
+            d="M349.86,130l-5.46-12.44,4.39-12.67V97.08l-13.44,7.76v7.76l5.78,12.18a.87.87,0,0,0,.39.35h0Z"
+            style="opacity: 0.2"
+          ></path>
+          <path
+            d="M390.07,55.14a8.93,8.93,0,0,0-4-7l-3.28-1.89a8.88,8.88,0,0,0-8.06,0L297.61,90.86a8.9,8.9,0,0,0-4,7V128.6a8.93,8.93,0,0,0,4,7l3.28,1.89a8.88,8.88,0,0,0,8.06,0l34.84-20,5.77,12.17a.86.86,0,0,0,1.55-.15l6.1-19.77L386,92.88a8.91,8.91,0,0,0,4-7Z"
+            style="fill: currentColor"
+          ></path>
+          <path
+            d="M293.58,128.6a8.93,8.93,0,0,0,4,7l3.28,1.89a9,9,0,0,0,7.37.33c-1.89.71-3.34-.36-3.34-2.65V104.38a8.2,8.2,0,0,1,1.18-4l-11.34-6.55a8.26,8.26,0,0,0-1.18,4Z"
+            style="opacity: 0.2"
+          ></path>
+          <path
+            d="M389.94,54c-.47-1.71-2-2.25-3.89-1.18L309,97.41a7.84,7.84,0,0,0-2.84,3l-11.33-6.54a8,8,0,0,1,2.83-3l77.08-44.6a9,9,0,0,1,8.07,0l3.29,1.9A8.93,8.93,0,0,1,389.94,54Z"
+            style="fill: #fff; opacity: 0.5"
+          ></path>
+        </g>
+        <path
+          d="M310.48,123.13V106.88a2.14,2.14,0,0,1,.15-.88,1.11,1.11,0,0,1,.47-.51l4.61-2.67c.17-.09.29-.06.37.1a2.33,2.33,0,0,1,.12.91v.8a3.6,3.6,0,0,1-.12,1.05.84.84,0,0,1-.37.52l-2.61,1.51v3.77l2.46-1.42c.17-.1.29-.07.37.09a2.44,2.44,0,0,1,.11.92v.8a3.74,3.74,0,0,1-.11,1,.87.87,0,0,1-.37.52l-2.46,1.42v6.76a1.64,1.64,0,0,1-1,1.39l-.67.38C310.81,123.77,310.48,123.68,310.48,123.13Z"
+          style="fill: #455a64"
+        ></path>
+        <path
+          d="M317.25,111q0-9.22,4.39-11.77,2.14-1.23,3.26.37c.74,1.06,1.12,3.18,1.12,6.34a21.71,21.71,0,0,1-1.12,7.64,7.75,7.75,0,0,1-3.26,4.13Q317.26,120.21,317.25,111Zm5.38,2.24a6.69,6.69,0,0,0,.55-2.11,27.55,27.55,0,0,0,.19-3.66,22.45,22.45,0,0,0-.19-3.41,2.52,2.52,0,0,0-.55-1.48c-.25-.2-.57-.18-1,0a2.53,2.53,0,0,0-1,1.08,7,7,0,0,0-.57,2.12,27.42,27.42,0,0,0-.19,3.64,22.69,22.69,0,0,0,.19,3.42,2.51,2.51,0,0,0,.57,1.48.83.83,0,0,0,1,0A2.63,2.63,0,0,0,322.63,113.2Z"
+          style="fill: #455a64"
+        ></path>
+        <path
+          d="M327.56,113.27V97a2,2,0,0,1,.16-.88,1.11,1.11,0,0,1,.51-.54L331,94a2.29,2.29,0,0,1,2.48-.26c.63.43.94,1.55.94,3.37a9,9,0,0,1-1.59,5.28v.11a1.13,1.13,0,0,1,.67.64,4.44,4.44,0,0,1,.45,1.29l1,4.38.05.28c0,.46-.34.89-1,1.29l-.58.34c-.59.34-.93.31-1-.11l-.89-4.39a1.08,1.08,0,0,0-.34-.6c-.13-.08-.33,0-.61.12l-.4.23v5.83a1.67,1.67,0,0,1-1,1.41l-.57.33C327.89,113.9,327.56,113.82,327.56,113.27Zm3.52-11.63a1.69,1.69,0,0,0,.62-.93,5.19,5.19,0,0,0,.26-1.8,2.64,2.64,0,0,0-.26-1.44.47.47,0,0,0-.68-.11l-.88.51v4.31Z"
+          style="fill: #455a64"
+        ></path>
+        <path
+          d="M336.35,108.72a1.09,1.09,0,0,1-.15-.7V92a2.09,2.09,0,0,1,.15-.85,1.11,1.11,0,0,1,.47-.51l3-1.73c2.35-1.36,3.52-.58,3.52,2.32a8.92,8.92,0,0,1-1.51,5.13l0,.09a1.28,1.28,0,0,1,1.34.73,5,5,0,0,1,.49,2.48,9.46,9.46,0,0,1-1,4.24,7,7,0,0,1-2.84,3l-3.05,1.77C336.61,108.82,336.45,108.82,336.35,108.72Zm3.49-12.47a1.85,1.85,0,0,0,.79-1,5.05,5.05,0,0,0,.26-1.82,2.79,2.79,0,0,0-.24-1.44q-.24-.34-.78,0l-1.19.69v4.25Zm.12,7.51a2.12,2.12,0,0,0,.91-1.06,5.23,5.23,0,0,0,.29-2,2.65,2.65,0,0,0-.28-1.52c-.19-.23-.5-.22-.92,0l-1.28.73v4.52Z"
+          style="fill: #455a64"
+        ></path>
+        <path
+          d="M345.15,103.11V86.6a1.62,1.62,0,0,1,1-1.41l.71-.41c.63-.37.95-.26.95.3v16.51a1.63,1.63,0,0,1-.95,1.41l-.71.4C345.47,103.78,345.15,103.68,345.15,103.11Z"
+          style="fill: #455a64"
+        ></path>
+        <path
+          d="M349.78,101a1,1,0,0,1-.16-.7v-16a2,2,0,0,1,.16-.88,1,1,0,0,1,.46-.51l3.19-1.84q2.18-1.26,3.21.39c.68,1.1,1,3.17,1,6.19a22.19,22.19,0,0,1-1,7.38,7.47,7.47,0,0,1-3.21,4.1l-3.19,1.83C350,101.07,349.87,101.08,349.78,101Zm3.56-5.19a3.08,3.08,0,0,0,1.28-2,20.41,20.41,0,0,0,.38-4.59,14.66,14.66,0,0,0-.38-4.15c-.26-.7-.68-.89-1.28-.54l-1.07.61V96.4Z"
+          style="fill: #455a64"
+        ></path>
+        <path
+          d="M359.44,95.39a1.11,1.11,0,0,1-.15-.7v-16a2.14,2.14,0,0,1,.15-.88,1.11,1.11,0,0,1,.47-.51l3.19-1.84q2.17-1.26,3.2.39t1,6.19a22,22,0,0,1-1,7.38,7.41,7.41,0,0,1-3.2,4.1l-3.19,1.83C359.7,95.48,359.54,95.49,359.44,95.39Zm3.57-5.2a3.07,3.07,0,0,0,1.28-2,20.48,20.48,0,0,0,.38-4.59,14.66,14.66,0,0,0-.38-4.15c-.26-.71-.69-.89-1.28-.55l-1.07.62v11.3Z"
+          style="fill: #455a64"
+        ></path>
+        <path
+          d="M369.11,89.81a1.11,1.11,0,0,1-.15-.7v-16a2.12,2.12,0,0,1,.15-.87,1.18,1.18,0,0,1,.47-.52l4.94-2.85a.23.23,0,0,1,.37.09,2.39,2.39,0,0,1,.12.92v.8a3.64,3.64,0,0,1-.12,1,.87.87,0,0,1-.37.52L371.57,74v3.74l2.62-1.51c.17-.09.29-.06.37.1a2.3,2.3,0,0,1,.12.91V78a3.6,3.6,0,0,1-.12,1.05.84.84,0,0,1-.37.52l-2.62,1.51v4.18l3-1.71c.17-.1.29-.07.36.1a2.63,2.63,0,0,1,.11.92v.8a4,4,0,0,1-.11,1,.82.82,0,0,1-.36.52l-5,2.86C369.37,89.9,369.21,89.91,369.11,89.81Z"
+          style="fill: #455a64"
+        ></path>
+        <path
+          d="M376.53,85V68.48a1.61,1.61,0,0,1,1-1.38l.43-.26a1,1,0,0,1,.54-.16c.13,0,.24.14.33.38l3,6.67a13.89,13.89,0,0,1,.57,1.69l.07-.1c-.09-.84-.14-1.49-.14-2V65.13a1.62,1.62,0,0,1,1-1.38l.41-.23c.64-.38,1-.29,1,.26V80.29a1.64,1.64,0,0,1-1,1.39l-.32.18a1.06,1.06,0,0,1-.56.18c-.14,0-.26-.14-.35-.38l-3.2-6.92a10.16,10.16,0,0,1-.45-1.39l-.08.12a14.88,14.88,0,0,1,.13,1.68v8.49a1.62,1.62,0,0,1-1,1.39l-.4.23C376.86,85.63,376.53,85.54,376.53,85Z"
+          style="fill: #455a64"
+        ></path>
+      </g>
+    </g>
+    <g id="freepik--Plant--inject-70">
+      <g id="freepik--Pot--inject-70">
+        <g id="freepik--pot--inject-70">
+          <path
+            d="M124.7,425.24c8.41-8.69,13.36-44,5.15-50.91H88.08c-8.2,6.88-3.27,42.21,5.15,50.9l.23.24.29.28a8.57,8.57,0,0,0,.76.69l.2.16.63.48a10,10,0,0,0,1.09.7c6.92,4.05,18.15,4.05,25.07,0h0a10,10,0,0,0,1.09-.7c.21-.15.4-.3.6-.46l.24-.19c.27-.22.51-.44.74-.66l.33-.33Z"
+            style="fill: #455a64"
+          ></path>
+          <path
+            d="M91.71,371.55c-9.53,5.57-9.53,14.59,0,20.15s25,5.56,34.51,0,9.53-14.58,0-20.15S101.24,366,91.71,371.55Z"
+            style="fill: #455a64"
+          ></path>
+          <g style="opacity: 0.1">
+            <path
+              d="M91.71,371.55c-9.53,5.57-9.53,14.59,0,20.15s25,5.56,34.51,0,9.53-14.58,0-20.15S101.24,366,91.71,371.55Z"
+              style="fill: #fff"
+            ></path>
+          </g>
+          <path
+            d="M96.29,374.23c-7,4.08-7,10.71,0,14.79s18.35,4.09,25.35,0,7-10.71,0-14.79S103.29,370.14,96.29,374.23Z"
+            style="fill: #263238"
+          ></path>
+          <path
+            d="M121.63,381.25c-7-4.09-18.34-4.09-25.34,0a11.69,11.69,0,0,0-4.19,3.89A11.76,11.76,0,0,0,96.29,389c7,4.09,18.35,4.09,25.34,0a11.72,11.72,0,0,0,4.2-3.88A11.65,11.65,0,0,0,121.63,381.25Z"
+            style="fill: #f5f5f5"
+          ></path>
+        </g>
+        <g id="freepik--Plants--inject-70">
+          <path
+            d="M85.81,305.77l16.7,11.42-15.79-6a28.78,28.78,0,0,0,3.12,12.14s10.43,5.06,16.1,10.4l-13.89-4.37a15.32,15.32,0,0,0,.43,7.26c.09.32.19.65.29,1,.74,2.22,1.79,6.43,3.56,11.4h0a73.25,73.25,0,0,0,5.74,12.56,51.3,51.3,0,0,0,3.82,5.64l.26.34q3.87-2.58,8-5.05c1.6-4.1,3.37-14.06,3.69-22.14,1.21-30.93-23.23-46.89-42.31-51.47C75.59,288.91,82.57,296.5,85.81,305.77Z"
+            style="fill: currentColor"
+          ></path>
+          <path
+            d="M85.81,305.77l16.7,11.42-15.79-6a28.78,28.78,0,0,0,3.12,12.14s10.43,5.06,16.1,10.4l-13.89-4.37a15.32,15.32,0,0,0,.43,7.26c.09.32.19.65.29,1,.74,2.22,1.79,6.43,3.56,11.4h0a73.25,73.25,0,0,0,5.74,12.56,51.3,51.3,0,0,0,3.82,5.64l.26.34q3.87-2.58,8-5.05c1.6-4.1,3.37-14.06,3.69-22.14,1.21-30.93-23.23-46.89-42.31-51.47C75.59,288.91,82.57,296.5,85.81,305.77Z"
+            style="opacity: 0.30000000000000004"
+          ></path>
+          <path
+            d="M99.13,306.12a22.94,22.94,0,0,1,4.34,5.23,48.28,48.28,0,0,1,3.06,6.1,62.65,62.65,0,0,1,3.74,13.08,57.68,57.68,0,0,1-1.47,26.89h0a.44.44,0,0,0,.85.26h0a58.35,58.35,0,0,0,1.06-27.23,62.82,62.82,0,0,0-4-13.09,47.87,47.87,0,0,0-3.16-6.07A23.37,23.37,0,0,0,99.13,306.12Z"
+            style="fill: #fafafa"
+          ></path>
+          <path
+            d="M157.52,321.57l0,0c-.38.49-6.29,5.64-15.36,21.07l-18.39,4.62,15,1.35-6.88,12-15.7,3.88,12.44,1.54s-3,12.18-11.61,17.55c-4.78,3-7.15,3.48-8.67,2.15-1.06-.94-1.52-6.71-2.58-11.84s-1.45-13.52,3-23.83a31.46,31.46,0,0,1,4.78-7.64C124.72,329,146.58,321.83,157.52,321.57Z"
+            style="fill: currentColor"
+          ></path>
+          <path
+            d="M157.52,321.57l0,0c-.38.49-6.29,5.64-15.36,21.07l-18.39,4.62,15,1.35-6.88,12-15.7,3.88,12.44,1.54s-3,12.18-11.61,17.55c-4.78,3-7.15,3.48-8.67,2.15-1.06-.94-1.52-6.71-2.58-11.84s-1.45-13.52,3-23.83a31.46,31.46,0,0,1,4.78-7.64C124.72,329,146.58,321.83,157.52,321.57Z"
+            style="opacity: 0.15"
+          ></path>
+          <path
+            d="M112.17,355.34a0,0,0,0,0,0,0v0A48.67,48.67,0,0,0,109,368.81h0a145.8,145.8,0,0,0,.22,17.45,2.92,2.92,0,0,1-.91-.51c-1.06-.94-1.52-6.71-2.58-11.84s-1.45-13.52,3-23.83a31.46,31.46,0,0,1,4.78-7.64c11.2-13.49,33.06-20.63,44-20.89-16.68,3.39-34.29,15.26-42.7,28.59A34.19,34.19,0,0,0,112.17,355.34Z"
+            style="opacity: 0.1"
+          ></path>
+          <path
+            d="M140.91,327.48c-8.17,4-15.85,9.28-21.77,16.31a43.5,43.5,0,0,0-7.21,11.67,41.81,41.81,0,0,0-3,13.34,0,0,0,0,0,.09,0,53.43,53.43,0,0,1,3.72-13,50.07,50.07,0,0,1,6.94-11.55,57.58,57.58,0,0,1,9.76-9.41,75.9,75.9,0,0,1,11.5-7.28,0,0,0,1,0,0-.08Z"
+            style="fill: #fafafa"
+          ></path>
+          <path
+            d="M60.05,333.25h0a33.68,33.68,0,0,1,4,0,64.21,64.21,0,0,1,15.67,2.9c1.89.59,3.78,1.26,5.66,2,.93.39,1.86.8,2.78,1.23a45,45,0,0,1,12.34,8.3,28.44,28.44,0,0,1,4.39,5.5c.16.26.33.52.48.78h0c.39.68.73,1.36,1.07,2A38.81,38.81,0,0,1,111,374.83c.09,4.62-1.19,10-2,10.89a2.23,2.23,0,0,1-.38.32c-1.27.91-3.39.54-7.42-1.43-8.07-3.94-11.76-14.86-11.76-14.86l10.78-2.45-14.12-2-6.17-8.54,10.34-2.47L76,352.87a209.33,209.33,0,0,0-15.88-19.6l0,0Z"
+            style="fill: currentColor"
+          ></path>
+          <path
+            d="M64.1,333.22a64.21,64.21,0,0,1,15.67,2.9c1.89.59,3.78,1.26,5.66,2,.93.39,1.86.8,2.78,1.23a45,45,0,0,1,12.34,8.3,28.44,28.44,0,0,1,4.39,5.5c.16.26.33.52.48.78h0c.39.68.73,1.36,1.07,2A38.81,38.81,0,0,1,111,374.83c.09,4.62-1.19,10-2,10.89a2.23,2.23,0,0,1-.38.32,2.42,2.42,0,0,1-.85.37c.57-7.2-4-25.13-9.68-32.29-6-7.45-19.73-18-38-20.85l0,0A33,33,0,0,1,64.1,333.22Z"
+            style="opacity: 0.05"
+          ></path>
+          <path
+            d="M107.81,386.41a61.14,61.14,0,0,0-1.91-15.75A50.94,50.94,0,0,0,99.83,356a36,36,0,0,0-5.13-6.15,52.73,52.73,0,0,0-6.14-5.12,59.51,59.51,0,0,0-14.07-7.4,0,0,0,0,0-.06,0,.06.06,0,0,0,0,.06,78.8,78.8,0,0,1,13.58,8,66.22,66.22,0,0,1,6,5,35.22,35.22,0,0,1,5.15,5.9,50.3,50.3,0,0,1,6.23,14.42,61.24,61.24,0,0,1,2.25,15.64,0,0,0,0,0,0,0A0,0,0,0,0,107.81,386.41Z"
+            style="fill: #fafafa"
+          ></path>
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>
--- a/src/components/icons/Icon404.vue
+++ b/src/components/icons/Icon404.vue
@@ -0,0 +1,505 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+    <g id="freepik--Floor--inject-37">
+      <ellipse
+        id="freepik--floor--inject-37"
+        cx="249.03"
+        cy="368.25"
+        rx="228.44"
+        ry="118.95"
+        style="fill: #f5f5f5"
+      ></ellipse>
+    </g>
+    <g id="freepik--Shadows--inject-37">
+      <ellipse
+        id="freepik--Shadow--inject-37"
+        cx="395.38"
+        cy="348.61"
+        rx="60.93"
+        ry="35.18"
+        style="fill: #e6e6e6"
+      ></ellipse>
+      <g id="freepik--shadow--inject-37">
+        <path
+          id="freepik--shadow--inject-37"
+          d="M150,327.73c23.31,13.46,24.26,35.68.94,49.14s-62.05,13.06-85.37-.4-23.31-35.28,0-48.74S126.67,314.27,150,327.73Z"
+          style="fill: #e6e6e6"
+        ></path>
+        <path
+          id="freepik--shadow--inject-37"
+          d="M340.14,400.26l-76.52-44.18a9.57,9.57,0,0,0-8.66,0l-76.52,44.18c-2.39,1.38-2.39,3.62,0,5l34.85,20.12-32.55,18.79c-6.61,3.81-17.37,3.81-24,0l-51.2-29.56c-2.82-1.63-4.38-3.68-4.38-5.76s1.56-4.14,4.38-5.77l45.37-26.2a2,2,0,1,0-2-3.46L103.56,399.6c-4.11,2.38-6.38,5.66-6.38,9.24s2.27,6.85,6.38,9.23l51.2,29.56a30.56,30.56,0,0,0,28,0l34.55-19.94L255,449.44a9.57,9.57,0,0,0,8.66,0l76.52-44.18C342.53,403.88,342.53,401.64,340.14,400.26Z"
+          style="fill: #e6e6e6"
+        ></path>
+      </g>
+    </g>
+    <g id="freepik--character-2--inject-37">
+      <g id="freepik--Character--inject-37">
+        <g id="freepik--Bottom--inject-37">
+          <path
+            d="M427.58,332.09s2.78-41.18,2-56.36c-.65-12-2.28-17-2.62-19.71,0,0-2.95-28-3.19-51.89-.12-11.48-1.18-19.64-7.47-33.28l-40.43,9.67c-.82,6.06-3.6,46.36-4.26,82.19-.57,31.37.32,58.83.32,58.83l0,1.65c0,1.84-.4,3.12-1.58,6.06a35.32,35.32,0,0,1-6.26,10.36c-.83.9-6.6,5.94-7.36,7-2.48,2.89,2.66,4.52,6.47,4,4-.54,10.26-2.07,12-4.51,1.18-1.64,2.07-7.35,3.28-9,4.09-5.58,5.77-8,5.8-9.76.06-3.22-1.05-4.49-1.45-6.31.33-3.8,8.54-35.05,8.68-46.12.07-5.27-.29-12.53-.29-12.53l6.36-36.52c2.46,9.12,6.78,31.76,8.24,40.45,1.77,10.62,6.4,37.88,9.14,54.14,1.05,6.27,1.54,9.44,2,12.35l.11,1.24c.09,1.58,1.24,18.48,1.86,22,1.3,7.39,7.87,6.46,8.92.48.9-5.08-.22-20.84-.25-22.77Z"
+            style="fill: #ffa8a7"
+          ></path>
+          <path
+            d="M427.58,332.09c1.86,0,.64,7.21,1.12,11.82.51,4.95,2.13,8.57,2.6,12.62a16.48,16.48,0,0,1-1.55,10.39c-1.29,3-7.79,7-10.26,2.79s-3-9.08-2.71-13.7,0-7.72.09-11.35c.09-3.2-2.26-11.37.15-11.83l.11,1.24c.87,1.73,9.65,2.07,10.53-.27Z"
+            style="fill: #37474f"
+          ></path>
+          <path d="M384.7,331.27c.57,2.31,0,8.65,0,8.65s-1,2.19-4.57,3.64l-1.6-8.82Z" style="fill: #263238"></path>
+          <polygon points="380.11 343.56 372.25 340.98 370.35 334 379.19 338.47 380.11 343.56"></polygon>
+          <path
+            d="M371.93,323.19l0-1.65c-1.07.52-3.42,9.13-6.6,15-2.9,5.39-8.65,8.39-10.52,10.74-2.5,3.13,2.36,7.18,10.15,5.51,3.87-.83,9.73-3.3,11.32-5.91s2.12-7.41,3.42-9.33,4.39-4.13,5-6.31a12,12,0,0,0,0-6c-.61-2-1.15-4.39-1.83-4.17l0,1.51c-.52,1.06-2.41,2.3-6.34,2.52C374.61,325.19,372.79,324.9,371.93,323.19Z"
+            style="fill: #37474f"
+          ></path>
+          <path
+            d="M375.05,180s-2.67,29.67-3.53,55.94-.09,60.17-.09,60.17,2.71,1.94,8.68,2.21,8-1.72,8-1.72,3.65-11.91,4.22-20.29a85.71,85.71,0,0,0,0-13.63l5.33-35.06s6.76,34.52,7.53,38.69,7.24,41.06,7.24,41.06,2.54,2.34,9.06,2.22c5.77-.11,7.44-2.18,7.44-2.18s1.39-22.62,1.07-32.28c-.27-8.52-2.22-15.3-2.61-20.83s-.61-37-1-49S425,183,414.73,168.56Z"
+            style="fill: #455a64"
+          ></path>
+          <path
+            d="M397.7,227.65l-4.44-22s-7.73-2-11.34-6.74c0,0,1,5.24,9,8.59l4.72,21.88L394,252Z"
+            style="fill: #37474f"
+          ></path>
+        </g>
+        <g id="freepik--Top--inject-37">
+          <path
+            d="M318.56,174.53a19.1,19.1,0,0,0,8.51-.63,16.74,16.74,0,0,1-3.37-2.23,2.33,2.33,0,0,1-.4-3.22c.37-.4,1.29.53,3.37,1.12,2.66.75,4.59.91,7.15,2.39a4.69,4.69,0,0,0,3.2.56c6.24-1.17,20.79-8,27.46-11.56,1.36-5.55,3.72-13.71,6.63-23.89,2.69-9.38,7-13.48,13.88-13.33L384,144.11s-3.28,14.07-7.34,25.56c-.71,2-3.56,4.33-8.78,6.27-6.76,2.51-14.92,4.88-24.89,7.61A77.29,77.29,0,0,1,330.65,186c-10.54.9-14.58-2-16-4.08C310.61,176.18,313,173.42,318.56,174.53Z"
+            style="fill: #ffa8a7"
+          ></path>
+          <path
+            d="M402.72,123.59l9.62.74a22.36,22.36,0,0,0,7.24,21.54l-4.29,17.28c.14,2.14,3.68,9.34,7.11,17.08-6.45,8.64-38.09,11.59-48.41,4,1.59-8.14,2.78-14.32,3.1-17.41l-.52-11.17c-12.94-10.61,2.67-26.78,8.42-31.92l7.22-.32Z"
+            style="fill: currentColor"
+          ></path>
+          <path
+            d="M443.23,209.68a5.39,5.39,0,0,1-2.06-4.64c.17-1.61.54-3.63,1.21-4.41s4.87-6.49,6.73-3.17c2,3.62,1.59,5.09,1.59,5.09Z"
+            style="fill: #f28f8f"
+          ></path>
+          <path
+            d="M430.27,286a25.84,25.84,0,0,1-12.75-3.86L367.59,253.3c-7.71-4.45-14-15.32-14-24.23V187.18a8,8,0,0,0-12-6.9L324.11,190.4a2,2,0,1,1-2-3.46l17.53-10.13a12,12,0,0,1,18,10.37v41.89c0,7.5,5.5,17,12,20.77l49.93,28.82c6.39,3.69,12.32,4.33,16.68,1.82s6.77-8,6.77-15.35V211.65c0-9.06,5.79-19.5,13.18-23.77l12.19-7a2,2,0,1,1,2,3.46l-12.19,7c-6.06,3.5-11.18,12.79-11.18,20.3v53.48c0,8.86-3.12,15.54-8.77,18.81A15.68,15.68,0,0,1,430.27,286Z"
+            style="fill: #37474f"
+          ></path>
+          <g id="freepik--Plug--inject-37">
+            <path
+              d="M344,193.29v3.27c0,5.23-3.67,11.6-8.21,14.21l-30.28,17.49-30.79-17.78V183.82L304.58,170c4.75-2.19,12.27-1.85,16.81.76l14.38,8.31C340.3,181.69,344,188.06,344,193.29Z"
+              style="fill: #37474f"
+            ></path>
+            <path
+              d="M304.58,170c4.75-2.19,12.27-1.85,16.81.76l14.38,8.31c4.53,2.61,4.35,6.51-.4,8.71l-29.89,13.8-30.8-17.77Z"
+              style="fill: #455a64"
+            ></path>
+            <path
+              d="M308.39,195.18a9.07,9.07,0,0,1,4.1,7.1v21.93l-7,4-30.79-17.78V183.82l7.8-3.6Z"
+              style="opacity: 0.15"
+            ></path>
+            <path
+              d="M272.07,179.23a2.85,2.85,0,0,1,2.88.28L305.23,197a9.06,9.06,0,0,1,4.1,7.11v26.08a2.85,2.85,0,0,1-1.2,2.64c-.7.39-3.17,1.82-3.86,2.23a2.87,2.87,0,0,1-2.89-.28l-30.29-17.49a9.07,9.07,0,0,1-4.1-7.1V184.11a2.89,2.89,0,0,1,1.19-2.65Z"
+              style="fill: #37474f"
+            ></path>
+            <path
+              d="M301.38,199.22l-30.29-17.48c-2.26-1.31-4.1-.25-4.1,2.37v26.08a9.07,9.07,0,0,0,4.1,7.1l30.29,17.49c2.26,1.31,4.1.25,4.1-2.37V206.33A9.09,9.09,0,0,0,301.38,199.22Z"
+              style="fill: #455a64"
+            ></path>
+            <path
+              d="M265.51,229.58v4.51c0,1.83.63,3.1,1.67,3.7l2.72,1.57A4,4,0,0,0,274,239l25-14.46V206.74l-2.72-1.57-25.05,14.46A12.69,12.69,0,0,0,265.51,229.58ZM276.84,224A4,4,0,0,1,277,225a8.5,8.5,0,0,1-3.85,6.67,3.62,3.62,0,0,1-1,.4,4.11,4.11,0,0,1-.14-1,8.51,8.51,0,0,1,3.85-6.67A4.74,4.74,0,0,1,276.84,224Z"
+              style="fill: currentColor"
+            ></path>
+            <path
+              d="M269.76,239.26a1,1,0,0,0,.17.12h0l-.1-.06-2.63-1.53c-1.05-.58-1.67-1.85-1.67-3.69v-4.51a11.64,11.64,0,0,1,1.69-5.67l2.72,1.57a11.8,11.8,0,0,0-1.68,5.67v4.51a4.59,4.59,0,0,0,1.05,3.22A2.45,2.45,0,0,0,269.76,239.26Z"
+              style="opacity: 0.2"
+            ></path>
+            <path
+              d="M299,206.74,274,221.2a11.72,11.72,0,0,0-4.06,4.28l-2.72-1.57a11.78,11.78,0,0,1,4.05-4.28l25.05-14.46Z"
+              style="fill: #fff; opacity: 0.5"
+            ></path>
+            <path d="M270,239.45l-.07,0,0,0S270,239.45,270,239.45Z" style="fill: #fff; opacity: 0.5"></path>
+            <path d="M270,239.43l0,0,0,0Z" style="opacity: 0.2"></path>
+            <path
+              d="M277,225a4.27,4.27,0,0,0-.14-1.07h0c1.65-.45,2.86.58,2.86,2.64a8.52,8.52,0,0,1-3.84,6.67c-1.78,1-3.3.49-3.72-1.17a3.27,3.27,0,0,0,1-.4A8.53,8.53,0,0,0,277,225Z"
+              style="opacity: 0.2"
+            ></path>
+            <path
+              d="M242.42,216.24v4.52c0,1.82.63,3.1,1.67,3.69l2.72,1.58a4,4,0,0,0,4.08-.38l25-14.47V193.41l-2.72-1.58-25,14.46A12.72,12.72,0,0,0,242.42,216.24Zm11.33-5.61a4.33,4.33,0,0,1,.14,1.07,8.51,8.51,0,0,1-3.85,6.67,4.6,4.6,0,0,1-1,.4,3.81,3.81,0,0,1-.14-1.05,8.52,8.52,0,0,1,3.84-6.67A3.91,3.91,0,0,1,253.75,210.63Z"
+              style="fill: currentColor"
+            ></path>
+            <path
+              d="M246.93,226.1l-.05,0-.07,0-2.72-1.59c-1.05-.59-1.67-1.86-1.67-3.7v-4.51a9.88,9.88,0,0,1,.45-2.84,13.48,13.48,0,0,1,1.23-2.82h0l2.72,1.56h0a12.69,12.69,0,0,0-.69,1.38,10.89,10.89,0,0,0-1,4.28v4.51a4.61,4.61,0,0,0,1,3.22A2.8,2.8,0,0,0,246.93,226.1Z"
+              style="opacity: 0.2"
+            ></path>
+            <path
+              d="M275.92,193.41l-25,14.46a11.64,11.64,0,0,0-4.06,4.28l-2.72-1.56a11.77,11.77,0,0,1,4-4.3l25-14.46Z"
+              style="fill: #fff; opacity: 0.5"
+            ></path>
+            <path d="M247,226.12l-.07,0,.05,0Z" style="fill: #fff; opacity: 0.5"></path>
+            <path
+              d="M253.88,211.69a4.21,4.21,0,0,0-.13-1.06h0c1.64-.46,2.86.58,2.86,2.64a8.52,8.52,0,0,1-3.84,6.67c-1.79,1-3.3.49-3.72-1.18a3.12,3.12,0,0,0,1-.4A8.5,8.5,0,0,0,253.88,211.69Z"
+              style="opacity: 0.2"
+            ></path>
+          </g>
+          <path
+            d="M250,199.55a1.49,1.49,0,0,1-1.45-1.13l-4-15.68a1.5,1.5,0,0,1,2.91-.75l4,15.69a1.48,1.48,0,0,1-1.08,1.82A1.57,1.57,0,0,1,250,199.55Z"
+            style="fill: #e0e0e0"
+          ></path>
+          <path
+            d="M238.74,206.09a1.5,1.5,0,0,1-.93-.32L222.92,194a1.5,1.5,0,1,1,1.86-2.35l14.89,11.76a1.51,1.51,0,0,1,.25,2.11A1.48,1.48,0,0,1,238.74,206.09Z"
+            style="fill: #e0e0e0"
+          ></path>
+          <path
+            d="M218.22,220.45a1.5,1.5,0,0,1-.11-3l17.41-1.35a1.49,1.49,0,0,1,1.61,1.38,1.51,1.51,0,0,1-1.38,1.61l-17.41,1.35Z"
+            style="fill: #e0e0e0"
+          ></path>
+          <path
+            d="M456.84,193.36a98.58,98.58,0,0,0-1.64-11,148.11,148.11,0,0,0-9.06-24.81c-1.67-3.19-5.44-7.84-8.11-11.77-3.78-5.55-6.44-8.66-9.31-12.43-6.32-8.27-9-8.75-16.38-9-1,2.63-3.28,13.41,4.11,22.12l15.84,16.7c.9,1.45,10.58,18,12.19,24.11a4.52,4.52,0,0,1-.38,3.23,39,39,0,0,0-2.77,8.76c-.47,2.12-1.73,3.8-1.3,4.13a2.84,2.84,0,0,0,3.51-.28,15.05,15.05,0,0,0,2.73-4.12,2.15,2.15,0,0,1,2.29,2.19c.09,1.23-.47,2.94-.9,5.07-.08.42-.18.9-.37,2.06a13.42,13.42,0,0,0-.28,2.38c2,.37,4.09-.85,7.45-4C457.49,203.76,457.69,199.9,456.84,193.36Z"
+            style="fill: #ffa8a7"
+          ></path>
+          <path
+            d="M404.44,118.73c.06-2,6.56-6.68,9.85-11.66,3-4.62,7.31-17.32-2.79-21.38,0,0,2.18-6.09-1.78-9.68s-9.29-1.37-10.13.13a9,9,0,0,0-8.46-6.64,7.87,7.87,0,0,0-8.28,6.17,7.59,7.59,0,0,0-9.21,2.58c-3.71,5.11,1.21,9.79,1.21,9.79A4.25,4.25,0,0,0,373,92c.29,2.16,2.36,2.69,2.6,3.77a1.06,1.06,0,0,1-1.81.94,2.18,2.18,0,0,0,2.56,1.73c2.33-.13,4.41-3.3,4.41-3.3Z"
+            style="fill: #263238"
+          ></path>
+          <path
+            d="M383.24,85.05c-3,1.3-5.83,5.87-5.79,18.65,0,10.83,3.36,13.57,5,14.38s4.95.39,8.14-.1v6.23s-5.77,7.16-.6,10.72c13.32-2.33,14.34-11.07,14.34-11.07l.24-13.58s1.83,1.92,5-.9c2.66-2.33,3.62-6.32,1.62-8.52s-4.56-2.37-6.88.08c0,0-4.25.28-10.64-3.73S385,89.13,383.24,85.05Z"
+            style="fill: #ffa8a7"
+          ></path>
+          <path d="M390.91,110.48a1.56,1.56,0,0,1-1.48,1.66,1.61,1.61,0,1,1,1.48-1.66Z" style="fill: #b16668"></path>
+          <path d="M382.68,100a1.44,1.44,0,1,1-1.5-1.45A1.47,1.47,0,0,1,382.68,100Z" style="fill: #263238"></path>
+          <path
+            d="M393.75,100.66a1.56,1.56,0,0,1-1.48,1.66,1.59,1.59,0,0,1-1.6-1.56,1.54,1.54,0,1,1,3.08-.1Z"
+            style="fill: #263238"
+          ></path>
+          <path
+            d="M381.68,94.27l-3.05,1.79a1.7,1.7,0,0,0,2.4.65A1.83,1.83,0,0,0,381.68,94.27Z"
+            style="fill: #263238"
+          ></path>
+          <path
+            d="M404.37,99.18l0,6a2.82,2.82,0,0,1-2.89-2.92A3.1,3.1,0,0,1,404.37,99.18Z"
+            style="fill: #263238"
+          ></path>
+          <polygon points="386.62 98.57 386.01 107.21 381.45 106.14 386.62 98.57" style="fill: #f28f8f"></polygon>
+          <path
+            d="M390.63,118c3.35-.39,10.27-2.31,11.4-5.13a7.35,7.35,0,0,1-2.48,3.57c-2.09,1.8-8.93,3.66-8.93,3.66Z"
+            style="fill: #f28f8f"
+          ></path>
+        </g>
+        <g id="freepik--question-marks--inject-37">
+          <path
+            d="M430.9,51.18a13.78,13.78,0,0,1,3.55,2,10.75,10.75,0,0,1,2.65,2.79,8.68,8.68,0,0,1,1.3,3.44,7.65,7.65,0,0,1-.47,3.87,7.9,7.9,0,0,1-1.59,2.66,9.5,9.5,0,0,1-2.13,1.68,14.81,14.81,0,0,1-2.4,1.1l-2.36.85a11.94,11.94,0,0,0-2,.94A3.57,3.57,0,0,0,426,71.85a1.76,1.76,0,0,1-.66.64,1,1,0,0,1-.86.05l-3.12-1.17a1.18,1.18,0,0,1-.67-.63,1,1,0,0,1,0-.89,7.71,7.71,0,0,1,1.74-2.56,10.91,10.91,0,0,1,2.25-1.63,15.6,15.6,0,0,1,2.46-1.06c.84-.28,1.62-.55,2.35-.83a10.4,10.4,0,0,0,1.89-.92,2.79,2.79,0,0,0,1.12-1.38,3.29,3.29,0,0,0-.34-3.06,6,6,0,0,0-3.11-2.31,5.73,5.73,0,0,0-6.43,1.55,2.59,2.59,0,0,1-.69.52,1.15,1.15,0,0,1-.84-.06l-3.32-1.25a.93.93,0,0,1-.54-.49.85.85,0,0,1,0-.75,6.67,6.67,0,0,1,2-2.6,10.71,10.71,0,0,1,3.27-1.86,13,13,0,0,1,4.07-.74A11.48,11.48,0,0,1,430.9,51.18Zm-7.12,23.9a1.1,1.1,0,0,1,.65.62,1.13,1.13,0,0,1,0,.9l-1.36,3.61a1.1,1.1,0,0,1-.62.65,1.13,1.13,0,0,1-.9,0l-3.53-1.33a1.1,1.1,0,0,1-.65-.62,1.13,1.13,0,0,1,0-.9l1.36-3.61a1.15,1.15,0,0,1,.62-.66,1.17,1.17,0,0,1,.9,0Z"
+            style="fill: currentColor"
+          ></path>
+          <path
+            d="M432.63,94.28a1.1,1.1,0,0,1,0,1.57l-2.5,2.64a1.08,1.08,0,0,1-.78.34,1.11,1.11,0,0,1-.8-.3L426,96.08a1.08,1.08,0,0,1-.34-.78,1.07,1.07,0,0,1,.3-.8l2.51-2.63a1.12,1.12,0,0,1,1.57,0Zm15-18.13a13.34,13.34,0,0,1,2.37,3,10.44,10.44,0,0,1,1.27,3.4A8.25,8.25,0,0,1,451.1,86a8,8,0,0,1-4.19,4.91,8.77,8.77,0,0,1-2.46.68,14.86,14.86,0,0,1-2.49.07l-2.36-.13a12.13,12.13,0,0,0-2.11.07,3.4,3.4,0,0,0-1.72.7,1.56,1.56,0,0,1-.81.31.94.94,0,0,1-.77-.27l-2.27-2.16a1.15,1.15,0,0,1-.36-.79.92.92,0,0,1,.32-.79A7.27,7.27,0,0,1,434.32,87a10.23,10.23,0,0,1,2.55-.59,15.29,15.29,0,0,1,2.53,0q1.25.11,2.34.15a9.53,9.53,0,0,0,2-.11,2.61,2.61,0,0,0,1.49-.78,3.13,3.13,0,0,0,.82-2.78,5.62,5.62,0,0,0-1.85-3.15,5.42,5.42,0,0,0-6.16-1,2.3,2.3,0,0,1-.78.19,1,1,0,0,1-.71-.36l-2.42-2.31a.92.92,0,0,1-.3-.61.88.88,0,0,1,.26-.67,6.45,6.45,0,0,1,2.68-1.53,10.2,10.2,0,0,1,3.52-.41,12.17,12.17,0,0,1,3.81.86A10.6,10.6,0,0,1,447.59,76.15Z"
+            style="fill: currentColor"
+          ></path>
+          <g style="opacity: 0.6000000000000001">
+            <path
+              d="M432.63,94.28a1.1,1.1,0,0,1,0,1.57l-2.5,2.64a1.08,1.08,0,0,1-.78.34,1.11,1.11,0,0,1-.8-.3L426,96.08a1.08,1.08,0,0,1-.34-.78,1.07,1.07,0,0,1,.3-.8l2.51-2.63a1.12,1.12,0,0,1,1.57,0Zm15-18.13a13.34,13.34,0,0,1,2.37,3,10.44,10.44,0,0,1,1.27,3.4A8.25,8.25,0,0,1,451.1,86a8,8,0,0,1-4.19,4.91,8.77,8.77,0,0,1-2.46.68,14.86,14.86,0,0,1-2.49.07l-2.36-.13a12.13,12.13,0,0,0-2.11.07,3.4,3.4,0,0,0-1.72.7,1.56,1.56,0,0,1-.81.31.94.94,0,0,1-.77-.27l-2.27-2.16a1.15,1.15,0,0,1-.36-.79.92.92,0,0,1,.32-.79A7.27,7.27,0,0,1,434.32,87a10.23,10.23,0,0,1,2.55-.59,15.29,15.29,0,0,1,2.53,0q1.25.11,2.34.15a9.53,9.53,0,0,0,2-.11,2.61,2.61,0,0,0,1.49-.78,3.13,3.13,0,0,0,.82-2.78,5.62,5.62,0,0,0-1.85-3.15,5.42,5.42,0,0,0-6.16-1,2.3,2.3,0,0,1-.78.19,1,1,0,0,1-.71-.36l-2.42-2.31a.92.92,0,0,1-.3-.61.88.88,0,0,1,.26-.67,6.45,6.45,0,0,1,2.68-1.53,10.2,10.2,0,0,1,3.52-.41,12.17,12.17,0,0,1,3.81.86A10.6,10.6,0,0,1,447.59,76.15Z"
+              style="fill: #fff"
+            ></path>
+          </g>
+        </g>
+      </g>
+    </g>
+    <g id="freepik--character-1--inject-37">
+      <g id="freepik--character--inject-37">
+        <g id="freepik--bottom--inject-37">
+          <path d="M76.81,345.71c3.17,1.93,7.38,2,11.35.61l3-21-14-3.58Z" style="fill: #ffa8a7"></path>
+          <path
+            d="M99.4,365.81c.35.36.14,3-.29,3.59s-2.84,2.59-7.28,2.67c-4.23.07-8-.7-10.36-2.41s-3.49-3.5-3.6-5.92.29-4.71-.75-6.62-2.29-3.51-2.61-4.45a12,12,0,0,1,0-5.17Z"
+            style="fill: #263238"
+          ></path>
+          <path
+            d="M89.13,345.44a11.56,11.56,0,0,0,.38,2.7,24.77,24.77,0,0,0,2.29,5.42,22.77,22.77,0,0,0,1.63,2.57c1.19,1.59,2.71,2.92,4,4.45a8.61,8.61,0,0,1,2.33,5.32c0,3.32-3.65,4.25-6.44,4.59a20.33,20.33,0,0,1-9-.93,8.26,8.26,0,0,1-5.69-6.92c-.11-.93,0-1.86-.06-2.79a12.93,12.93,0,0,0-2.26-5.93,17,17,0,0,1-1.8-3.26c-.76-2.09.06-4.36.72-6.37.57-1.73,1-3.82,1.64-3.62,0,.35,0,1.13,0,1.13.18.39.62.67.73,1.13a8.59,8.59,0,0,0,.43,1.39,3.6,3.6,0,0,0,1.38,1.7c.11-1.25.22-2.5.32-3.74a1.31,1.31,0,0,1,1.43-1.49,23.59,23.59,0,0,1,7.11-.21,1.36,1.36,0,0,1,.93.47,1.44,1.44,0,0,1,.11.85A32.79,32.79,0,0,0,89.13,345.44Z"
+            style="fill: currentColor"
+          ></path>
+          <path
+            d="M89.13,345.44a11.56,11.56,0,0,0,.38,2.7,24.77,24.77,0,0,0,2.29,5.42,22.77,22.77,0,0,0,1.63,2.57c1.19,1.59,2.71,2.92,4,4.45a8.61,8.61,0,0,1,2.33,5.32c0,3.32-3.65,4.25-6.44,4.59a20.33,20.33,0,0,1-9-.93,8.26,8.26,0,0,1-5.69-6.92c-.11-.93,0-1.86-.06-2.79a12.93,12.93,0,0,0-2.26-5.93,17,17,0,0,1-1.8-3.26c-.76-2.09.06-4.36.72-6.37.57-1.73,1-3.82,1.64-3.62,0,.35,0,1.13,0,1.13.18.39.62.67.73,1.13a8.59,8.59,0,0,0,.43,1.39,3.6,3.6,0,0,0,1.38,1.7c.11-1.25.22-2.5.32-3.74a1.31,1.31,0,0,1,1.43-1.49,23.59,23.59,0,0,1,7.11-.21,1.36,1.36,0,0,1,.93.47,1.44,1.44,0,0,1,.11.85A32.79,32.79,0,0,0,89.13,345.44Z"
+            style="opacity: 0.2"
+          ></path>
+          <path
+            d="M92.21,354.28c-1.18-1-3.94-1.15-5.46-1.07a9.22,9.22,0,0,0-4.37,1.27,1,1,0,0,1-1.25-.17h0a.92.92,0,0,1,.16-1.4,9.45,9.45,0,0,1,4.93-1.53C90,351.32,91,352,91,352S92.64,353.2,92.21,354.28Z"
+            style="fill: #455a64"
+          ></path>
+          <path
+            d="M94.86,357.82c-1.5-1-4.54-1-6.06-.95a8.6,8.6,0,0,0-4.25,1.36,1,1,0,0,1-1.26-.17h0a.91.91,0,0,1,.17-1.4,9.55,9.55,0,0,1,5-1.66c3.73-.07,4.66.75,4.66.75A3.07,3.07,0,0,1,94.86,357.82Z"
+            style="fill: #455a64"
+          ></path>
+          <path
+            d="M84.93,347.75a9.27,9.27,0,0,1,4.65.64c.63.41,1,1.46.57,1.7A8.66,8.66,0,0,0,86,349.3a12.24,12.24,0,0,0-4.07.89c-.33.12-.71.3-1,.46a.87.87,0,0,1-1.2-.44h0a.84.84,0,0,1,.38-1A11.93,11.93,0,0,1,84.93,347.75Z"
+            style="fill: #455a64"
+          ></path>
+          <path d="M116.27,337.82c2.44,6.11,6.26,4.23,12.08.71l.88-20.86-14.81-1.37Z" style="fill: #ffa8a7"></path>
+          <path
+            d="M150.69,352.53a4,4,0,0,1-.32,2.93c-.46.84-5.09,3.14-11.14,2.4a25.22,25.22,0,0,1-12.32-5.06c-2.23-1.66-4.62-2.07-7.62-2.41s-5.25-1.38-5.84-2.82.31-3.82.31-3.82Z"
+            style="fill: #263238"
+          ></path>
+          <path
+            d="M127.13,333.3a11.94,11.94,0,0,0,1.61-.46,1.31,1.31,0,0,1,.91,0c.38.17.5.63.59,1a13.86,13.86,0,0,0,.52,2.67,6.54,6.54,0,0,0,1.6,1.88,27.83,27.83,0,0,0,4.69,3.39c1.93,1.18,3.83,2.11,5.82,3.14s4.78,1.77,6.36,3c2.29,1.74,2.38,5.79-.42,7.23-2.41,1.25-8.65,2.41-15,.23-3.47-1.19-7.17-5.16-11.77-5.77-2.93-.38-6.83-.84-8.6-3.17-.64-1-.08-3.9.44-7.29.47-3,.9-7.8,1.87-7.48l.07.92L117,334a10.07,10.07,0,0,0,.82.78,14.84,14.84,0,0,0,1,1.06,3,3,0,0,0,1.69.71,1.56,1.56,0,0,0,.85-.19c.5-.28.57-.94,1-1.35A4.88,4.88,0,0,1,124,333.9a9.61,9.61,0,0,1,2.66-.54A3.65,3.65,0,0,0,127.13,333.3Z"
+            style="fill: currentColor"
+          ></path>
+          <path
+            d="M127.13,333.3a11.94,11.94,0,0,0,1.61-.46,1.31,1.31,0,0,1,.91,0c.38.17.5.63.59,1a13.86,13.86,0,0,0,.52,2.67,6.54,6.54,0,0,0,1.6,1.88,27.83,27.83,0,0,0,4.69,3.39c1.93,1.18,3.83,2.11,5.82,3.14s4.78,1.77,6.36,3c2.29,1.74,2.38,5.79-.42,7.23-2.41,1.25-8.65,2.41-15,.23-3.47-1.19-7.17-5.16-11.77-5.77-2.93-.38-6.83-.84-8.6-3.17-.64-1-.08-3.9.44-7.29.47-3,.9-7.8,1.87-7.48l.07.92L117,334a10.07,10.07,0,0,0,.82.78,14.84,14.84,0,0,0,1,1.06,3,3,0,0,0,1.69.71,1.56,1.56,0,0,0,.85-.19c.5-.28.57-.94,1-1.35A4.88,4.88,0,0,1,124,333.9a9.61,9.61,0,0,1,2.66-.54A3.65,3.65,0,0,0,127.13,333.3Z"
+            style="opacity: 0.2"
+          ></path>
+          <path
+            d="M134.4,340a2.76,2.76,0,0,0-2.1-1.57c-1.32-.32-3.73.54-5.26,1.67a1.1,1.1,0,0,0,.06,1.82h0a1.12,1.12,0,0,0,1.26-.07A8.32,8.32,0,0,1,134.4,340Z"
+            style="fill: #455a64"
+          ></path>
+          <path
+            d="M138.41,342.57a3.15,3.15,0,0,0-2.5-1.46,9.76,9.76,0,0,0-5.76,1.81,1.07,1.07,0,0,0,0,1.76h0a1.07,1.07,0,0,0,1.22-.08A8.42,8.42,0,0,1,138.41,342.57Z"
+            style="fill: #455a64"
+          ></path>
+          <path
+            d="M142.87,344.91a3.51,3.51,0,0,0-2.6-1.34,9.46,9.46,0,0,0-5.53,1.84,1.07,1.07,0,0,0,.06,1.76h0a1,1,0,0,0,1.21-.07A8,8,0,0,1,142.87,344.91Z"
+            style="fill: #455a64"
+          ></path>
+          <path
+            d="M76.42,289.41c.45-10.07,2.59-15.31,2.89-18.1,0,0,.82-55.4,2.17-72.21l49.6-2.11c.73,18,1.39,66.36,1,72.76-.37,6.13-2.86,59.3-2.86,59.3-7,2.19-14.47-1-14.47-1s-4.16-30.25-4.84-36.92a85.23,85.23,0,0,1,.46-18l-3.17-43.07s-3.83,33.4-5.72,46C99.32,290.47,90,335.14,90,335.14c-6.7,1.67-13.22-1.22-13.22-1.22S75.76,304,76.42,289.41Z"
+            style="fill: #455a64"
+          ></path>
+          <path
+            d="M107.21,230.1l.94-5.94c2.89-.43,10.21-5,14.54-9a34.5,34.5,0,0,1-12.16,11.21l-.15,46.78Z"
+            style="fill: #37474f"
+          ></path>
+        </g>
+        <g id="freepik--top--inject-37">
+          <path
+            d="M127.55,167.81c-3.37-7.69-9.17-20.64-9.17-20.64l-1.47-21a56.64,56.64,0,0,1,6.41.57c3.12.49,8.07,3.47,10.33,9.09,1.69,4.17,10.47,29.61,10.47,29.61l15.3-8.06c3.92-2.49,5.31-6.62,7.81-9s5-2.74,7.77-4.65,3.86-3.44,4.56-1.53-2.4,4.84-3,5.57-3.61,2.29.23,2.49,11.61-3.54,13.47-4.18,1.7,1.57.73,2.94-1.07,5.39-2.69,7.64c-1.72,2.4-2.65,3.43-6.34,4.86-3.43,1.32-10.54,1.66-14.2,3.77s-12.52,10.12-18.43,14.23c-7.93,5.52-12.39,5.88-15.5,1.48S128.74,170.52,127.55,167.81Z"
+            style="fill: #ffa8a7"
+          ></path>
+          <path
+            d="M114.84,125.72c5.2-.4,11.33-.08,14.72,3,2.71,2.47,3.73,4,6.75,12.54,2,5.73,6.28,18.93,6.28,18.93a27.32,27.32,0,0,0-15,9.19l-9.75-21.91Z"
+            style="fill: #e0e0e0"
+          ></path>
+          <path d="M144.12,165.39a13.09,13.09,0,0,0-6.47,5s.37-4,6-6.39Z" style="fill: #f28f8f"></path>
+          <path
+            d="M102.39,124.78a24.57,24.57,0,0,0-7.31.8c-4.57,1.21-12.76,3.51-12.76,3.51-2.6,1.35-3.61,5.85-4.2,8.44-1.88,8.29,3,27,3.75,34.29S81,201.44,81,201.44c5.59,6.48,35.88,10.78,50.63,0,0,0,.64-51.27-.81-58.63-2.2-11.14-5.47-16.43-17-17.1Z"
+            style="fill: #f5f5f5"
+          ></path>
+          <path
+            d="M108.86,97.28l-3.29,1.81a2,2,0,0,1,.77-2.62A1.83,1.83,0,0,1,108.86,97.28Z"
+            style="fill: #263238"
+          ></path>
+          <path d="M123.17,98.6l-3-2.31a1.82,1.82,0,0,1,2.61-.4A2,2,0,0,1,123.17,98.6Z" style="fill: #263238"></path>
+          <path
+            d="M93.74,86.81S90.2,87.3,88.9,90c-1.12,2.32-.72,7.92.79,14a56.45,56.45,0,0,0,3.8,11.46,4.7,4.7,0,0,0,2.7,2.17L96,110.37l-.26-5s3.23-4.42,3.59-8c.46-4.66-.52-6.57-.52-6.57Z"
+            style="fill: #263238"
+          ></path>
+          <path
+            d="M99.45,93.81A13.53,13.53,0,0,0,113,107.29c7.46,0,13.06-6.15,13-13.62s-5.66-13.45-13.13-13.42A13.52,13.52,0,0,0,99.45,93.81Z"
+            style="fill: #263238"
+          ></path>
+          <path
+            d="M96,104.52c-1.22,1.06-2.21-1.67-3.23-2.74s-4.37-2.51-6,1,1.46,8.6,4,9.58A3.65,3.65,0,0,0,95.08,111v16c3.85,6.94,10.64,6.72,14.27,6.33s4.42-4.16,1.77-7.2l0-5a28.29,28.29,0,0,0,6.1.29c3.32-.52,5-3,6-6.63,1.6-5.79,2.25-15.51,0-26.74-3.72-2.88-16.62-2.4-24.43,2.55C99.4,100.67,97.16,103.47,96,104.52Z"
+            style="fill: #ffa8a7"
+          ></path>
+          <path
+            d="M123.88,82.49a24.39,24.39,0,0,0,.67-6.37c0-.84-.21-1.86-1-2.18s-1.57.26-2.25.72c-2.88,1.94-6.46,2.49-9.93,2.68-6,.33-15.17-.06-18.22,6.51-.85,1.82-1,3.74.68,5a11.5,11.5,0,0,0,5,1.86c3,.53,6,1.19,9.08,1.6s6.74.81,9.79-.13c2.57-.79,5.18-1.47,7.09-3.51a9.78,9.78,0,0,0,2.62-6.54c0-.34-.07-.77-.41-.86a.78.78,0,0,0-.49.1Z"
+            style="fill: #263238"
+          ></path>
+          <path
+            d="M111.09,121.24s-7.42-1.47-10-2.84a8.57,8.57,0,0,1-3.6-3.54,11.65,11.65,0,0,0,2,4.18c1.91,2.42,11.58,4.17,11.58,4.17Z"
+            style="fill: #f28f8f"
+          ></path>
+          <path d="M109.6,102.19a1.67,1.67,0,1,1-1.67-1.72A1.7,1.7,0,0,1,109.6,102.19Z" style="fill: #263238"></path>
+          <path
+            d="M112,113.74a1.6,1.6,0,0,1-1.56,1.63,1.61,1.61,0,0,1-1.58-1.63,1.59,1.59,0,0,1,1.56-1.62A1.61,1.61,0,0,1,112,113.74Z"
+            style="fill: #b16668"
+          ></path>
+          <path
+            d="M107.5,96.94l-3.44,2.17a2.13,2.13,0,0,1,.66-2.88A2,2,0,0,1,107.5,96.94Z"
+            style="fill: #263238"
+          ></path>
+          <path
+            d="M119.64,94.82l3.62,1.62a1.9,1.9,0,0,1-2.56,1A2.09,2.09,0,0,1,119.64,94.82Z"
+            style="fill: #263238"
+          ></path>
+          <path
+            d="M121.55,101.69a1.61,1.61,0,1,1-1.62-1.67A1.65,1.65,0,0,1,121.55,101.69Z"
+            style="fill: #263238"
+          ></path>
+          <polygon points="113.37 98.87 113.97 109.99 119.24 108.59 113.37 98.87" style="fill: #f28f8f"></polygon>
+          <path
+            d="M20,144.67c1.73.93,8.78,5.89,12.61,6.32,1.62.18,2.06-.08,2-.5-.08-.58-1.11-1.45-1.36-1.92-.43-.82-3-4.22-2-6s1.87-.08,4.25,2.25,4.82,3.14,6.91,5.85,2.79,7,6.25,10.11l13.78,9.41s6.42-29.79,9.24-33.3c3-3.69,15.87,4.35,13.17,16.08S76,185.06,71.72,189.05c-2.76,2.59-8.57.15-15.82-6.3C50.17,177.65,42.32,170,39,167.29s-10.22-4.17-13.39-6c-3.41-2-4.16-3.17-5.47-5.82-1.23-2.49-.68-6.48-1.41-8S18.24,143.74,20,144.67Z"
+            style="fill: #ffa8a7"
+          ></path>
+          <path
+            d="M82.32,129.09c4.42,2.76,4.64,6.78,4.86,11.38a47.57,47.57,0,0,1-2.52,15.84c-1.87,5.79-4.84,16.36-4.84,16.36s-11.54.27-17.48-4.86c0,0,2.71-11.4,4.62-20S71.19,130.06,82.32,129.09Z"
+            style="fill: #e0e0e0"
+          ></path>
+          <path d="M62.39,170.21c3.15,1.75,5,5.51,5.57,7a11,11,0,0,0-5.24-8.53Z" style="fill: #f28f8f"></path>
+        </g>
+        <g id="freepik--Outlet--inject-37">
+          <polygon
+            points="182.11 386.34 259.29 430.9 259.29 447.32 182.11 402.76 182.11 386.34"
+            style="fill: currentColor"
+          ></polygon>
+          <polygon
+            points="182.11 386.34 259.29 430.9 259.29 447.32 182.11 402.76 182.11 386.34"
+            style="opacity: 0.35000000000000003"
+          ></polygon>
+          <polygon
+            points="336.47 386.34 259.29 430.9 259.29 447.32 336.47 402.76 336.47 386.34"
+            style="fill: currentColor"
+          ></polygon>
+          <polygon
+            points="336.47 386.34 259.29 430.9 259.29 447.32 336.47 402.76 336.47 386.34"
+            style="opacity: 0.2"
+          ></polygon>
+          <polygon
+            points="336.47 386.34 259.29 341.79 182.11 386.34 259.29 430.9 336.47 386.34"
+            style="fill: currentColor"
+          ></polygon>
+          <polygon
+            points="336.47 386.34 259.29 341.79 182.11 386.34 259.29 430.9 336.47 386.34"
+            style="opacity: 0.15"
+          ></polygon>
+          <polygon
+            points="259.29 430.9 259.29 426.21 190.23 386.34 182.11 386.34 259.29 430.9"
+            style="opacity: 0.1"
+          ></polygon>
+          <polygon
+            points="259.29 341.79 259.29 346.48 328.35 386.34 336.47 386.34 259.29 341.79"
+            style="opacity: 0.1"
+          ></polygon>
+          <polygon
+            points="336.47 386.34 328.35 386.34 259.29 426.21 259.29 430.9 336.47 386.34"
+            style="fill: currentColor"
+          ></polygon>
+          <polygon
+            points="259.29 341.79 259.29 346.48 190.23 386.34 182.11 386.34 259.29 341.79"
+            style="fill: currentColor"
+          ></polygon>
+          <path
+            d="M259.57,367l33.16,19.14c2.48,1.44,2.48,3.76,0,5.19L268,405.65a9.89,9.89,0,0,1-9,0l-33.16-19.14c-2.48-1.44-2.48-3.76,0-5.19L250.58,367A9.89,9.89,0,0,1,259.57,367Z"
+            style="fill: #37474f"
+          ></path>
+          <path
+            d="M268,405.65l23.91-13.81-32.34-18.67a10,10,0,0,0-9,0L226.66,387,259,405.65A9.89,9.89,0,0,0,268,405.65Z"
+            style="fill: #455a64"
+          ></path>
+          <path
+            d="M239.54,386.37,254.05,378a1.94,1.94,0,0,1,1.74,0l1.78,1c.48.27.48.72,0,1l-14.51,8.37a1.92,1.92,0,0,1-1.73,0l-1.78-1A.53.53,0,0,1,239.54,386.37Z"
+            style="fill: #263238"
+          ></path>
+          <path
+            d="M261.21,398.9l14.51-8.37a1.92,1.92,0,0,1,1.73,0l1.79,1c.48.27.48.72,0,1l-14.51,8.37a1.92,1.92,0,0,1-1.73,0l-1.78-1A.53.53,0,0,1,261.21,398.9Z"
+            style="fill: #263238"
+          ></path>
+          <path
+            d="M225.76,418.77a9.64,9.64,0,0,0-4.38-7.57,3.05,3.05,0,0,0-3.09-.3L216.4,412a3.06,3.06,0,0,0-1.28,2.82,9.69,9.69,0,0,0,4.37,7.58,3.07,3.07,0,0,0,3.1.3l1.88-1.13A3.08,3.08,0,0,0,225.76,418.77Z"
+            style="fill: currentColor"
+          ></path>
+          <path
+            d="M219.49,412.33a9.64,9.64,0,0,1,4.38,7.57c0,2.79-2,3.92-4.38,2.53a9.69,9.69,0,0,1-4.37-7.58C215.12,412.07,217.08,410.94,219.49,412.33Z"
+            style="opacity: 0.1"
+          ></path>
+        </g>
+        <g id="freepik--Cable--inject-37">
+          <path
+            d="M168.76,444.27a28.55,28.55,0,0,1-14-3.39l-51.2-29.56c-4.11-2.38-6.38-5.66-6.38-9.24s2.27-6.85,6.38-9.23l59.32-34.25c6.5-3.75,12-13.26,12-20.77V150.1a2,2,0,0,1,4,0V337.83c0,9.06-6.14,19.71-14,24.24l-59.32,34.25c-2.82,1.63-4.38,3.67-4.38,5.76s1.56,4.14,4.38,5.77l51.2,29.56c6.61,3.82,17.37,3.82,24,0l37.75-21.78a2,2,0,1,1,2,3.46l-37.75,21.79A28.5,28.5,0,0,1,168.76,444.27Z"
+            style="fill: #37474f"
+          ></path>
+        </g>
+        <g id="freepik--exclamation-marks--inject-37">
+          <path
+            d="M78.92,78.31a1,1,0,0,1,.16-.79,1,1,0,0,1,.68-.45l4.86-.94a1,1,0,0,1,.8.16,1.09,1.09,0,0,1,.45.68l.75,3.9a1,1,0,0,1-.17.79,1,1,0,0,1-.67.46l-4.87.93a1,1,0,0,1-.79-.16,1,1,0,0,1-.45-.68ZM74.86,57.25A1.06,1.06,0,0,1,75.7,56l4.87-.94a1,1,0,0,1,.79.17,1,1,0,0,1,.45.67L85,72.57a1,1,0,0,1-.17.79,1,1,0,0,1-.67.45l-4.87.94a1,1,0,0,1-.79-.17,1,1,0,0,1-.45-.67Z"
+            style="fill: currentColor"
+          ></path>
+          <path
+            d="M70.8,94.63a1.06,1.06,0,0,1,.08-1.5l3.69-3.31a1,1,0,0,1,.77-.26,1,1,0,0,1,.73.34l2.65,3a1.06,1.06,0,0,1-.08,1.5L75,97.67a1,1,0,0,1-.77.26,1,1,0,0,1-.73-.34Zm-14.31-16a1.07,1.07,0,0,1-.27-.77,1,1,0,0,1,.35-.73l3.69-3.31a1,1,0,0,1,.77-.27,1,1,0,0,1,.73.35L73.08,86.56a1,1,0,0,1,.26.77,1,1,0,0,1-.34.73l-3.7,3.31a1,1,0,0,1-.76.26,1,1,0,0,1-.74-.34Z"
+            style="fill: currentColor"
+          ></path>
+          <g style="opacity: 0.6000000000000001">
+            <path
+              d="M70.8,94.63a1.06,1.06,0,0,1,.08-1.5l3.69-3.31a1,1,0,0,1,.77-.26,1,1,0,0,1,.73.34l2.65,3a1.06,1.06,0,0,1-.08,1.5L75,97.67a1,1,0,0,1-.77.26,1,1,0,0,1-.73-.34Zm-14.31-16a1.07,1.07,0,0,1-.27-.77,1,1,0,0,1,.35-.73l3.69-3.31a1,1,0,0,1,.77-.27,1,1,0,0,1,.73.35L73.08,86.56a1,1,0,0,1,.26.77,1,1,0,0,1-.34.73l-3.7,3.31a1,1,0,0,1-.76.26,1,1,0,0,1-.74-.34Z"
+              style="fill: #fff"
+            ></path>
+          </g>
+        </g>
+      </g>
+    </g>
+    <g id="freepik--error-404--inject-37">
+      <g id="freepik--Text--inject-37">
+        <path
+          d="M166,48a7.12,7.12,0,0,1,4.77,1.45,5.24,5.24,0,0,1,1.7,4.23,5.34,5.34,0,0,1-1.7,4.26A7.07,7.07,0,0,1,166,59.44H162v5.65a.66.66,0,0,1-.2.49.67.67,0,0,1-.48.2h-2.05a.68.68,0,0,1-.69-.69V48.71a.68.68,0,0,1,.69-.68ZM162,56.27h3.93a4.11,4.11,0,0,0,2.31-.57,2.19,2.19,0,0,0,.86-2,2.14,2.14,0,0,0-.86-2,4.29,4.29,0,0,0-2.31-.54H162Z"
+          style="fill: #455a64"
+        ></path>
+        <path
+          d="M174.76,55.84a3.58,3.58,0,0,1,.47-1.14,4.24,4.24,0,0,1,1-1.14,5.61,5.61,0,0,1,1.65-.88,6.82,6.82,0,0,1,2.27-.34,7.36,7.36,0,0,1,2.33.34,5.13,5.13,0,0,1,1.79,1,4.38,4.38,0,0,1,1.15,1.66,6.13,6.13,0,0,1,.41,2.3v7.45a.67.67,0,0,1-.21.49.66.66,0,0,1-.48.2h-1.92a.68.68,0,0,1-.69-.69v-.83A4.13,4.13,0,0,1,181,65.51a5.48,5.48,0,0,1-2.55.52,6.15,6.15,0,0,1-2-.29,4,4,0,0,1-1.45-.82,3.74,3.74,0,0,1-.9-1.26,3.91,3.91,0,0,1-.31-1.58,3.3,3.3,0,0,1,1.24-2.74A7.21,7.21,0,0,1,178.44,58l4.13-.71a1.62,1.62,0,0,0-.68-1.47,3.22,3.22,0,0,0-1.7-.43,2.24,2.24,0,0,0-1,.18,2.81,2.81,0,0,0-.68.48,1.6,1.6,0,0,1-.42.28,1.16,1.16,0,0,1-.42.08h-2.36a.6.6,0,0,1-.43-.16A.39.39,0,0,1,174.76,55.84ZM179,63a4.55,4.55,0,0,0,1.53-.24,3.46,3.46,0,0,0,1.13-.65,2.68,2.68,0,0,0,.68-.91,2.42,2.42,0,0,0,.23-1V59.9l-3.45.6a3.67,3.67,0,0,0-1.49.52,1.09,1.09,0,0,0-.46.93.83.83,0,0,0,.55.79A3.14,3.14,0,0,0,179,63Z"
+          style="fill: #455a64"
+        ></path>
+        <path
+          d="M195,68.31a3.89,3.89,0,0,0,1.09-.16,2.94,2.94,0,0,0,1-.52,3,3,0,0,0,.75-.9,2.75,2.75,0,0,0,.29-1.28v-.94a4.37,4.37,0,0,1-.53.49,4.06,4.06,0,0,1-.8.5,5.54,5.54,0,0,1-1.09.38,6.1,6.1,0,0,1-1.41.15,5.2,5.2,0,0,1-2.29-.49,5.36,5.36,0,0,1-1.75-1.32,6.17,6.17,0,0,1-1.14-1.9,6.9,6.9,0,0,1-.47-2.25c0-.25,0-.55,0-.88s0-.64,0-.89a6.9,6.9,0,0,1,.47-2.25,6.29,6.29,0,0,1,1.14-1.9A5.36,5.36,0,0,1,192,52.83a5.2,5.2,0,0,1,2.29-.49,6.1,6.1,0,0,1,1.41.15,5.54,5.54,0,0,1,1.09.38,4.06,4.06,0,0,1,.8.5,4.37,4.37,0,0,1,.53.49v-.58a.7.7,0,0,1,.68-.69h1.93a.72.72,0,0,1,.69.69V65.17a6,6,0,0,1-1.72,4.63A6.74,6.74,0,0,1,195,71.36a8,8,0,0,1-2.4-.35,6.51,6.51,0,0,1-1.91-.91,4.84,4.84,0,0,1-1.3-1.29,3,3,0,0,1-.53-1.49.57.57,0,0,1,.19-.48.71.71,0,0,1,.49-.2h1.73a.85.85,0,0,1,.61.24c.17.16.31.31.43.44a2.39,2.39,0,0,0,.9.71A4.21,4.21,0,0,0,195,68.31ZM192,58.48a6.74,6.74,0,0,0,0,1.42,3.37,3.37,0,0,0,1,2.37,3.15,3.15,0,0,0,2.1.72,3.07,3.07,0,0,0,2.09-.74,3,3,0,0,0,1-2.1,8.31,8.31,0,0,0,.05-1,8.5,8.5,0,0,0-.05-1,3,3,0,0,0-3.07-2.84,3.15,3.15,0,0,0-2.1.72A3.37,3.37,0,0,0,192,58.48Z"
+          style="fill: #455a64"
+        ></path>
+        <path
+          d="M204.27,59.19a8.14,8.14,0,0,1,.44-2.68A6.32,6.32,0,0,1,206,54.33a5.82,5.82,0,0,1,2-1.46,6.58,6.58,0,0,1,5.15,0,6.06,6.06,0,0,1,2,1.39,6.35,6.35,0,0,1,1.26,2.06,7.06,7.06,0,0,1,.44,2.47v1.14a.62.62,0,0,1-.2.48.64.64,0,0,1-.48.21h-8.47a2.11,2.11,0,0,0,.24,1,2.24,2.24,0,0,0,.65.75,2.84,2.84,0,0,0,.94.46,3.93,3.93,0,0,0,1.09.15,4.25,4.25,0,0,0,1.31-.17,3,3,0,0,0,.84-.41,2.34,2.34,0,0,1,.46-.28,1.26,1.26,0,0,1,.48-.08h2a.71.71,0,0,1,.49.2.55.55,0,0,1,.19.49,2.19,2.19,0,0,1-.39.91,4.55,4.55,0,0,1-1.1,1.09,7.19,7.19,0,0,1-1.82.91,7.53,7.53,0,0,1-2.49.38,6.49,6.49,0,0,1-2.58-.49,5.44,5.44,0,0,1-2-1.41A6.19,6.19,0,0,1,204.71,62,8.38,8.38,0,0,1,204.27,59.19Zm6.22-3.81a3.19,3.19,0,0,0-1.26.22,2.56,2.56,0,0,0-.87.56,2.38,2.38,0,0,0-.55.76,2.59,2.59,0,0,0-.24.8h5.73a4.2,4.2,0,0,0-.19-.8,2,2,0,0,0-.46-.76,2.29,2.29,0,0,0-.83-.56A3.39,3.39,0,0,0,210.49,55.38Z"
+          style="fill: #455a64"
+        ></path>
+        <path
+          d="M237.64,65.09a.68.68,0,0,1-.68.69H235a.66.66,0,0,1-.48-.2.67.67,0,0,1-.21-.49V58.65a3.82,3.82,0,0,0-.71-2.43,2.58,2.58,0,0,0-2.18-.91,2.61,2.61,0,0,0-2.11.91,3.62,3.62,0,0,0-.78,2.43v6.44a.66.66,0,0,1-.2.49.67.67,0,0,1-.48.2H226a.67.67,0,0,1-.48-.2.66.66,0,0,1-.2-.49V53.28a.62.62,0,0,1,.2-.48.64.64,0,0,1,.48-.21h1.93a.64.64,0,0,1,.48.21.62.62,0,0,1,.2.48v.58a5.77,5.77,0,0,1,1.55-1.09,4.71,4.71,0,0,1,2.1-.43,6.14,6.14,0,0,1,2.59.48,4.44,4.44,0,0,1,1.67,1.29,4.87,4.87,0,0,1,.9,1.89,9.35,9.35,0,0,1,.27,2.27Z"
+          style="fill: #455a64"
+        ></path>
+        <path
+          d="M246.82,52.34a6.94,6.94,0,0,1,2.52.43A6.19,6.19,0,0,1,251.29,54a5.94,5.94,0,0,1,1.32,1.78,5.72,5.72,0,0,1,.57,2.18,4.51,4.51,0,0,1,0,.58v1.41a4.45,4.45,0,0,1,0,.57,6.4,6.4,0,0,1-.58,2.18,5.55,5.55,0,0,1-1.31,1.76,6.16,6.16,0,0,1-1.95,1.18,7.6,7.6,0,0,1-5,0,6.1,6.1,0,0,1-2-1.18,5.52,5.52,0,0,1-1.3-1.76,6.41,6.41,0,0,1-.59-2.18q0-.23,0-.57c0-.23,0-.46,0-.7s0-.47,0-.71,0-.43,0-.58a6.11,6.11,0,0,1,.57-2.18A5.94,5.94,0,0,1,242.34,54a6.13,6.13,0,0,1,2-1.19A6.94,6.94,0,0,1,246.82,52.34Zm3.07,5.7a3.38,3.38,0,0,0-.37-1.3,2.52,2.52,0,0,0-.72-.82,2.41,2.41,0,0,0-.94-.42,4.55,4.55,0,0,0-1-.12,4.48,4.48,0,0,0-1,.12,2.41,2.41,0,0,0-.94.42,2.31,2.31,0,0,0-.72.82,3.21,3.21,0,0,0-.37,1.3c0,.14,0,.31,0,.51s0,.42,0,.64,0,.43,0,.64a4.81,4.81,0,0,0,0,.5,3.17,3.17,0,0,0,.37,1.3,2.44,2.44,0,0,0,.72.83,2.74,2.74,0,0,0,.94.42,5.1,5.1,0,0,0,1,.11,5.17,5.17,0,0,0,1-.11,2.74,2.74,0,0,0,.94-.42,2.67,2.67,0,0,0,.72-.83,3.33,3.33,0,0,0,.37-1.3c0-.12,0-.29,0-.5V58.55C249.91,58.35,249.9,58.18,249.89,58Z"
+          style="fill: #455a64"
+        ></path>
+        <path
+          d="M260.38,61a1.83,1.83,0,0,0,.42,1.26,2.06,2.06,0,0,0,1.56.47h1.55a.65.65,0,0,1,.48.2.66.66,0,0,1,.2.48v1.67a.68.68,0,0,1-.68.69H262a5.27,5.27,0,0,1-3.66-1.16,4.47,4.47,0,0,1-1.28-3.53V55.64h-1.68a.7.7,0,0,1-.68-.69V53.28a.7.7,0,0,1,.68-.69h1.68V48.46a.68.68,0,0,1,.68-.68h1.93a.65.65,0,0,1,.48.2.66.66,0,0,1,.2.48v4.13h3.27a.72.72,0,0,1,.69.69V55a.72.72,0,0,1-.69.69h-3.27Z"
+          style="fill: #455a64"
+        ></path>
+        <path
+          d="M277,52.59h3.52a.67.67,0,0,1,.49.21.66.66,0,0,1,.2.48V55a.66.66,0,0,1-.2.48.67.67,0,0,1-.49.21H277v9.45a.68.68,0,0,1-.68.69h-1.93a.66.66,0,0,1-.48-.2.67.67,0,0,1-.21-.49V55.64H272a.63.63,0,0,1-.48-.21.62.62,0,0,1-.2-.48V53.28a.62.62,0,0,1,.2-.48.63.63,0,0,1,.48-.21h1.67V51.45a5.24,5.24,0,0,1,.36-2.06,3.41,3.41,0,0,1,1-1.39,4.2,4.2,0,0,1,1.59-.76,8.68,8.68,0,0,1,2.06-.22h2.06a.65.65,0,0,1,.48.2.66.66,0,0,1,.2.48v1.67a.68.68,0,0,1-.68.69H279a2.58,2.58,0,0,0-1.47.34,1.47,1.47,0,0,0-.51,1.31Z"
+          style="fill: #455a64"
+        ></path>
+        <path
+          d="M289,52.34a6.94,6.94,0,0,1,2.52.43A6.19,6.19,0,0,1,293.43,54a5.94,5.94,0,0,1,1.32,1.78,5.72,5.72,0,0,1,.57,2.18,4.51,4.51,0,0,1,0,.58v1.41a4.45,4.45,0,0,1,0,.57,6.4,6.4,0,0,1-.58,2.18,5.55,5.55,0,0,1-1.31,1.76,6.16,6.16,0,0,1-1.95,1.18A6.94,6.94,0,0,1,289,66a7,7,0,0,1-2.53-.43,6.16,6.16,0,0,1-1.95-1.18,5.52,5.52,0,0,1-1.3-1.76,6.19,6.19,0,0,1-.59-2.18c0-.15,0-.34,0-.57s0-.46,0-.7,0-.47,0-.71,0-.43,0-.58a5.72,5.72,0,0,1,.57-2.18A5.94,5.94,0,0,1,284.48,54a6.19,6.19,0,0,1,1.95-1.19A7,7,0,0,1,289,52.34ZM292,58a3.38,3.38,0,0,0-.36-1.3,2.43,2.43,0,0,0-.73-.82,2.37,2.37,0,0,0-.93-.42,4.55,4.55,0,0,0-1-.12,4.42,4.42,0,0,0-1,.12,2.41,2.41,0,0,0-.94.42,2.31,2.31,0,0,0-.72.82,3.21,3.21,0,0,0-.37,1.3c0,.14,0,.31,0,.51s0,.42,0,.64,0,.43,0,.64a4.81,4.81,0,0,0,0,.5,3.17,3.17,0,0,0,.37,1.3,2.44,2.44,0,0,0,.72.83,2.74,2.74,0,0,0,.94.42,5,5,0,0,0,1,.11,5.17,5.17,0,0,0,1-.11,2.7,2.7,0,0,0,.93-.42,2.57,2.57,0,0,0,.73-.83,3.33,3.33,0,0,0,.36-1.3,3.25,3.25,0,0,0,0-.5V58.55A3.68,3.68,0,0,0,292,58Z"
+          style="fill: #455a64"
+        ></path>
+        <path
+          d="M298.11,53.28a.7.7,0,0,1,.68-.69h1.93a.72.72,0,0,1,.69.69v6.44a4.14,4.14,0,0,0,.64,2.43,2.42,2.42,0,0,0,2.12.92,2.44,2.44,0,0,0,2.05-.92,3.82,3.82,0,0,0,.71-2.43V53.28a.72.72,0,0,1,.69-.69h1.92a.67.67,0,0,1,.49.21.66.66,0,0,1,.2.48V65.09a.68.68,0,0,1-.69.69h-1.92a.66.66,0,0,1-.48-.2.67.67,0,0,1-.21-.49v-.58a6.22,6.22,0,0,1-1.44,1,4.23,4.23,0,0,1-2.08.47,6,6,0,0,1-2.56-.48,4.19,4.19,0,0,1-1.62-1.29,5,5,0,0,1-.87-1.89,9.87,9.87,0,0,1-.25-2.27Z"
+          style="fill: #455a64"
+        ></path>
+        <path
+          d="M326.1,65.09a.68.68,0,0,1-.68.69h-1.93a.66.66,0,0,1-.48-.2.67.67,0,0,1-.21-.49V58.65a3.82,3.82,0,0,0-.71-2.43,2.58,2.58,0,0,0-2.18-.91,2.61,2.61,0,0,0-2.11.91,3.62,3.62,0,0,0-.78,2.43v6.44a.66.66,0,0,1-.2.49.67.67,0,0,1-.48.2h-1.93a.67.67,0,0,1-.48-.2.66.66,0,0,1-.2-.49V53.28a.62.62,0,0,1,.2-.48.64.64,0,0,1,.48-.21h1.93a.64.64,0,0,1,.48.21.62.62,0,0,1,.2.48v.58a5.77,5.77,0,0,1,1.55-1.09,4.71,4.71,0,0,1,2.1-.43,6.14,6.14,0,0,1,2.59.48,4.44,4.44,0,0,1,1.67,1.29,4.87,4.87,0,0,1,.9,1.89,9.35,9.35,0,0,1,.27,2.27Z"
+          style="fill: #455a64"
+        ></path>
+        <path
+          d="M334.54,52.34a6,6,0,0,1,1.41.15,5.54,5.54,0,0,1,1.09.38,4.06,4.06,0,0,1,.8.5,3.73,3.73,0,0,1,.53.49v-5.4a.68.68,0,0,1,.69-.68H341a.62.62,0,0,1,.48.2.63.63,0,0,1,.21.48V65.09a.67.67,0,0,1-.21.49.66.66,0,0,1-.48.2h-1.92a.68.68,0,0,1-.69-.69v-.58a3.73,3.73,0,0,1-.53.49,4.06,4.06,0,0,1-.8.5,5.54,5.54,0,0,1-1.09.38,6,6,0,0,1-1.41.15,5.2,5.2,0,0,1-2.29-.49,5.36,5.36,0,0,1-1.75-1.32,6.37,6.37,0,0,1-1.14-1.9,6.9,6.9,0,0,1-.47-2.25c0-.25,0-.55,0-.88s0-.64,0-.89a6.9,6.9,0,0,1,.47-2.25,6.49,6.49,0,0,1,1.14-1.9,5.36,5.36,0,0,1,1.75-1.32A5.2,5.2,0,0,1,334.54,52.34Zm-2.36,6.14a6.74,6.74,0,0,0,0,1.42,3.41,3.41,0,0,0,1,2.37,3.17,3.17,0,0,0,2.1.72,3.11,3.11,0,0,0,2.1-.74,3,3,0,0,0,1-2.1,8.31,8.31,0,0,0,.05-1,8.5,8.5,0,0,0-.05-1,3,3,0,0,0-3.07-2.84,3.17,3.17,0,0,0-2.1.72A3.41,3.41,0,0,0,332.18,58.48Z"
+          style="fill: #455a64"
+        ></path>
+        <path
+          d="M196.44,90.76a.59.59,0,0,1,.44.19.6.6,0,0,1,.18.44v2.46a.6.6,0,0,1-.18.44.59.59,0,0,1-.44.19h-11a.58.58,0,0,1-.44-.19.61.61,0,0,1-.19-.44v-15a.61.61,0,0,1,.19-.44.58.58,0,0,1,.44-.19h10.83a.65.65,0,0,1,.63.63V81.3a.61.61,0,0,1-.19.45.6.6,0,0,1-.44.18h-7.16v2.51h6.65a.58.58,0,0,1,.44.19.61.61,0,0,1,.19.44v2.46a.61.61,0,0,1-.19.44.58.58,0,0,1-.44.19h-6.65v2.6Z"
+          style="fill: currentColor"
+        ></path>
+        <path
+          d="M206.66,78.21a10.39,10.39,0,0,1,2.74.33,6,6,0,0,1,2.06,1,4.3,4.3,0,0,1,1.3,1.67,5.73,5.73,0,0,1,.45,2.35,5.37,5.37,0,0,1-.72,2.9,4.61,4.61,0,0,1-2,1.75l2.88,5.53a.56.56,0,0,1,.07.26.51.51,0,0,1-.51.51h-3.16a.87.87,0,0,1-.66-.21,2,2,0,0,1-.32-.42l-2.58-5H204v5a.6.6,0,0,1-.18.44.59.59,0,0,1-.44.19h-3a.59.59,0,0,1-.44-.19.6.6,0,0,1-.18-.44v-15a.6.6,0,0,1,.18-.44.59.59,0,0,1,.44-.19Zm-2.63,7h2.63a3.18,3.18,0,0,0,1.62-.37,1.43,1.43,0,0,0,.63-1.35,1.41,1.41,0,0,0-.63-1.34,3.18,3.18,0,0,0-1.62-.37H204Z"
+          style="fill: currentColor"
+        ></path>
+        <path
+          d="M222.81,78.21a10.39,10.39,0,0,1,2.74.33,6,6,0,0,1,2.06,1,4.21,4.21,0,0,1,1.3,1.67,5.73,5.73,0,0,1,.45,2.35,5.37,5.37,0,0,1-.72,2.9,4.61,4.61,0,0,1-2,1.75l2.88,5.53a.56.56,0,0,1,.07.26.51.51,0,0,1-.51.51h-3.16a.87.87,0,0,1-.66-.21,2,2,0,0,1-.32-.42l-2.58-5h-2.13v5a.61.61,0,0,1-.19.44.59.59,0,0,1-.44.19h-3.05a.59.59,0,0,1-.44-.19.6.6,0,0,1-.18-.44v-15a.6.6,0,0,1,.18-.44.59.59,0,0,1,.44-.19Zm-2.62,7h2.62a3.18,3.18,0,0,0,1.62-.37,1.43,1.43,0,0,0,.63-1.35,1.41,1.41,0,0,0-.63-1.34,3.18,3.18,0,0,0-1.62-.37h-2.62Z"
+          style="fill: currentColor"
+        ></path>
+        <path
+          d="M231.5,84.28a7.14,7.14,0,0,1,.57-2.45,5.8,5.8,0,0,1,1.42-2,6.62,6.62,0,0,1,2.23-1.35,9.4,9.4,0,0,1,6.05,0A6.72,6.72,0,0,1,244,79.83a5.77,5.77,0,0,1,1.41,2,6.71,6.71,0,0,1,.57,2.45c0,.66.05,1.36.05,2.09s0,1.41-.05,2a6.81,6.81,0,0,1-.57,2.46,6.1,6.1,0,0,1-1.41,2,6.54,6.54,0,0,1-2.25,1.34,9.58,9.58,0,0,1-6.05,0,6.45,6.45,0,0,1-2.23-1.34,6.13,6.13,0,0,1-1.42-2,7.25,7.25,0,0,1-.57-2.46c0-.63,0-1.31,0-2S231.47,84.94,231.5,84.28Zm10.2,4c0-.28,0-.59.05-.93s0-.69,0-1.05,0-.7,0-1,0-.63-.05-.9a3.57,3.57,0,0,0-.24-1.06,2.47,2.47,0,0,0-.56-.85,2.62,2.62,0,0,0-.89-.57,3.47,3.47,0,0,0-1.26-.21,3.37,3.37,0,0,0-1.25.21,2.57,2.57,0,0,0-.9.57,2.62,2.62,0,0,0-.56.85,3.57,3.57,0,0,0-.24,1.06q0,.4-.06.9c0,.33,0,.68,0,1s0,.71,0,1.05,0,.65.06.93a3.13,3.13,0,0,0,.8,1.93,2.79,2.79,0,0,0,2.15.76,2.75,2.75,0,0,0,2.14-.76A3.26,3.26,0,0,0,241.7,88.3Z"
+          style="fill: currentColor"
+        ></path>
+        <path
+          d="M255.65,78.21a10.45,10.45,0,0,1,2.74.33,5.91,5.91,0,0,1,2.05,1,4.32,4.32,0,0,1,1.31,1.67,5.73,5.73,0,0,1,.45,2.35,5.37,5.37,0,0,1-.72,2.9,4.58,4.58,0,0,1-2.05,1.75l2.88,5.53a.59.59,0,0,1,.08.26.5.5,0,0,1-.16.36.49.49,0,0,1-.36.15h-3.16a.87.87,0,0,1-.66-.21,1.89,1.89,0,0,1-.31-.42l-2.58-5H253v5a.65.65,0,0,1-.63.63h-3a.65.65,0,0,1-.63-.63v-15a.65.65,0,0,1,.63-.63Zm-2.63,7h2.63a3.14,3.14,0,0,0,1.61-.37,1.41,1.41,0,0,0,.64-1.35,1.4,1.4,0,0,0-.64-1.34,3.14,3.14,0,0,0-1.61-.37H253Z"
+          style="fill: currentColor"
+        ></path>
+        <path
+          d="M277.47,94.48a.61.61,0,0,1-.45-.19.6.6,0,0,1-.18-.44V91.48h-7.32a.6.6,0,0,1-.44-.18.61.61,0,0,1-.19-.45V88.39a1.63,1.63,0,0,1,.3-1l6.95-8.76a1.38,1.38,0,0,1,.38-.34,1.26,1.26,0,0,1,.48-.08h3.51a.58.58,0,0,1,.44.19.61.61,0,0,1,.19.44v8.92h2a.63.63,0,0,1,.44.19.6.6,0,0,1,.18.44v2.46a.64.64,0,0,1-.18.45.62.62,0,0,1-.44.18h-2v2.37a.61.61,0,0,1-.19.44.58.58,0,0,1-.44.19ZM277,87.76V83.49l-3.39,4.27Z"
+          style="fill: currentColor"
+        ></path>
+        <path
+          d="M292.5,78a8,8,0,0,1,3,.51,6,6,0,0,1,2.08,1.37,5.62,5.62,0,0,1,1.23,2,8.82,8.82,0,0,1,.48,2.41c0,.66,0,1.36,0,2.09s0,1.41,0,2a8.82,8.82,0,0,1-.48,2.41,5.46,5.46,0,0,1-1.23,2,6,6,0,0,1-2.08,1.37,9.08,9.08,0,0,1-6,0,6,6,0,0,1-2.08-1.37,5.46,5.46,0,0,1-1.23-2,8.82,8.82,0,0,1-.48-2.41c0-.63,0-1.31,0-2s0-1.43,0-2.09a8.82,8.82,0,0,1,.48-2.41,5.62,5.62,0,0,1,1.23-2,6,6,0,0,1,2.08-1.37A8,8,0,0,1,292.5,78ZM295,88.3c.06-1.32.06-2.62,0-3.91a5.58,5.58,0,0,0-.18-1.06,2.31,2.31,0,0,0-.4-.85,2,2,0,0,0-.75-.57,2.8,2.8,0,0,0-1.16-.21,2.83,2.83,0,0,0-1.16.21,2,2,0,0,0-.75.57,2.49,2.49,0,0,0-.41.85,4.35,4.35,0,0,0-.17,1.06,36.43,36.43,0,0,0,0,3.91,5.75,5.75,0,0,0,.15,1.07,2.42,2.42,0,0,0,.42.85,2,2,0,0,0,.76.56,2.83,2.83,0,0,0,1.16.21,2.8,2.8,0,0,0,1.16-.21,2,2,0,0,0,.76-.56,2.42,2.42,0,0,0,.42-.85A5.75,5.75,0,0,0,295,88.3Z"
+          style="fill: currentColor"
+        ></path>
+        <path
+          d="M309.79,94.48a.65.65,0,0,1-.63-.63V91.48h-7.32a.6.6,0,0,1-.44-.18.65.65,0,0,1-.19-.45V88.39a1.57,1.57,0,0,1,.31-1l6.94-8.76a1.27,1.27,0,0,1,.39-.34,1.17,1.17,0,0,1,.47-.08h3.51a.65.65,0,0,1,.63.63v8.92h2a.65.65,0,0,1,.63.63v2.46a.65.65,0,0,1-.19.45.6.6,0,0,1-.44.18h-2v2.37a.65.65,0,0,1-.63.63Zm-.51-6.72V83.49l-3.39,4.27Z"
+          style="fill: currentColor"
+        ></path>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>
--- a/src/components/icons/Icon500.vue
+++ b/src/components/icons/Icon500.vue
--- a/src/components/icons/IconBorders.vue
+++ b/src/components/icons/IconBorders.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg width="18" height="18" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M39.3 6H8.7C7.20883 6 6 7.20883 6 8.7V39.3C6 40.7912 7.20883 42 8.7 42H39.3C40.7912 42 42 40.7912 42 39.3V8.7C42 7.20883 40.7912 6 39.3 6Z"
+      stroke="currentColor"
+      stroke-width="4"
+    />
+    <path d="M24 6L24 42" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
+    <path d="M6 24H42" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
+  </svg>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>
--- a/src/components/icons/IconTableSize.vue
+++ b/src/components/icons/IconTableSize.vue
@@ -0,0 +1,11 @@
+<template>
+  <svg width="17" height="17" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="4">
+    <path d="M24 12V36M18 17 24 12 30 17M30 31 24 36 18 31" stroke-width="3.5"></path>
+    <path d="M6 5H42"></path>
+    <path d="M6 43H42"></path>
+  </svg>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>
--- a/src/components/icons/IconTreeAdd.vue
+++ b/src/components/icons/IconTreeAdd.vue
@@ -0,0 +1,21 @@
+<template>
+  <svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect
+      x="6"
+      y="6"
+      width="36"
+      height="36"
+      rx="3"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="4"
+      stroke-linejoin="round"
+    />
+    <path d="M24 16V32" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M16 24L32 24" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+  </svg>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>
--- a/src/components/icons/IconTreeReduce.vue
+++ b/src/components/icons/IconTreeReduce.vue
@@ -0,0 +1,20 @@
+<template>
+  <svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect
+      x="6"
+      y="6"
+      width="36"
+      height="36"
+      rx="3"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="4"
+      stroke-linejoin="round"
+    />
+    <path d="M16 24L32 24" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+  </svg>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>
--- a/src/config/setting.json
+++ b/src/config/setting.json
@@ -0,0 +1,12 @@
+{
+  "theme": "light",
+  "themeColor": "#165DFF",
+  "tab": true,
+  "tabMode": "card",
+  "animate": false,
+  "animateMode": "zoom-fade",
+  "menuCollapse": true,
+  "menuAccordion": true,
+  "menuDark": false,
+  "layout": "left"
+}
--- a/src/constant/common.ts
+++ b/src/constant/common.ts
@@ -0,0 +1,5 @@
+type LabelValueItem = { label: string; value: number; color: string }
+export const DisEnableStatusList: LabelValueItem[] = [
+  { label: '启用', value: 1, color: 'green' },
+  { label: '禁用', value: 2, color: 'red' }
+]
--- a/src/constant/file.ts
+++ b/src/constant/file.ts
@@ -0,0 +1,45 @@
+export interface FileTypeListItem {
+  name: string
+  value: string
+  menuIcon: string
+  icon: string
+}
+
+/** 文件分类 */
+export const FileTypeList: FileTypeListItem[] = [
+  { name: '全部', value: '0', menuIcon: 'menu-file', icon: 'icon-stamp' },
+  { name: '图片', value: '2', menuIcon: 'file-image', icon: 'icon-file-image' },
+  { name: '文档', value: '3', menuIcon: 'file-txt', icon: 'icon-file' },
+  { name: '视频', value: '4', menuIcon: 'file-video', icon: 'icon-video-camera' },
+  { name: '音频', value: '5', menuIcon: 'file-music', icon: 'icon-file-audio' },
+  { name: '其他', value: '1', menuIcon: 'file-other', icon: 'icon-bulb' }
+]
+
+export interface FileExtendNameIconMap {
+  [key: string]: string
+}
+
+/** 文件类型图标 Map 映射 */
+export const FileIcon: FileExtendNameIconMap = {
+  mp3: 'file-music',
+  mp4: 'file-video',
+  dir: 'file-dir',
+  ppt: 'file-ppt',
+  doc: 'file-wps',
+  docx: 'file-wps',
+  xls: 'file-excel',
+  xlsx: 'file-excel',
+  txt: 'file-txt',
+  rar: 'file-rar',
+  zip: 'file-zip',
+  html: 'file-html',
+  css: 'file-css',
+  js: 'file-js',
+  other: 'file-other' // 未知文件
+}
+
+/** 图片类型 */
+export const ImageTypes = ['jpg', 'png', 'gif', 'jpeg']
+
+/** WPS、Office文件类型 */
+export const OfficeTypes = ['ppt', 'pptx', 'doc', 'docx', 'xls', 'xlsx']
--- a/src/directives/index.ts
+++ b/src/directives/index.ts
@@ -0,0 +1,10 @@
+import type { App } from 'vue'
+import hasPerm from './permission/hasPerm'
+import hasRole from './permission/hasRole'
+
+export default {
+  install(Vue: App) {
+    Vue.directive('hasPerm', hasPerm)
+    Vue.directive('hasRole', hasRole)
+  }
+}
--- a/src/directives/permission/hasPerm.ts
+++ b/src/directives/permission/hasPerm.ts
@@ -0,0 +1,35 @@
+import type { DirectiveBinding, Directive } from 'vue'
+import { useUserStore } from '@/stores'
+
+/**
+ * @desc v-hasPerm 操作权限处理
+ * @desc 使用 v-hasPerm="['home:btn:add']"
+ */
+function checkPermission(el: HTMLElement, binding: DirectiveBinding) {
+  const userStore = useUserStore()
+  const { value } = binding
+  const all_permission = '*:*:*'
+
+  if (value && Array.isArray(value) && value.length) {
+    const permissionValues: string[] = value
+    const hasPermission = userStore.permissions.some((perm) => {
+      return all_permission === perm || permissionValues.includes(perm)
+    })
+    if (!hasPermission) {
+      el.parentNode && el.parentNode.removeChild(el)
+    }
+  } else {
+    throw new Error(`need permission! Like v-hasPerm="['home:btn:edit','home:btn:delete']"`)
+  }
+}
+
+const directive: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    checkPermission(el, binding)
+  },
+  updated(el: HTMLElement, binding: DirectiveBinding) {
+    checkPermission(el, binding)
+  }
+}
+
+export default directive
--- a/src/directives/permission/hasRole.ts
+++ b/src/directives/permission/hasRole.ts
@@ -0,0 +1,34 @@
+import type { DirectiveBinding, Directive } from 'vue'
+import { useUserStore } from '@/stores'
+
+/**
+ * @desc v-hasRole 角色权限处理
+ * @desc 使用 v-hasRole="['admin', 'user]"
+ */
+function checkRole(el: HTMLElement, binding: DirectiveBinding) {
+  const userStore = useUserStore()
+  const { value } = binding
+  const super_admin = 'role_admin'
+  if (value && Array.isArray(value) && value.length) {
+    const roleValues: string[] = value
+    const hasRole = userStore.roles.some((role) => {
+      return super_admin === role || roleValues.includes(role)
+    })
+    if (!hasRole) {
+      el.parentNode && el.parentNode.removeChild(el)
+    }
+  } else {
+    throw new Error(`need role! Like v-hasRole="['admin','user']"`)
+  }
+}
+
+const directive: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    checkRole(el, binding)
+  },
+  updated(el: HTMLElement, binding: DirectiveBinding) {
+    checkRole(el, binding)
+  }
+}
+
+export default directive
--- a/src/hooks/app/index.ts
+++ b/src/hooks/app/index.ts
@@ -0,0 +1,4 @@
+export * from './useDept'
+export * from './useRole'
+export * from './useDict'
+export * from './useFormCurd'
--- a/src/hooks/app/useDept.ts
+++ b/src/hooks/app/useDept.ts
@@ -0,0 +1,21 @@
+import { ref } from 'vue'
+import { listDeptTree } from '@/apis'
+import type { TreeNodeData } from '@arco-design/web-vue'
+
+/** 部门模块 */
+export function useDept(options?: { onSuccess?: () => void }) {
+  const loading = ref(false)
+  const deptList = ref<TreeNodeData[]>([])
+
+  const getDeptList = async (name?: string) => {
+    try {
+      loading.value = true
+      const res = await listDeptTree({ description: name })
+      deptList.value = res.data
+      options?.onSuccess && options.onSuccess()
+    } finally {
+      loading.value = false
+    }
+  }
+  return { deptList, getDeptList, loading }
+}
--- a/src/hooks/app/useDict.ts
+++ b/src/hooks/app/useDict.ts
@@ -0,0 +1,23 @@
+import { ref, toRefs } from 'vue'
+import { listCommonDict } from '@/apis'
+import { useDictStore } from '@/stores'
+
+export function useDict(...codes: Array<string>) {
+  const res = ref<any>({})
+  return (() => {
+    const dictStore = useDictStore()
+    codes.forEach((code) => {
+      res.value[code] = []
+      const dict = dictStore.getDict(code)
+      if (dict) {
+        res.value[code] = dict
+      } else {
+        listCommonDict(code).then((resp) => {
+          res.value[code] = resp.data
+          dictStore.setDict(code, res.value[code])
+        })
+      }
+    })
+    return toRefs(res.value)
+  })()
+}
--- a/src/hooks/app/useFormCurd.ts
+++ b/src/hooks/app/useFormCurd.ts
@@ -0,0 +1,107 @@
+import { reactive, computed, ref, type Ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { Modal, Message, type FormInstance } from '@arco-design/web-vue'
+import { isEqual } from 'lodash'
+
+type Option<T> = {
+  key?: string
+  formRef?: Ref<FormInstance>
+  initApi: () => Promise<ApiRes<T>>
+  detailApi: (form: T) => Promise<ApiRes<T>>
+  addApi: (form: T) => Promise<ApiRes<T>>
+  editApi: (form: T) => Promise<ApiRes<T>>
+  onError?: (error: any) => void
+  onSuccess?: (result: T) => void
+  addToEdit?: boolean // 新增成功调到编辑
+}
+
+export function useFormCurd<T = any>(option: Option<T>) {
+  const route = useRoute()
+  const router = useRouter()
+
+  const form = reactive({})
+  const originForm = reactive({}) // 原始表单数据
+  const isEdit = computed(() => !!route.query[option?.key || 'id'])
+  const isChanged = ref(false) // 表单的数据是否改变过
+  const loading = ref(false)
+  const saveLoading = ref(false) // 保存按钮的加载状态
+  const title = computed(() => (isEdit.value ? '编辑' : '新增'))
+
+  const initForm = async () => {
+    try {
+      loading.value = true
+      const res = isEdit.value ? await option.detailApi(form as T) : await option.initApi()
+      if (res.success) {
+        Object.assign(form, res.data)
+        Object.assign(originForm, res.data)
+        isChanged.value = false
+      }
+    } catch (error) {
+      option.onError && option.onError(error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  initForm()
+
+  watch(
+    () => route.query,
+    () => {
+      initForm()
+    }
+  )
+
+  watch(
+    () => form,
+    (newVal) => {
+      // console.log('newVal', toRaw(newVal))
+      // console.log('originForm', toRaw(originForm))
+      if (!isEqual(newVal, originForm)) {
+        isChanged.value = true
+      }
+    },
+    { immediate: true, deep: true }
+  )
+
+  const save = async () => {
+    try {
+      const valid = await option?.formRef?.value?.validate()
+      if (valid) return
+      saveLoading.value = true
+      const res = isEdit.value ? await option.editApi(form as T) : await option.addApi(form as T)
+      if (res.success) {
+        Message.success(isEdit.value ? '修改成功' : '新增成功')
+        if (!isEdit.value && option.addToEdit === true) {
+          router.replace({ path: route.fullPath, query: { [option.key as string]: res.data[option.key as string] } })
+        }
+        option.onSuccess && option.onSuccess(res.data)
+      }
+    } catch (error) {
+      option.onError && option.onError(error)
+    } finally {
+      saveLoading.value = false
+    }
+  }
+
+  const back = () => {
+    if (isChanged.value) {
+      Modal.warning({
+        title: '提示',
+        content: '您确定丢弃更改的内容吗？',
+        hideCancel: false,
+        onOk: () => {
+          router.back()
+        }
+      })
+    } else {
+      router.back()
+    }
+  }
+
+  const reset = () => {
+    option?.formRef?.value?.resetFields()
+  }
+
+  return { form: form as T, title, loading, isEdit, back, save, saveLoading, reset }
+}
--- a/src/hooks/app/useRole.ts
+++ b/src/hooks/app/useRole.ts
@@ -0,0 +1,21 @@
+import { ref } from 'vue'
+import { listRoleDict } from '@/apis'
+import type { LabelValueState } from '@/types/global'
+
+/** 角色模块 */
+export function useRole(options?: { onSuccess?: () => void }) {
+  const loading = ref(false)
+  const roleList = ref<LabelValueState[]>([])
+
+  const getRoleList = async () => {
+    try {
+      loading.value = true
+      const res = await listRoleDict()
+      roleList.value = res.data
+      options?.onSuccess && options.onSuccess()
+    } finally {
+      loading.value = false
+    }
+  }
+  return { roleList, getRoleList, loading }
+}
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -0,0 +1,9 @@
+export * from './modules/useLoading'
+export * from './modules/usePagination'
+export * from './modules/useRequest'
+export * from './modules/useChart'
+export * from './modules/useTable'
+export * from './modules/useForm'
+export * from './modules/useDevice'
+export * from './modules/useBreakpoint'
+export * from './modules/useBreakpointIndex'
--- a/src/hooks/modules/useBreakpoint.ts
+++ b/src/hooks/modules/useBreakpoint.ts
@@ -0,0 +1,24 @@
+import { computed, type ComputedRef } from 'vue'
+import { useBreakpoints } from '@vueuse/core'
+import type { ColProps } from '@arco-design/web-vue'
+
+type ColBreakpoint = Pick<ColProps, 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'>
+type Breakpoint = keyof ColBreakpoint
+
+export function useBreakpoint() {
+  const breakpoints = useBreakpoints({
+    xs: 576, // <576
+    sm: 576, // >= 576
+    md: 768, // >=768
+    lg: 992, // >=992
+    xl: 1200, // >=1200
+    xxl: 1600 // >=1600
+  })
+
+  const arr = breakpoints.current() as ComputedRef<Breakpoint[]>
+  const breakpoint = computed(() => {
+    return arr.value[arr.value.length - 1] || 'xs'
+  })
+
+  return { breakpoint }
+}
--- a/src/hooks/modules/useBreakpointIndex.ts
+++ b/src/hooks/modules/useBreakpointIndex.ts
@@ -0,0 +1,24 @@
+import { useBreakpoint } from '@/hooks'
+
+type BreakpointMap = {
+  xs: number
+  sm: number
+  md: number
+  lg: number
+  xl: number
+  xxl: number
+}
+
+export function useBreakpointIndex(callback: (v: number) => void, breakpointObj?: BreakpointMap) {
+  const { breakpoint } = useBreakpoint()
+
+  watch(
+    () => breakpoint.value,
+    (v) => {
+      const def = { xs: 0, sm: 0, md: 0, lg: 1, xl: 1, xxl: 2 }
+      const obj = breakpointObj ? breakpointObj : def
+      callback(obj[v as keyof typeof obj])
+    },
+    { immediate: true }
+  )
+}
--- a/src/hooks/modules/useChart.ts
+++ b/src/hooks/modules/useChart.ts
@@ -0,0 +1,26 @@
+import { computed } from 'vue'
+import type { EChartsOption } from 'echarts'
+import { useAppStore } from '@/stores'
+
+// 获取代码提示
+// 从'echarts'中导入{ SeriesOption };
+// 因为配置项太多，这提供了一个相对方便的代码提示。
+// 当使用vue时，注意反应性问题。需要保证对应的函数可以被触发，TypeScript不会报错，代码编写方便。
+
+interface optionsFn {
+  (isDark: boolean): EChartsOption
+}
+
+export function useChart(sourceOption: optionsFn) {
+  const appStore = useAppStore()
+  const isDark = computed(() => appStore.theme === 'dark')
+
+  // echarts support https://echarts.apache.org/zh/theme-builder.html
+  // 这里不使用
+  // TODO 图表主题
+  const option = computed<EChartsOption>(() => {
+    return sourceOption(isDark.value)
+  })
+
+  return { option }
+}
--- a/src/hooks/modules/useDevice.ts
+++ b/src/hooks/modules/useDevice.ts
@@ -0,0 +1,17 @@
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+/**
+ * 响应式布局容器固定宽度
+ *
+ * 大屏（>=1200px）
+ * 中屏（>=992px）
+ * 小屏（>=768px）
+ */
+export function useDevice() {
+  const { width } = useWindowSize()
+  const isDesktop = computed(() => width.value > 768)
+  const isMobile = computed(() => !isDesktop.value)
+
+  return { isMobile, isDesktop }
+}
--- a/src/hooks/modules/useForm.ts
+++ b/src/hooks/modules/useForm.ts
@@ -0,0 +1,17 @@
+import { reactive } from 'vue'
+import _ from 'lodash'
+
+export function useForm<F extends object>(initValue: F) {
+  const getInitValue = () => _.cloneDeep(initValue)
+
+  const form = reactive(getInitValue())
+
+  const resetForm = () => {
+    for (const key in form) {
+      delete form[key]
+    }
+    Object.assign(form, getInitValue())
+  }
+
+  return { form, resetForm }
+}
--- a/src/hooks/modules/useLoading.ts
+++ b/src/hooks/modules/useLoading.ts
@@ -0,0 +1,19 @@
+import { ref } from 'vue'
+
+export function useLoading(initValue = false) {
+  const loading = ref(initValue)
+
+  const setLoading = (value: boolean) => {
+    loading.value = value
+  }
+
+  const toggle = () => {
+    loading.value = !loading.value
+  }
+
+  return {
+    loading,
+    setLoading,
+    toggle
+  }
+}
--- a/src/hooks/modules/usePagination.ts
+++ b/src/hooks/modules/usePagination.ts
@@ -0,0 +1,57 @@
+import { reactive, toRefs, watch } from 'vue'
+import { useBreakpoint } from '@/hooks'
+
+type Callback = () => void
+
+type Options = {
+  defaultPageSize: number
+}
+
+export function usePagination(callback: Callback, options: Options = { defaultPageSize: 10 }) {
+  const { breakpoint } = useBreakpoint()
+
+  const pagination = reactive({
+    showPageSize: true,
+    showTotal: true,
+    current: 1,
+    pageSize: options.defaultPageSize,
+    total: 0,
+    simple: false,
+    onChange: (size: number) => {
+      pagination.current = size
+      callback && callback()
+    },
+    onPageSizeChange: (size: number) => {
+      pagination.current = 1
+      pagination.pageSize = size
+      callback && callback()
+    }
+  })
+
+  watch(
+    () => breakpoint.value,
+    () => {
+      pagination.simple = ['xs'].includes(breakpoint.value)
+      pagination.showTotal = !['xs'].includes(breakpoint.value)
+    },
+    { immediate: true }
+  )
+
+  const changeCurrent = pagination.onChange
+  const changePageSize = pagination.onPageSizeChange
+  function setTotal(value: number) {
+    pagination.total = value
+  }
+
+  const { current, pageSize, total } = toRefs(pagination)
+
+  return {
+    current,
+    pageSize,
+    total,
+    pagination,
+    changeCurrent,
+    changePageSize,
+    setTotal
+  }
+}
--- a/src/hooks/modules/useRequest.ts
+++ b/src/hooks/modules/useRequest.ts
@@ -0,0 +1,20 @@
+import { ref, type UnwrapRef } from 'vue'
+import type { AxiosResponse } from 'axios'
+import { useLoading } from '@/hooks'
+
+export function useRequest<T>(
+  api: () => Promise<AxiosResponse<ApiRes<T>>>,
+  defaultValue = [] as unknown as T,
+  isLoading = true
+) {
+  const { loading, setLoading } = useLoading(isLoading)
+  const response = ref<T>(defaultValue)
+  api()
+    .then((res) => {
+      response.value = res.data as unknown as UnwrapRef<T>
+    })
+    .finally(() => {
+      setLoading(false)
+    })
+  return { loading, response }
+}
--- a/src/hooks/modules/useTable.ts
+++ b/src/hooks/modules/useTable.ts
@@ -0,0 +1,88 @@
+import type { TableInstance, TableData } from '@arco-design/web-vue'
+import { Modal, Message } from '@arco-design/web-vue'
+import { usePagination } from '@/hooks'
+
+interface Options<T> {
+  formatResult?: (data: T[]) => any
+  onSuccess?: () => void
+  immediate?: boolean
+  rowKey?: keyof T
+}
+
+type PaginationParams = { page: number; size: number }
+type Api<T> = (params: PaginationParams) => Promise<ApiRes<PageRes<T[]>>>
+
+export function useTable<T>(api: Api<T>, options?: Options<T>) {
+  const { formatResult, onSuccess, immediate, rowKey } = options || {}
+  const { pagination, setTotal } = usePagination(() => getTableData())
+  const loading = ref(false)
+  const tableData = ref<T[]>([])
+
+  const getTableData = async () => {
+    try {
+      loading.value = true
+      const res = await api({ page: pagination.current, size: pagination.pageSize })
+      tableData.value = formatResult ? formatResult(res.data.list) : res.data.list
+      setTotal(res.data.total)
+      onSuccess && onSuccess()
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 是否立即出发
+  const isImmediate = immediate ?? true
+  isImmediate && getTableData()
+
+  // 查询
+  const search = () => {
+    selectedKeys.value = []
+    pagination.onChange(1)
+  }
+
+  // 多选
+  const selectedKeys = ref<(string | number)[]>([])
+  const select: TableInstance['onSelect'] = (rowKeys) => {
+    selectedKeys.value = rowKeys
+  }
+
+  // 全选
+  const selectAll: TableInstance['onSelectAll'] = (checked) => {
+    const key = rowKey ?? 'id'
+    const arr = (tableData.value as TableData[]).filter((i) => !(i?.disabled ?? false))
+    selectedKeys.value = checked ? arr.map((i) => i[key as string]) : []
+  }
+
+  // 删除
+  const handleDelete = async <T>(
+    deleteApi: () => Promise<ApiRes<T>>,
+    options?: { title?: string; content?: string; successTip?: string; showModal?: boolean }
+  ): Promise<boolean | undefined> => {
+    const onDelete = async () => {
+      try {
+        const res = await deleteApi()
+        if (res.success) {
+          Message.success(options?.successTip || '删除成功')
+          selectedKeys.value = []
+          getTableData()
+        }
+        return true
+      } catch (error) {
+        return true
+      }
+    }
+    const flag = options?.showModal ?? true // 是否显示对话框
+    if (!flag) {
+      return onDelete()
+    }
+    Modal.warning({
+      title: options?.title || '提示',
+      content: options?.content || '是否确定删除该条数据？',
+      hideCancel: false,
+      maskClosable: false,
+      onBeforeOk: onDelete
+    })
+  }
+
+  return { loading, tableData, getTableData, search, pagination, selectedKeys, select, selectAll, handleDelete }
+}
--- a/src/layout/LayoutDefault.vue
+++ b/src/layout/LayoutDefault.vue
@@ -0,0 +1,32 @@
+<template>
+  <a-layout class="layout layout-default">
+    <Asider></Asider>
+    <a-layout class="layout-default-right">
+      <Header></Header>
+      <Tabs></Tabs>
+      <Main></Main>
+    </a-layout>
+  </a-layout>
+</template>
+
+<script setup lang="ts">
+import Asider from './components/Asider/index.vue'
+import Header from './components/Header/index.vue'
+import Main from './components/Main.vue'
+import Tabs from './components/Tabs/index.vue'
+
+defineOptions({ name: 'LayoutDefault' })
+</script>
+
+<style lang="scss" scoped>
+.layout {
+  height: 100%;
+}
+
+.layout-default {
+  flex-direction: row;
+  &-right {
+    overflow: hidden;
+  }
+}
+</style>
--- a/src/layout/LayoutMix.vue
+++ b/src/layout/LayoutMix.vue
@@ -0,0 +1,178 @@
+<template>
+  <div class="layout-mix">
+    <section
+      v-if="isDesktop"
+      class="layout-mix-left"
+      :class="{ 'app-menu-dark': appStore.menuDark }"
+      :style="appStore.menuDark ? appStore.themeCSSVar : undefined"
+    >
+      <Logo :collapsed="appStore.menuCollapse"></Logo>
+      <Menu :menus="leftMenus" :menu-style="{ width: '200px', flex: 1 }"></Menu>
+    </section>
+
+    <section class="layout-mix-right">
+      <header class="header">
+        <MenuFoldBtn></MenuFoldBtn>
+        <a-menu
+          v-if="isDesktop"
+          mode="horizontal"
+          :selected-keys="activeMenu"
+          :auto-open-selected="false"
+          :trigger-props="{ animationName: 'slide-dynamic-origin' }"
+          @menu-item-click="onMenuItemClick"
+        >
+          <a-menu-item v-for="item in topMenus" :key="item.path">
+            <template #icon>
+              <GiSvgIcon
+                v-if="getMenuIcon(item, 'svgIcon')"
+                :name="getMenuIcon(item, 'svgIcon')"
+                :size="24"
+              ></GiSvgIcon>
+              <template v-else>
+                <component v-if="getMenuIcon(item, 'svgIcon')" :is="getMenuIcon(item, 'icon')"></component>
+              </template>
+            </template>
+            <span>{{ item.meta?.title || item.children?.[0]?.meta?.title || '' }}</span>
+          </a-menu-item>
+        </a-menu>
+        <HeaderRightBar></HeaderRightBar>
+      </header>
+
+      <Tabs></Tabs>
+      <Main></Main>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Main from './components/Main.vue'
+import Tabs from './components/Tabs/index.vue'
+import Menu from './components/Menu/index.vue'
+import HeaderRightBar from './components/HeaderRightBar/index.vue'
+import Logo from './components/Logo.vue'
+import MenuFoldBtn from './components/MenuFoldBtn.vue'
+import { useAppStore, useRouteStore } from '@/stores'
+import type { RouteRecordRaw } from 'vue-router'
+import { isExternal } from '@/utils/validate'
+import { searchTree } from 'xe-utils'
+import { filterTree } from '@/utils'
+import { useDevice } from '@/hooks'
+
+defineOptions({ name: 'LayoutMix' })
+const route = useRoute()
+const router = useRouter()
+const appStore = useAppStore()
+const routeStore = useRouteStore()
+const { isDesktop } = useDevice()
+// 过滤是菜单的路由
+const menuRoutes = filterTree(routeStore.routes, (i) => i.meta?.hidden === false)
+
+// 顶部一级菜单
+const topMenus = ref<RouteRecordRaw[]>([])
+topMenus.value = JSON.parse(JSON.stringify(menuRoutes))
+console.log('topMenus', toRaw(topMenus.value))
+
+const getMenuIcon = (item: RouteRecordRaw, key: 'svgIcon' | 'icon') => {
+  return item.meta?.[key] || item.children?.[0].meta?.[key]
+}
+
+const onMenuItemClick = (key: string) => {
+  if (isExternal(key)) {
+    window.open(key)
+    return
+  }
+  setTimeout(() => getLeftMenus(key))
+  const obj = topMenus.value.find((i) => i.path === key)
+  if (obj && obj.redirect === 'noRedirect') return
+  router.push({ path: key })
+}
+
+// 克隆是菜单的路由
+const cloneMenuRoutes: RouteRecordRaw[] = JSON.parse(JSON.stringify(menuRoutes))
+// 顶部一级菜单选中的
+const activeMenu = ref<string[]>([])
+// 左侧的菜单
+const leftMenus = ref<RouteRecordRaw[]>([])
+// 获取左侧菜单
+const getLeftMenus = (key: string) => {
+  const arr = searchTree(cloneMenuRoutes, (i) => i.path === key, { children: 'children' })
+  const rootPath = arr.length ? arr[0].path : ''
+  const obj = cloneMenuRoutes.find((i) => i.path === rootPath)
+  activeMenu.value = obj ? [obj.path] : ['']
+  leftMenus.value = obj ? (obj.children as RouteRecordRaw[]) : []
+}
+
+watch(
+  () => route.path,
+  (newPath) => {
+    nextTick(() => {
+      getLeftMenus(newPath)
+    })
+  },
+  { immediate: true }
+)
+</script>
+
+<style lang="scss" scoped>
+:deep(.arco-menu-pop) {
+  white-space: nowrap;
+}
+
+:deep(.arco-menu.arco-menu-vertical.arco-menu-collapsed) {
+  // Menu菜单组件修改
+  .arco-menu-icon {
+    margin-right: 0;
+    padding: 10px 0;
+  }
+  .arco-menu-has-icon {
+    padding: 0;
+    justify-content: center;
+  }
+  .arco-menu-title {
+    display: none;
+  }
+}
+
+:deep(.arco-menu-horizontal) {
+  flex: 1;
+  overflow: hidden;
+  .arco-menu-inner {
+    padding-left: 0;
+    .arco-menu-overflow-wrap {
+      white-space: nowrap;
+    }
+  }
+}
+
+.layout-mix {
+  height: 100%;
+  display: flex;
+  align-items: stretch;
+  overflow: hidden;
+  &-left {
+    border-right: 1px solid var(--color-border);
+    background-color: var(--color-bg-1);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  &-right {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+}
+
+.header {
+  padding: 0 $padding;
+  height: 56px;
+  color: var(--color-text-1);
+  background: var(--color-bg-1);
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  overflow: hidden;
+}
+</style>
--- a/src/layout/components/Asider/index.vue
+++ b/src/layout/components/Asider/index.vue
@@ -0,0 +1,74 @@
+<template>
+  <div
+    v-if="isDesktop"
+    class="asider"
+    :class="{ 'app-menu-dark': appStore.menuDark }"
+    :style="appStore.menuDark ? appStore.themeCSSVar : undefined"
+  >
+    <Logo :collapsed="appStore.menuCollapse"></Logo>
+    <a-layout-sider
+      class="menu"
+      collapsible
+      breakpoint="xl"
+      hide-trigger
+      :width="220"
+      :collapsed="appStore.menuCollapse"
+      @collapse="handleCollapse"
+    >
+      <a-scrollbar outer-class="h-full" style="height: 100%; overflow: auto">
+        <Menu></Menu>
+      </a-scrollbar>
+    </a-layout-sider>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAppStore } from '@/stores'
+import Menu from '../Menu/index.vue'
+import Logo from '../Logo.vue'
+import { useDevice } from '@/hooks'
+
+defineOptions({ name: 'Asider' })
+const appStore = useAppStore()
+const { isDesktop } = useDevice()
+
+const handleCollapse = (isCollapsed: boolean) => {
+  appStore.menuCollapse = isCollapsed
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.arco-menu.arco-menu-vertical.arco-menu-collapsed) {
+  // Menu菜单组件修改
+  .arco-menu-icon {
+    margin-right: 0;
+    padding: 10px 0;
+  }
+  .arco-menu-has-icon {
+    padding: 0;
+    justify-content: center;
+  }
+  .arco-menu-title {
+    display: none;
+  }
+}
+
+:deep(.arco-layout-sider-children) {
+  overflow: hidden;
+}
+
+.asider {
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--color-border-2);
+  box-sizing: border-box;
+  color: var(--color-text-1);
+  background-color: var(--color-bg-1);
+  .menu {
+    flex: 1;
+    overflow: hidden;
+    background-color: inherit;
+  }
+}
+</style>
--- a/src/layout/components/Header/index.vue
+++ b/src/layout/components/Header/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <a-layout-header class="header">
+    <section class="fold-btn-wrapper">
+      <MenuFoldBtn></MenuFoldBtn>
+    </section>
+    <a-row align="center" class="h-full header-right">
+      <a-col :xs="0" :md="10" :lg="10" :xl="12" :xxl="12">
+        <Breadcrumb></Breadcrumb>
+      </a-col>
+      <a-col :xs="24" :md="14" :lg="14" :xl="12" :xxl="12">
+        <a-row justify="end" align="center">
+          <HeaderRightBar></HeaderRightBar>
+        </a-row>
+      </a-col>
+    </a-row>
+  </a-layout-header>
+</template>
+
+<script setup lang="ts">
+import HeaderRightBar from '../HeaderRightBar/index.vue'
+import MenuFoldBtn from '../MenuFoldBtn.vue'
+
+defineOptions({ name: 'Header' })
+</script>
+
+<style lang="scss" scoped>
+.arco-dropdown-open .arco-icon-down {
+  transform: rotate(180deg);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  .header-right {
+    flex: 1;
+    overflow: hidden;
+    margin-left: $padding;
+  }
+}
+
+.arco-layout-header {
+  padding: 0 $padding;
+  height: 56px;
+  background: var(--color-bg-1);
+  border-bottom: 1px solid var(--color-neutral-3);
+}
+</style>
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<svg t="1658914025483" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3426" width="200" height="200"><path d="M390 679.988v-35.864c0-111.8-70.278-134.488-70.278-134.488S250 534.068 250 644.126v35.864h140z" fill="#4988FD" p-id="3427"></path><path d="M390 699.988h-140c-11.046 0-20-8.956-20-20v-35.864c0-122.828 79.714-152.174 83.108-153.364a20.012 20.012 0 0 1 12.758-0.158c3.434 1.11 84.132 28.598 84.132 153.522v35.864c0.002 11.046-8.952 20-19.998 20z m-120-40h100v-15.864c0-76.286-35.178-104.09-49.982-112.408-14.948 8.808-50.018 37.46-50.018 112.41v15.862z" fill="#4988FD" p-id="3428"></path><path d="M776 679.988v-35.864c0-111.8-70.278-134.488-70.278-134.488S636 534.068 636 644.126v35.864h140z" fill="#4988FD" p-id="3429"></path><path d="M776 699.988h-140c-11.044 0-20-8.956-20-20v-35.864c0-122.828 79.714-152.174 83.11-153.364a20.026 20.026 0 0 1 12.758-0.158c3.436 1.11 84.132 28.598 84.132 153.522v35.864c0 11.046-8.956 20-20 20z m-120-40h100v-15.864c0-76.286-35.178-104.09-49.982-112.408-14.948 8.808-50.018 37.46-50.018 112.41v15.862z" fill="#4988FD" p-id="3430"></path><path d="M693.146 651.988v-92.516c0-288.398-181.292-346.924-181.292-346.924S332 275.57 332 559.476c0.012 56.328 0 92.514 0 92.514l361.146-0.002z" fill="#4988FD" p-id="3431"></path><path d="M332 671.99a19.996 19.996 0 0 1-20-20.006c0-0.004 0.012-36.184 0-92.504 0-152.884 51.604-243.788 94.894-293.124 47.876-54.564 96.308-71.968 98.346-72.684a20.012 20.012 0 0 1 12.758-0.158c2.06 0.666 51.034 16.918 99.41 71.014 43.676 48.838 95.738 139.654 95.738 294.944v92.516c0 11.044-8.956 20-20 20L332 671.99z m180.098-437.812c-13.256 6.236-45.196 23.814-76.73 60.39C380.828 357.83 352 449.434 352 559.476c0.006 31.314 0.006 56.404 0.004 72.514l321.142-0.002v-72.516c0-111.762-29.016-203.89-83.91-266.424-31.678-36.086-63.762-52.93-77.138-58.87z" fill="#4988FD" p-id="3432"></path><path d="M497.858 864.994l-42.426-42.426c-31.244-31.244-31.244-81.894 0-113.138 31.242-31.242 81.894-31.242 113.136 0 31.242 31.24 31.244 81.894 0 113.138l-42.426 42.426c-7.81 7.81-20.474 7.81-28.284 0z" fill="#DFECFD" p-id="3433"></path><path d="M512 870.852a19.868 19.868 0 0 1-14.142-5.86l-42.426-42.424c-15.11-15.11-23.432-35.2-23.432-56.57s8.322-41.46 23.432-56.568S490.632 686 512 685.996c21.37 0.002 41.46 8.324 56.568 23.434S592 744.63 592 766s-8.322 41.46-23.432 56.57l-42.428 42.428a19.864 19.864 0 0 1-14.14 5.856zM512 688c-20.832-0.002-40.42 8.112-55.154 22.844S434 745.164 434 766c0 20.834 8.112 40.422 22.846 55.156l42.426 42.426a17.88 17.88 0 0 0 12.728 5.272 17.88 17.88 0 0 0 12.726-5.27l42.428-42.428c14.732-14.732 22.846-34.32 22.846-55.156 0-20.834-8.114-40.42-22.846-55.154S532.834 688 512 688z" fill="#DFECFD" p-id="3434"></path><path d="M312.576 803.972l-22.274-22.274c-16.402-16.402-16.402-42.996 0-59.398 16.4-16.4 42.994-16.4 59.396 0 16.402 16.402 16.404 42.996 0 59.398l-22.272 22.274a10.5 10.5 0 0 1-14.85 0z" fill="#DFECFD" p-id="3435"></path><path d="M320 806.896a10.784 10.784 0 0 1-7.68-3.18l-22.02-22.02c-16.374-16.374-16.374-43.02 0-59.396A41.728 41.728 0 0 1 320 710c11.22 0 21.764 4.366 29.7 12.3 16.374 16.376 16.374 43.022 0 59.398l-22.02 22.02a10.784 10.784 0 0 1-7.68 3.178zM320 712a39.744 39.744 0 0 0-28.284 11.714c-15.596 15.596-15.596 40.974 0 56.57l22.02 22.02c1.674 1.674 3.898 2.594 6.264 2.592s4.59-0.92 6.264-2.594l22.02-22.02c15.596-15.594 15.596-40.972 0-56.568A39.744 39.744 0 0 0 320 712z" fill="#DFECFD" p-id="3436"></path><path d="M698.576 803.972l-22.274-22.274c-16.4-16.4-16.4-42.994 0-59.398 16.4-16.4 42.994-16.4 59.396 0 16.402 16.402 16.4 42.996 0 59.398l-22.274 22.274a10.498 10.498 0 0 1-14.848 0z" fill="#DFECFD" p-id="3437"></path><path d="M706 806.896a10.784 10.784 0 0 1-7.68-3.18l-22.02-22.02c-16.37-16.374-16.37-43.02 0-59.396 7.936-7.934 18.482-12.3 29.7-12.3s21.764 4.366 29.7 12.3c16.374 16.376 16.372 43.02 0 59.398l-22.02 22.02a10.784 10.784 0 0 1-7.68 3.178zM706 712a39.736 39.736 0 0 0-28.284 11.714c-15.594 15.596-15.594 40.974 0 56.57l22.02 22.02c1.672 1.672 3.896 2.592 6.264 2.592s4.592-0.92 6.264-2.594l22.02-22.02c15.596-15.594 15.594-40.972 0-56.568A39.736 39.736 0 0 0 706 712z" fill="#DFECFD" p-id="3438"></path><path d="M512 352c22.092 0 40 17.908 40 40v80c0 22.092-17.908 40-40 40s-40-17.908-40-40v-80c0-22.092 17.908-40 40-40z" fill="#DFECFD" p-id="3439"></path><path d="M512 512c-22.056 0-40-17.944-40-40v-80c0-22.056 17.944-40 40-40s40 17.944 40 40v80c0 22.056-17.944 40-40 40z m0-158c-20.954 0-38 17.046-38 38v80c0 20.954 17.046 38 38 38s38-17.046 38-38v-80c0-20.954-17.046-38-38-38z" fill="#DFECFD" p-id="3440"></path></svg>
				`@@ -0,0 +1 @@`
				<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627885889837" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17560" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M0 139.636364a46.545455 46.545455 0 0 1 46.545455-46.545455h354.897454a51.2 51.2 0 0 1 47.057455 31.034182L473.6 182.679273 977.454545 182.690909a46.545455 46.545455 0 0 1 46.545455 46.545455v546.909091a46.545455 46.545455 0 0 1-46.545455 46.545454H46.545455a46.545455 46.545455 0 0 1-46.545455-46.545454V139.636364z" fill="#FFA000" p-id="17561"></path><path d="M0 276.945455m46.545455 0l930.90909 0q46.545455 0 46.545455 46.545454l0 558.545455q0 46.545455-46.545455 46.545454l-930.90909 0q-46.545455 0-46.545455-46.545454l0-558.545455q0-46.545455 46.545455-46.545454Z" fill="#FFCA28" p-id="17562"></path></svg>
				`@@ -0,0 +1 @@`
				<svg t="1642421944380" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="865" width="200" height="200"><path d="M97.9 376h828.4v269.2H97.9z" fill="#F95F5D" p-id="866"></path><path d="M926.3 376V161.5c0-26.6-23.8-50.3-52.1-50.3H149.9c-28.3 0-52.1 23.7-52.1 50.3V376h828.5z m0 0" fill="#55C7F7" p-id="867"></path><path d="M97.9 645.2v214.5c0 26.6 23.6 50.3 51.7 50.3h725c28.1 0 51.7-23.7 51.7-50.3V645.2H97.9z m0 0" fill="#7ECF3B" p-id="868"></path><path d="M421.8 111.2h184.9V910H421.8z" fill="#FDAF42" p-id="869"></path><path d="M606.7 457.4v112.4H413V457.4h193.7m31.1-45.9H381.9c-4.4 0-11.8 4.4-11.8 11.8v179c0 4.4 4.4 11.8 11.8 11.8h255.9c4.4 0 11.8-4.4 11.8-11.8v-179c-2.9-8.8-7.4-11.8-11.8-11.8z m0 0" fill="#FFFFFF" p-id="870"></path></svg>