Merge branch 'dev' of xyy/xyy-m into master

.env.development

@@ -1,7 +1,46 @@
 VITE_APP_ENV=development
 
-# VITE_APP_BASE_URL=https://service.xiaoyaotravel.com/api/
+
+# 测试服
+
 VITE_APP_BASE_URL=http://101.126.146.250:8082/
+VITE_APP_IM_URL=ws://101.126.146.250:8082/system/message
+
+
+# 陈英政
+# VITE_APP_BASE_URL=http://101.126.146.250:8084/
+# VITE_APP_IM_URL=ws://101.126.146.250:8084/system/message
+
+
+
+
+
+
+# 李忠畅本地
+# VITE_APP_BASE_URL=http://192.168.1.38:8082/
+# 本地socoket
+# VITE_APP_IM_URL=ws://192.168.1.38:8082/system/message
+# 花生壳
+# VITE_APP_BASE_URL=http://cilicli.qicp.vip
+
+# 黄雯本地
+# VITE_APP_BASE_URL=http://192.168.1.44:8082/
+# 本地socoket
+# VITE_APP_IM_URL=ws://192.168.1.44:8082/system/message
+# 花生壳
+# VITE_APP_BASE_URL=http://q9943037p3.goho.co
+# VITE_APP_IM_URL=ws://q9943037p3.goho.co/system/message
+
+# 张维本地
+# VITE_APP_BASE_URL=http://192.168.1.73:8082/
+# 本地socoket
+# VITE_APP_IM_URL=ws://192.168.1.73:8082/system/message
+
+# 花生壳
+# VITE_APP_BASE_URL=http://5nfhmg.natappfree.cc
+# VITE_APP_IM_URL=ws://5nfhmg.natappfree.cc/system/message
+
+
 # VITE_APP_BASE_URL=http://192.168.1.204:8082
 VITE_APP_EMOJI_API=https://v.xiaoyaotravel.com/emoji/
 VITE_APP_IM_USER_SUFFIX=dev

.env.production

@@ -2,6 +2,12 @@ VITE_APP_ENV=production
 
 # VITE_APP_BASE_URL=https://api.ztzhipin.com/api/
 VITE_APP_BASE_URL=https://service.xiaoyaotravel.com/api/
+
 VITE_APP_EMOJI_API=https://v.xiaoyaotravel.com/emoji/
+
+VITE_APP_WEBSITE_BASE_URL=https://www.xiaoyaotravel.com/
+
 VITE_APP_IM_USER_SUFFIX=''
 
+VITE_APP_IM_URL=wss://service.xiaoyaotravel.com/system/message
+

.env.staging

@@ -4,5 +4,8 @@ VITE_APP_ENV=staging
 VITE_APP_BASE_URL=http://101.126.146.250:8088/api/
 
 VITE_APP_IM_USER_SUFFIX=''
+VITE_APP_WEBSITE_BASE_URL=http://101.126.146.250:8086
 
-VITE_APP_EMOJI_API=https://t.xiaoyaotravel.com/emoji/
+VITE_APP_EMOJI_API=https://t.xiaoyaotravel.com/emoji/
+
+VITE_APP_IM_URL=ws://101.126.146.250:8082/system/message

nuxt.config.ts

@@ -27,6 +27,7 @@ export default defineNuxtConfig({
   runtimeConfig: {
     public: {
       baseApi: process.env.VITE_APP_BASE_URL,
+      baseIM:process.env.VITE_APP_IM_URL
     },
   },
   imports: {
@@ -69,7 +70,11 @@ export default defineNuxtConfig({
       // ],
     },
   },
-  css: ["@/assets/css/tailwind.css", "./src/assets/iconfont/iconfont.css"],
+  css: [
+    "@/assets/css/tailwind.css",
+    "./src/assets/iconfont/iconfont.css",
+    "@/assets/css/font.css",
+  ],
   postcss: {
     plugins: {
       tailwindcss: {},

package.json

@@ -15,18 +15,33 @@
   "dependencies": {
     "@pinia/nuxt": "^0.5.4",
     "@samk-dev/nuxt-vcalendar": "^1.0.4",
+    "@vant/use": "^1.6.0",
     "@vueuse/core": "^12.0.0",
     "@vueuse/nuxt": "^12.0.0",
+    "accounting": "^0.4.1",
     "dayjs": "^1.11.13",
     "dayjs-nuxt": "^2.1.11",
+    "html5-qrcode": "^2.3.8",
+    "jsqr": "^1.4.0",
     "lodash-es": "^4.17.21",
+    "mitt": "^3.0.1",
+    "mockjs": "^1.1.0",
     "nuxt": "^3.13.0",
     "nuxt-swiper": "^2.0.0",
     "pinia": "^2.2.2",
+    "pinyin-pro": "^3.26.0",
+    "quill": "^2.0.3",
+    "quill-mention": "^6.0.2",
+    "reconnecting-websocket": "^4.4.0",
+    "recorder-core": "^1.3.25011100",
+    "vconsole": "^3.15.1",
     "vue": "latest",
+    "vue-clipboard3": "^2.0.0",
     "vue-cropper": "^1.1.4",
     "vue-draggable-plus": "^0.6.0",
-    "vue-router": "latest"
+    "vue-mention": "^1.1.0",
+    "vue-router": "latest",
+    "vue3-seamless-scroll": "^2.0.1"
   },
   "devDependencies": {
     "@vant/nuxt": "^1.0.6",

pnpm-lock.yaml

@@ -14,21 +14,39 @@ importers:
       '@samk-dev/nuxt-vcalendar':
         specifier: ^1.0.4
         version: 1.0.4(magicast@0.3.5)(rollup@4.22.5)(vue@3.5.10)
+      '@vant/use':
+        specifier: ^1.6.0
+        version: 1.6.0(vue@3.5.10)
       '@vueuse/core':
         specifier: ^12.0.0
         version: 12.0.0
       '@vueuse/nuxt':
         specifier: ^12.0.0
         version: 12.0.0(magicast@0.3.5)(nuxt@3.13.2(@parcel/watcher@2.4.1)(@types/node@22.7.4)(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.22.5)(sass@1.79.4)(terser@5.34.1)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)))(rollup@4.22.5)
+      accounting:
+        specifier: ^0.4.1
+        version: 0.4.1
       dayjs:
         specifier: ^1.11.13
         version: 1.11.13
       dayjs-nuxt:
         specifier: ^2.1.11
         version: 2.1.11(magicast@0.3.5)(rollup@4.22.5)
+      html5-qrcode:
+        specifier: ^2.3.8
+        version: 2.3.8
+      jsqr:
+        specifier: ^1.4.0
+        version: 1.4.0
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
+      mitt:
+        specifier: ^3.0.1
+        version: 3.0.1
+      mockjs:
+        specifier: ^1.1.0
+        version: 1.1.0
       nuxt:
         specifier: ^3.13.0
         version: 3.13.2(@parcel/watcher@2.4.1)(@types/node@22.7.4)(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.22.5)(sass@1.79.4)(terser@5.34.1)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))
@@ -38,18 +56,45 @@ importers:
       pinia:
         specifier: ^2.2.2
         version: 2.2.2(vue@3.5.10)
+      pinyin-pro:
+        specifier: ^3.26.0
+        version: 3.26.0
+      quill:
+        specifier: ^2.0.3
+        version: 2.0.3
+      quill-mention:
+        specifier: ^6.0.2
+        version: 6.0.2
+      reconnecting-websocket:
+        specifier: ^4.4.0
+        version: 4.4.0
+      recorder-core:
+        specifier: ^1.3.25011100
+        version: 1.3.25011100
+      vconsole:
+        specifier: ^3.15.1
+        version: 3.15.1
       vue:
         specifier: latest
         version: 3.5.10
+      vue-clipboard3:
+        specifier: ^2.0.0
+        version: 2.0.0
       vue-cropper:
         specifier: ^1.1.4
         version: 1.1.4
       vue-draggable-plus:
         specifier: ^0.6.0
         version: 0.6.0(@types/sortablejs@1.15.8)
+      vue-mention:
+        specifier: ^1.1.0
+        version: 1.1.0(v-tooltip@2.1.3(vue@3.5.10))(vue@3.5.10)
       vue-router:
         specifier: latest
         version: 4.4.5(vue@3.5.10)
+      vue3-seamless-scroll:
+        specifier: ^2.0.1
+        version: 2.0.1
     devDependencies:
       '@vant/nuxt':
         specifier: ^1.0.6
@@ -1312,6 +1357,9 @@ packages:
     resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
     engines: {node: '>=6.5'}
 
+  accounting@0.4.1:
+    resolution: {integrity: sha512-RU6KY9Y5wllyaCNBo1W11ZOTnTHMMgOZkIwdOOs6W5ibMTp72i4xIbEA48djxVGqMNTUNbvrP/1nWg5Af5m2gQ==}
+
   acorn-import-attributes@1.9.5:
     resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==}
     peerDependencies:
@@ -1527,6 +1575,9 @@ packages:
   clear@0.1.0:
     resolution: {integrity: sha512-qMjRnoL+JDPJHeLePZJuao6+8orzHMGP04A8CdwCNsKhRbOnKRjefxONR7bwILT3MHecxKBjHkKL/tkZ8r4Uzw==}
 
+  clipboard@2.0.11:
+    resolution: {integrity: sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==}
+
   clipboardy@4.0.0:
     resolution: {integrity: sha512-5mOlNS0mhX0707P2I0aZ2V/cmHUEO/fL7VFLqszkhUsxt7RwnmrInf/eEQKlf5GzvYeHIjT+Ov1HRfNmymlG0w==}
     engines: {node: '>=18'}
@@ -1610,6 +1661,13 @@ packages:
     resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
     engines: {node: '>=12.13'}
 
+  copy-text-to-clipboard@3.2.0:
+    resolution: {integrity: sha512-RnJFp1XR/LOBDckxTib5Qjr/PMfkatD0MUCQgdpqS8MdKiNUzBjAQBEN6oUy+jW7LI93BBG3DtMB2KOOKpGs2Q==}
+    engines: {node: '>=12'}
+
+  core-js@3.40.0:
+    resolution: {integrity: sha512-7vsMc/Lty6AGnn7uFpYT56QesI5D2Y/UkgKounk87OP9Z2H9Z8kj6jzcSGAxFmUtDOS0ntK6lbQz+Nsa0Jj6mQ==}
+
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
@@ -1765,6 +1823,9 @@ packages:
   defu@6.1.4:
     resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
 
+  delegate@3.2.0:
+    resolution: {integrity: sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==}
+
   delegates@1.0.0:
     resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==}
 
@@ -1910,6 +1971,9 @@ packages:
     resolution: {integrity: sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==}
     engines: {node: '>=6'}
 
+  eventemitter3@5.0.1:
+    resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
+
   events@3.3.0:
     resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
     engines: {node: '>=0.8.x'}
@@ -1925,6 +1989,9 @@ packages:
   externality@1.0.2:
     resolution: {integrity: sha512-LyExtJWKxtgVzmgtEHyQtLFpw1KFhQphF9nTG8TpAIVkiI/xQ3FJh75tRFLYl4hkn7BNIIdLJInuDAavX35pMw==}
 
+  fast-diff@1.3.0:
+    resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
+
   fast-fifo@1.3.2:
     resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==}
 
@@ -2057,6 +2124,9 @@ packages:
     resolution: {integrity: sha512-s3Fq41ZVh7vbbe2PN3nrW7yC7U7MFVc5c98/iTl9c2GawNMKx/J648KQRW6WKkuU8GIbbh2IXfIRQjOZnXcTnw==}
     engines: {node: '>=18'}
 
+  good-listener@1.2.2:
+    resolution: {integrity: sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==}
+
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
@@ -2092,6 +2162,9 @@ packages:
     resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
     engines: {node: '>=8'}
 
+  html5-qrcode@2.3.8:
+    resolution: {integrity: sha512-jsr4vafJhwoLVEDW3n1KvPnCCXWaQfRng0/EEYk1vNcQGcG/htAdhJX0be8YyqMoSz7+hZvOZSTAepsabiuhiQ==}
+
   http-errors@2.0.0:
     resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
     engines: {node: '>= 0.8'}
@@ -2288,6 +2361,9 @@ packages:
   jsonfile@6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
 
+  jsqr@1.4.0:
+    resolution: {integrity: sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A==}
+
   kleur@3.0.3:
     resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
     engines: {node: '>=6'}
@@ -2335,12 +2411,19 @@ packages:
   lodash-es@4.17.21:
     resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
 
+  lodash.clonedeep@4.5.0:
+    resolution: {integrity: sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==}
+
   lodash.defaults@4.2.0:
     resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
 
   lodash.isarguments@3.1.0:
     resolution: {integrity: sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==}
 
+  lodash.isequal@4.5.0:
+    resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
+    deprecated: This package is deprecated. Use require('node:util').isDeepStrictEqual instead.
+
   lodash.memoize@4.1.2:
     resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
 
@@ -2454,6 +2537,10 @@ packages:
   mlly@1.7.3:
     resolution: {integrity: sha512-xUsx5n/mN0uQf4V548PKQ+YShA4/IW0KI1dZhrNrPCLG+xizETbHTkOa1f8/xut9JRPp8kQuMnz0oqwkTiLo/A==}
 
+  mockjs@1.1.0:
+    resolution: {integrity: sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ==}
+    hasBin: true
+
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -2468,6 +2555,9 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  mutation-observer@1.0.3:
+    resolution: {integrity: sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==}
+
   mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
 
@@ -2617,6 +2707,9 @@ packages:
   package-manager-detector@0.2.0:
     resolution: {integrity: sha512-E385OSk9qDcXhcM9LNSe4sdhx8a9mAPrZ4sMLW+tmxl5ZuGtPUcdFu+MPP2jbgiWAZ6Pfe5soGFMd+0Db5Vrog==}
 
+  parchment@3.0.0:
+    resolution: {integrity: sha512-HUrJFQ/StvgmXRcQ1ftY6VEZUq3jA2t9ncFN4F84J/vN0/FPpQF+8FKXb3l6fLces6q0uOHj6NJn+2xvZnxO6A==}
+
   parse-git-config@3.0.0:
     resolution: {integrity: sha512-wXoQGL1D+2COYWCD35/xbiKma1Z15xvZL8cI25wvxzled58V51SJM04Urt/uznS900iQor7QO04SgdfT/XlbuA==}
     engines: {node: '>=8'}
@@ -2690,6 +2783,9 @@ packages:
       typescript:
         optional: true
 
+  pinyin-pro@3.26.0:
+    resolution: {integrity: sha512-HcBZZb0pvm0/JkPhZHWA5Hqp2cWHXrrW/WrV+OtaYYM+kf35ffvZppIUuGmyuQ7gDr1JDJKMkbEE+GN0wfMoGg==}
+
   pirates@4.0.6:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
@@ -2700,6 +2796,10 @@ packages:
   pkg-types@1.2.1:
     resolution: {integrity: sha512-sQoqa8alT3nHjGuTjuKgOnvjo4cljkufdtLMnO2LBP/wRwuDlo1tkaEdMxCRhyGRPacv/ztlZgDPm2b7FAmEvw==}
 
+  popper.js@1.16.1:
+    resolution: {integrity: sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==}
+    deprecated: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
+
   postcss-calc@10.0.2:
     resolution: {integrity: sha512-DT/Wwm6fCKgpYVI7ZEWuPJ4az8hiEHtCUeYjZXqU7Ou4QqYh1Df2yCQ7Ca6N7xqKPFkxN3fhf+u9KSoOCJNAjg==}
     engines: {node: ^18.12 || ^20.9 || >=22.0}
@@ -2994,6 +3094,17 @@ packages:
   queue-tick@1.0.1:
     resolution: {integrity: sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==}
 
+  quill-delta@5.1.0:
+    resolution: {integrity: sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==}
+    engines: {node: '>= 12.0.0'}
+
+  quill-mention@6.0.2:
+    resolution: {integrity: sha512-ZyiEzLxtoNJ/hAjMyfVsugpXAcOdD2fbHmJT3yKuwpUxiDHdmutVJqOzpItqiVbcjUecnjAF+/Yo1IN3/W6iAg==}
+
+  quill@2.0.3:
+    resolution: {integrity: sha512-xEYQBqfYx/sfb33VJiKnSJp8ehloavImQ2A6564GAbqG55PGw1dAWUn1MUbQB62t0azawUS2CZZhWCjO8gRvTw==}
+    engines: {npm: '>=8.2.3'}
+
   radix3@1.1.2:
     resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==}
 
@@ -3032,6 +3143,12 @@ packages:
     resolution: {integrity: sha512-GkMg9uOTpIWWKbSsgwb5fA4EavTR+SG/PMPoAY8hkhHfEEY0/vqljY+XHqtDf2cr2IJtoNRDbrrEpZUiZCkYRw==}
     engines: {node: '>= 14.16.0'}
 
+  reconnecting-websocket@4.4.0:
+    resolution: {integrity: sha512-D2E33ceRPga0NvTDhJmphEgJ7FUYF0v4lr1ki0csq06OdlxKfugGzN0dSkxM/NfqCxYELK4KcaTOUOjTV6Dcng==}
+
+  recorder-core@1.3.25011100:
+    resolution: {integrity: sha512-trXsCH0zurhoizT4Z22C0OsM0SDOW+2OvtgRxeLQFwxoFeqFjDjYZsbZEZUiKMJLhBvamI4K7Ic+qZ2LBo74TA==}
+
   redis-errors@1.2.0:
     resolution: {integrity: sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w==}
     engines: {node: '>=4'}
@@ -3103,6 +3220,9 @@ packages:
   scule@1.3.0:
     resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
 
+  select@1.1.2:
+    resolution: {integrity: sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==}
+
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -3305,6 +3425,9 @@ packages:
   text-decoder@1.2.0:
     resolution: {integrity: sha512-n1yg1mOj9DNpk3NeZOx7T6jchTbyJS3i3cucbNN6FcdPriMZx7NsgrGpWWdWZZGxD7ES1XB+3uoqHMgOKaN+fg==}
 
+  textarea-caret@3.1.0:
+    resolution: {integrity: sha512-cXAvzO9pP5CGa6NKx0WYHl+8CHKZs8byMkt3PCJBCmq2a34YA9pO1NrQET5pzeqnBjBdToF5No4rrmkDUgQC2Q==}
+
   thenify-all@1.6.0:
     resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
     engines: {node: '>=0.8'}
@@ -3312,6 +3435,13 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
+  throttle-debounce@5.0.0:
+    resolution: {integrity: sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==}
+    engines: {node: '>=12.22'}
+
+  tiny-emitter@2.1.0:
+    resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==}
+
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
@@ -3489,11 +3619,17 @@ packages:
       '@popperjs/core': ^2.0.0
       vue: ^3.2.0
 
+  v-tooltip@2.1.3:
+    resolution: {integrity: sha512-xXngyxLQTOx/yUEy50thb8te7Qo4XU6h4LZB6cvEfVd9mnysUxLEoYwGWDdqR+l69liKsy3IPkdYff3J1gAJ5w==}
+
   vant@4.9.7:
     resolution: {integrity: sha512-bFkjF6zZf8l6WxPwDn6vd2PZISpUhm4u3fBJStUh+BDll7yaAv610j56DDYoL3HM8tws9nanGN4WBbTrKToMrA==}
     peerDependencies:
       vue: ^3.0.0
 
+  vconsole@3.15.1:
+    resolution: {integrity: sha512-KH8XLdrq9T5YHJO/ixrjivHfmF2PC2CdVoK6RWZB4yftMykYIaXY1mxZYAic70vADM54kpMQF+dYmvl5NRNy1g==}
+
   vite-hot-client@0.2.3:
     resolution: {integrity: sha512-rOGAV7rUlUHX89fP2p2v0A2WWvV3QMX2UYq0fRqsWSvFvev4atHWqjwGoKaZT1VTKyLGk533ecu3eyd0o59CAg==}
     peerDependencies:
@@ -3611,6 +3747,9 @@ packages:
   vue-bundle-renderer@2.1.1:
     resolution: {integrity: sha512-+qALLI5cQncuetYOXp4yScwYvqh8c6SMXee3B+M7oTZxOgtESP0l4j/fXdEJoZ+EdMxkGWIj+aSEyjXkOdmd7g==}
 
+  vue-clipboard3@2.0.0:
+    resolution: {integrity: sha512-Q9S7dzWGax7LN5iiSPcu/K1GGm2gcBBlYwmMsUc5/16N6w90cbKow3FnPmPs95sungns4yvd9/+JhbAznECS2A==}
+
   vue-cropper@1.1.4:
     resolution: {integrity: sha512-5m98vBsCEI9rbS4JxELxXidtAui3qNyTHLHg67Qbn7g8cg+E6LcnC+hh3SM/p94x6mFh6KRxT1ttnta+wCYqWA==}
 
@@ -3637,6 +3776,17 @@ packages:
       '@vue/composition-api':
         optional: true
 
+  vue-mention@1.1.0:
+    resolution: {integrity: sha512-yuFewv8i70qIL5HWdi9UHdwXAxeis1RR/FN00GQ0P7LJeqkh8YD9CWIjnD2owO1yLjgFol7t9uvax3rsl+oigg==}
+    peerDependencies:
+      v-tooltip: ^2.0.0
+      vue: ^2.6.0
+
+  vue-resize@1.0.1:
+    resolution: {integrity: sha512-z5M7lJs0QluJnaoMFTIeGx6dIkYxOwHThlZDeQnWZBizKblb99GSejPnK37ZbNE/rVwDcYcHY+Io+AxdpY952w==}
+    peerDependencies:
+      vue: ^2.6.0
+
   vue-router@4.4.5:
     resolution: {integrity: sha512-4fKZygS8cH1yCyuabAXGUAsyi1b2/o/OKgu/RUb+znIYOxPRxdkytJEx+0wGcpBE1pX6vUgh5jwWOKRGvuA/7Q==}
     peerDependencies:
@@ -3647,6 +3797,9 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
+  vue3-seamless-scroll@2.0.1:
+    resolution: {integrity: sha512-mI3BaDU3pjcPUhVSw3/xNKdfPBDABTi/OdZaZqKysx4cSdNfGRbVvGNDzzptBbJ5S7imv5T55l6x/SqgnxKreg==}
+
   vue@3.5.10:
     resolution: {integrity: sha512-Vy2kmJwHPlouC/tSnIgXVg03SG+9wSqT1xu1Vehc+ChsXsRd7jLkKgMltVEFOzUdBr3uFwBCG+41LJtfAcBRng==}
     peerDependencies:
@@ -5145,6 +5298,8 @@ snapshots:
     dependencies:
       event-target-shim: 5.0.1
 
+  accounting@0.4.1: {}
+
   acorn-import-attributes@1.9.5(acorn@8.12.1):
     dependencies:
       acorn: 8.12.1
@@ -5379,6 +5534,12 @@ snapshots:
 
   clear@0.1.0: {}
 
+  clipboard@2.0.11:
+    dependencies:
+      good-listener: 1.2.2
+      select: 1.1.2
+      tiny-emitter: 2.1.0
+
   clipboardy@4.0.0:
     dependencies:
       execa: 8.0.1
@@ -5447,6 +5608,10 @@ snapshots:
     dependencies:
       is-what: 4.1.16
 
+  copy-text-to-clipboard@3.2.0: {}
+
+  core-js@3.40.0: {}
+
   core-util-is@1.0.3: {}
 
   crc-32@1.2.2: {}
@@ -5591,6 +5756,8 @@ snapshots:
 
   defu@6.1.4: {}
 
+  delegate@3.2.0: {}
+
   delegates@1.0.0: {}
 
   denque@2.1.0: {}
@@ -5761,6 +5928,8 @@ snapshots:
 
   event-target-shim@5.0.1: {}
 
+  eventemitter3@5.0.1: {}
+
   events@3.3.0: {}
 
   execa@7.2.0:
@@ -5794,6 +5963,8 @@ snapshots:
       pathe: 1.1.2
       ufo: 1.5.4
 
+  fast-diff@1.3.0: {}
+
   fast-fifo@1.3.2: {}
 
   fast-glob@3.3.2:
@@ -5941,6 +6112,10 @@ snapshots:
       slash: 5.1.0
       unicorn-magic: 0.1.0
 
+  good-listener@1.2.2:
+    dependencies:
+      delegate: 3.2.0
+
   graceful-fs@4.2.11: {}
 
   gzip-size@7.0.0:
@@ -5978,6 +6153,8 @@ snapshots:
 
   html-tags@3.3.1: {}
 
+  html5-qrcode@2.3.8: {}
+
   http-errors@2.0.0:
     dependencies:
       depd: 2.0.0
@@ -6148,6 +6325,8 @@ snapshots:
     optionalDependencies:
       graceful-fs: 4.2.11
 
+  jsqr@1.4.0: {}
+
   kleur@3.0.3: {}
 
   klona@2.0.6: {}
@@ -6206,10 +6385,14 @@ snapshots:
 
   lodash-es@4.17.21: {}
 
+  lodash.clonedeep@4.5.0: {}
+
   lodash.defaults@4.2.0: {}
 
   lodash.isarguments@3.1.0: {}
 
+  lodash.isequal@4.5.0: {}
+
   lodash.memoize@4.1.2: {}
 
   lodash.uniq@4.5.0: {}
@@ -6312,6 +6495,10 @@ snapshots:
       pkg-types: 1.2.1
       ufo: 1.5.4
 
+  mockjs@1.1.0:
+    dependencies:
+      commander: 8.3.0
+
   mri@1.2.0: {}
 
   mrmime@2.0.0: {}
@@ -6320,6 +6507,8 @@ snapshots:
 
   ms@2.1.3: {}
 
+  mutation-observer@1.0.3: {}
+
   mz@2.7.0:
     dependencies:
       any-promise: 1.3.0
@@ -6647,6 +6836,8 @@ snapshots:
 
   package-manager-detector@0.2.0: {}
 
+  parchment@3.0.0: {}
+
   parse-git-config@3.0.0:
     dependencies:
       git-config-path: 2.0.0
@@ -6697,6 +6888,8 @@ snapshots:
       vue: 3.5.10
       vue-demi: 0.14.10(vue@3.5.10)
 
+  pinyin-pro@3.26.0: {}
+
   pirates@4.0.6: {}
 
   pkg-types@1.2.0:
@@ -6711,6 +6904,8 @@ snapshots:
       mlly: 1.7.3
       pathe: 1.1.2
 
+  popper.js@1.16.1: {}
+
   postcss-calc@10.0.2(postcss@8.4.47):
     dependencies:
       postcss: 8.4.47
@@ -6930,6 +7125,23 @@ snapshots:
 
   queue-tick@1.0.1: {}
 
+  quill-delta@5.1.0:
+    dependencies:
+      fast-diff: 1.3.0
+      lodash.clonedeep: 4.5.0
+      lodash.isequal: 4.5.0
+
+  quill-mention@6.0.2:
+    dependencies:
+      quill: 2.0.3
+
+  quill@2.0.3:
+    dependencies:
+      eventemitter3: 5.0.1
+      lodash-es: 4.17.21
+      parchment: 3.0.0
+      quill-delta: 5.1.0
+
   radix3@1.1.2: {}
 
   randombytes@2.1.0:
@@ -6981,6 +7193,10 @@ snapshots:
 
   readdirp@4.0.1: {}
 
+  reconnecting-websocket@4.4.0: {}
+
+  recorder-core@1.3.25011100: {}
+
   redis-errors@1.2.0: {}
 
   redis-parser@3.0.0:
@@ -7056,6 +7272,8 @@ snapshots:
 
   scule@1.3.0: {}
 
+  select@1.1.2: {}
+
   semver@6.3.1: {}
 
   semver@7.6.3: {}
@@ -7301,6 +7519,8 @@ snapshots:
     dependencies:
       b4a: 1.6.7
 
+  textarea-caret@3.1.0: {}
+
   thenify-all@1.6.0:
     dependencies:
       thenify: 3.3.1
@@ -7309,6 +7529,10 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
+  throttle-debounce@5.0.0: {}
+
+  tiny-emitter@2.1.0: {}
+
   tiny-invariant@1.3.3: {}
 
   tinyglobby@0.2.6:
@@ -7526,6 +7750,15 @@ snapshots:
       vue: 3.5.10
       vue-screen-utils: 1.0.0-beta.13(vue@3.5.10)
 
+  v-tooltip@2.1.3(vue@3.5.10):
+    dependencies:
+      '@babel/runtime': 7.26.0
+      lodash: 4.17.21
+      popper.js: 1.16.1
+      vue-resize: 1.0.1(vue@3.5.10)
+    transitivePeerDependencies:
+      - vue
+
   vant@4.9.7(vue@3.5.10):
     dependencies:
       '@vant/popperjs': 1.3.0
@@ -7533,6 +7766,13 @@ snapshots:
       '@vue/shared': 3.5.13
       vue: 3.5.10
 
+  vconsole@3.15.1:
+    dependencies:
+      '@babel/runtime': 7.26.0
+      copy-text-to-clipboard: 3.2.0
+      core-js: 3.40.0
+      mutation-observer: 1.0.3
+
   vite-hot-client@0.2.3(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)):
     dependencies:
       vite: 5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)
@@ -7643,6 +7883,10 @@ snapshots:
     dependencies:
       ufo: 1.5.4
 
+  vue-clipboard3@2.0.0:
+    dependencies:
+      clipboard: 2.0.11
+
   vue-cropper@1.1.4: {}
 
   vue-demi@0.14.10(vue@3.5.10):
@@ -7655,6 +7899,17 @@ snapshots:
     dependencies:
       '@types/sortablejs': 1.15.8
 
+  vue-mention@1.1.0(v-tooltip@2.1.3(vue@3.5.10))(vue@3.5.10):
+    dependencies:
+      textarea-caret: 3.1.0
+      v-tooltip: 2.1.3(vue@3.5.10)
+      vue: 3.5.10
+
+  vue-resize@1.0.1(vue@3.5.10):
+    dependencies:
+      '@babel/runtime': 7.26.0
+      vue: 3.5.10
+
   vue-router@4.4.5(vue@3.5.10):
     dependencies:
       '@vue/devtools-api': 6.6.4
@@ -7664,6 +7919,10 @@ snapshots:
     dependencies:
       vue: 3.5.10
 
+  vue3-seamless-scroll@2.0.1:
+    dependencies:
+      throttle-debounce: 5.0.0
+
   vue@3.5.10:
     dependencies:
       '@vue/compiler-dom': 3.5.10

single-add.vue

@@ -0,0 +1,287 @@
+<template>
+  <div class="w-full h-[100vh]">
+    <ChatHeaderBar title="选择互关好友" />
+
+    <ChatSearch v-model:searchString="showName" @search="search" placeholder="请输入关键词" />
+
+    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+      <ChatEmpty
+        image="search"
+        v-if="!addDataList?.length && !loading"
+        title="暂无数据"
+        top="100"
+      />
+
+      <van-list
+        v-else-if="addDataList.length"
+        v-model:loading="loading"
+        error-text="获取失败"
+        finished-text="-- 没有更多了 --"
+        :finished="finished"
+        :immediate-check="false"
+      >
+        <!--    @load="getLoadList"  -->
+        <div style="height: calc(100vh - 170px)">
+          <van-checkbox-group v-model="checked">
+            <!-- <van-index-bar highlight-color="#FD9A00" index-list :sticky="false"> -->
+            <template v-for="(item, index) in addDataList" :key="item?.attentionIdDictMap?.userId">
+              <!-- <van-index-anchor index="A" /> -->
+              <van-cell center clickable @click="toggle(item)">
+                <template #icon>
+                  <div class="flex justify-start">
+                    <van-checkbox
+                      checked-color="#FD9A00"
+                      :name="item?.attentionIdDictMap?.userId"
+                      :ref="(el) => (checkboxRefs[item?.attentionIdDictMap?.userId] = el)"
+                      @click.stop="toggle(item)"
+                    />
+
+                    <div class="w-40 h-40 ml-13 mr-12 rounded-full overflow-hidden">
+                      <img
+                        v-if="item?.attentionIdDictMap?.headImageUrl"
+                        class="w-full h-full shrink-0 object-cover"
+                        :src="item?.attentionIdDictMap?.headImageUrl"
+                        alt=""
+                      />
+
+                      <img
+                        class="w-full h-full shrink-0 object-cover"
+                        src="~/assets/img/default_avatar.png"
+                        alt=""
+                      />
+                    </div>
+                  </div>
+                </template>
+                <template #title>
+                  <div class="flex items-center">
+                    <h1 class="text-xl text-black-3">
+                      {{ item?.attentionIdDictMap?.showName }}
+                    </h1>
+                    <van-tag
+                      v-if="item.fansStatus == 2"
+                      style="margin-left: 5px; padding: 3px 6px"
+                      color="#F7F8FA"
+                      text-color="#666666"
+                    >
+                      相互关注
+                    </van-tag>
+                  </div>
+                </template>
+              </van-cell>
+            </template>
+            <!-- </van-index-bar> -->
+          </van-checkbox-group>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <div
+      class="w-full box-border p-16 pb-40 bg-white fixed bottom-0 left-0 flex justify-between items-center shadow-[0px_-4px_4px_0px_rgba(0,0,0,0.1)]"
+    >
+      <div class="shrink-0 flex justify-start items-center">
+        <div class="w-118 shrink-0 flex justify-start items-center overflow-hidden">
+          <div
+            v-for="(item, index) in checkedList.slice(0, 5)"
+            :key="index + 'avatar'"
+            :class="`w-36 h-36  ${index == 0 ? '' : '-ml-16'} shrink-0 rounded-full overflow-hidden`"
+          >
+            <img
+              v-if="item?.attentionIdDictMap?.headImageUrl"
+              class="w-full h-full object-cover"
+              :src="item?.attentionIdDictMap?.headImageUrl"
+              alt=""
+            />
+            <img
+              v-else
+              class="w-full h-full shrink-0 object-cover"
+              src="~/assets/img/default_avatar.png"
+              alt=""
+            />
+          </div>
+        </div>
+
+        <div v-if="checkedList.length > 5" class="shrink-0 w-24 h-24 ml-8">
+          <img class="w-full h-full object-cover" src="~/assets/img/chat/ellipsis.svg" alt="" />
+        </div>
+      </div>
+      <van-button
+        :loading="isLoading"
+        :disabled="checkedList.length > 0 ? false : true"
+        @click="handleCreateGroup"
+        style="width: 160px"
+        class="shrink-0"
+        block
+        size="large"
+        color="#FD9A00"
+        round
+      >
+        新建
+        <span v-if="checkedList.length">({{ checkedList.length }})</span>
+      </van-button>
+    </div>
+  </div>
+</template>
+<script setup>
+const route = useRoute()
+const router = useRouter()
+
+definePageMeta({
+  layout: false
+})
+
+onMounted(() => {
+  getList()
+})
+// 对方的那个id
+const toUserId = computed(() => route.query?.toUserId ?? '')
+const refreshing = ref(false)
+const loading = ref(false)
+const finished = ref(false)
+
+const checked = ref([])
+const checkedList = ref([])
+const showName = ref('')
+const checkboxRefs = ref([])
+
+// 字母的数组
+const letterList = ref([])
+
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  flagPage: 1
+})
+
+const addDataList = ref([])
+const filterDataList = ref([])
+
+const searchText = computed(() => (showName.value ? '暂无互关好友' : '暂无搜索结果'))
+
+// 选中要邀请的人
+const toggle = (item) => {
+  let index = checkedList.value.findIndex(
+    (el) => el?.attentionIdDictMap?.userId == item?.attentionIdDictMap?.userId
+  )
+
+  if (index != -1) {
+    checkedList.value.splice(index, 1)
+  } else {
+    checkedList.value.push(item)
+  }
+
+  checkboxRefs.value[item?.attentionIdDictMap?.userId].toggle()
+}
+
+const search = () => {
+  finished.value = true
+  if (showName.value) {
+    addDataList.value = filterDataList.value.filter((item) =>
+      item.attentionIdDictMap.name.includes(showName.value)
+    )
+  } else {
+    addDataList.value = filterDataList.value
+  }
+}
+
+// 刷新
+const onRefresh = () => {
+  queryParams.pageNum = 1
+  addDataList.value = []
+  filterDataList.value = []
+  getList()
+}
+
+// 获取数据
+const getList = async () => {
+  try {
+    let url = `/website/tourism/fans/getFriends`
+
+    loading.value = true
+    let {
+      data: { dataList, totalCount }
+    } = await request(url, {
+      query: {
+        ...queryParams
+      }
+    })
+
+    if (Array.isArray(dataList) && dataList?.length) {
+      addDataList.value = dataList
+
+      nextTick(() => {
+        checkboxRefs.value[toUserId.value].toggle()
+        let item = dataList.find((el) => el?.attentionIdDictMap?.userId == toUserId.value)
+        if (item) {
+          checkedList.value.push(item)
+        } else {
+          router.back()
+        }
+      })
+    } else {
+      addDataList.value = []
+    }
+
+    loading.value = false
+    refreshing.value = false
+    if (addDataList.value.length >= totalCount) {
+      finished.value = true
+    } else {
+      finished.value = false
+    }
+  } catch (err) {
+  } finally {
+    refreshing.value = false
+    loading.value = false
+  }
+}
+
+// 节流
+const isLoading = ref(false)
+
+function handleKeyDown(event) {
+  // 启动节流
+  // 1000ms 后解除节流
+  // setTimeout(() => {
+  //   isThrottled.value = false
+  // }, 3000)
+}
+
+// 创建多人聊天
+async function handleCreateGroup() {
+  if (!isLoading.value) {
+    isLoading.value = true
+    try {
+      showLoadingToast({
+        message: '准备开始群聊...',
+        duration: 100000
+      })
+
+      let { data } = await request('/website/tourGroup/createGroup', {
+        method: 'post',
+        body: {
+          createType: 2,
+          ids: [...checked.value]
+        }
+      })
+
+      if (data) {
+        navigateTo({
+          path: '/chat/group-chat',
+          query: {
+            groupId: data
+          },
+          replace: true
+        })
+        isLoading.value = false
+      }
+    } catch (error) {
+    } finally {
+      closeToast()
+    }
+  }
+}
+
+useSeoMeta({
+  title: '我的消息'
+})
+</script>
+<style lang="scss" scoped></style>

src/app.vue

@@ -7,18 +7,5 @@
 </template>
 
 <script setup>
-const themeVars = reactive({
-  primaryColor: "#FD9A00",
-  buttonPrimaryBackground: "#22C2A0",
-  buttonPrimaryBorderColor: "#22C2A0",
-  searchPadding: "0px",
-  dividerLineHeight: "1px",
-  dividerContentPadding: "0",
-  dividerMargin: "0",
-  dividerVerticalMargin: "0",
-  dropdownMenuTitleActiveTextColor: "#ff9300",
-  treeSelectItemActiveColor: "#ff9300",
-  sidebarSelectedBorderColor: "#ff9300",
-  pickerConfirmActionColor: "#ff9300",
-});
+import { themeVars } from "./themeVars";
 </script>

src/assets/css/font.css

@@ -0,0 +1,5 @@
+@font-face {
+  font-family: "YouSheBiaoTiHei";
+  font-weight: "normal";
+  src: url("../font/YouSheBiaoTiHei.woff2") format("woff2");
+}

src/assets/css/quill.snow.css

@@ -0,0 +1,939 @@
+.ql-container {
+    box-sizing: border-box;
+    font-family: Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    height: 100%;
+    margin: 0;
+    position: relative;
+}
+.ql-container.ql-disabled .ql-tooltip {
+    visibility: hidden;
+}
+.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
+    pointer-events: none;
+}
+.ql-clipboard {
+    left: -100000px;
+    height: 1px;
+    overflow-y: hidden;
+    position: absolute;
+    top: 50%;
+    display: none;
+}
+.ql-clipboard p {
+    margin: 0;
+    padding: 0;
+}
+.ql-editor {
+    box-sizing: border-box;
+    line-height: 1.42;
+    height: 100%;
+    outline: none;
+    overflow-y: auto;
+    padding: 12px 15px;
+    tab-size: 4;
+    tab-size: 4;
+    text-align: left;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+.ql-editor > * {
+    cursor: text;
+}
+.ql-editor p,
+.ql-editor ol,
+.ql-editor ul,
+.ql-editor pre,
+.ql-editor blockquote,
+.ql-editor h1,
+.ql-editor h2,
+.ql-editor h3,
+.ql-editor h4,
+.ql-editor h5,
+.ql-editor h6 {
+    margin: 0;
+    padding: 0;
+    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol,
+.ql-editor ul {
+    padding-left: 1.5em;
+}
+.ql-editor ol > li,
+.ql-editor ul > li {
+    list-style-type: none;
+}
+.ql-editor ul > li::before {
+    content: "\2022";
+}
+.ql-editor ul[data-checked="true"],
+.ql-editor ul[data-checked="false"] {
+    pointer-events: none;
+}
+.ql-editor ul[data-checked="true"] > li *,
+.ql-editor ul[data-checked="false"] > li * {
+    pointer-events: all;
+}
+.ql-editor ul[data-checked="true"] > li::before,
+.ql-editor ul[data-checked="false"] > li::before {
+    color: #777;
+    cursor: pointer;
+    pointer-events: all;
+}
+.ql-editor ul[data-checked="true"] > li::before {
+    content: "\2611";
+}
+.ql-editor ul[data-checked="false"] > li::before {
+    content: "\2610";
+}
+.ql-editor li::before {
+    display: inline-block;
+    white-space: nowrap;
+    width: 1.2em;
+}
+.ql-editor li:not(.ql-direction-rtl)::before {
+    margin-left: -1.5em;
+    margin-right: 0.3em;
+    text-align: right;
+}
+.ql-editor li.ql-direction-rtl::before {
+    margin-left: 0.3em;
+    margin-right: -1.5em;
+}
+.ql-editor ol li:not(.ql-direction-rtl),
+.ql-editor ul li:not(.ql-direction-rtl) {
+    padding-left: 1.5em;
+}
+.ql-editor ol li.ql-direction-rtl,
+.ql-editor ul li.ql-direction-rtl {
+    padding-right: 1.5em;
+}
+.ql-editor ol li {
+    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+    counter-increment: list-0;
+}
+.ql-editor ol li::before {
+    content: counter(list-0, decimal) ". ";
+}
+.ql-editor ol li.ql-indent-1 {
+    counter-increment: list-1;
+}
+.ql-editor ol li.ql-indent-1::before {
+    content: counter(list-1, lower-alpha) ". ";
+}
+.ql-editor ol li.ql-indent-1 {
+    counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-2 {
+    counter-increment: list-2;
+}
+.ql-editor ol li.ql-indent-2::before {
+    content: counter(list-2, lower-roman) ". ";
+}
+.ql-editor ol li.ql-indent-2 {
+    counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-3 {
+    counter-increment: list-3;
+}
+.ql-editor ol li.ql-indent-3::before {
+    content: counter(list-3, decimal) ". ";
+}
+.ql-editor ol li.ql-indent-3 {
+    counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-4 {
+    counter-increment: list-4;
+}
+.ql-editor ol li.ql-indent-4::before {
+    content: counter(list-4, lower-alpha) ". ";
+}
+.ql-editor ol li.ql-indent-4 {
+    counter-reset: list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-5 {
+    counter-increment: list-5;
+}
+.ql-editor ol li.ql-indent-5::before {
+    content: counter(list-5, lower-roman) ". ";
+}
+.ql-editor ol li.ql-indent-5 {
+    counter-reset: list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-6 {
+    counter-increment: list-6;
+}
+.ql-editor ol li.ql-indent-6::before {
+    content: counter(list-6, decimal) ". ";
+}
+.ql-editor ol li.ql-indent-6 {
+    counter-reset: list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-7 {
+    counter-increment: list-7;
+}
+.ql-editor ol li.ql-indent-7::before {
+    content: counter(list-7, lower-alpha) ". ";
+}
+.ql-editor ol li.ql-indent-7 {
+    counter-reset: list-8 list-9;
+}
+.ql-editor ol li.ql-indent-8 {
+    counter-increment: list-8;
+}
+.ql-editor ol li.ql-indent-8::before {
+    content: counter(list-8, lower-roman) ". ";
+}
+.ql-editor ol li.ql-indent-8 {
+    counter-reset: list-9;
+}
+.ql-editor ol li.ql-indent-9 {
+    counter-increment: list-9;
+}
+.ql-editor ol li.ql-indent-9::before {
+    content: counter(list-9, decimal) ". ";
+}
+.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
+    padding-left: 3em;
+}
+.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
+    padding-left: 4.5em;
+}
+.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
+    padding-right: 3em;
+}
+.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
+    padding-right: 4.5em;
+}
+.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
+    padding-left: 6em;
+}
+.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
+    padding-left: 7.5em;
+}
+.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
+    padding-right: 6em;
+}
+.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
+    padding-right: 7.5em;
+}
+.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
+    padding-left: 9em;
+}
+.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
+    padding-left: 10.5em;
+}
+.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
+    padding-right: 9em;
+}
+.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
+    padding-right: 10.5em;
+}
+.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
+    padding-left: 12em;
+}
+.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
+    padding-left: 13.5em;
+}
+.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
+    padding-right: 12em;
+}
+.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
+    padding-right: 13.5em;
+}
+.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
+    padding-left: 15em;
+}
+.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
+    padding-left: 16.5em;
+}
+.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
+    padding-right: 15em;
+}
+.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
+    padding-right: 16.5em;
+}
+.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
+    padding-left: 18em;
+}
+.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
+    padding-left: 19.5em;
+}
+.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
+    padding-right: 18em;
+}
+.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
+    padding-right: 19.5em;
+}
+.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
+    padding-left: 21em;
+}
+.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
+    padding-left: 22.5em;
+}
+.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
+    padding-right: 21em;
+}
+.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
+    padding-right: 22.5em;
+}
+.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
+    padding-left: 24em;
+}
+.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
+    padding-left: 25.5em;
+}
+.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
+    padding-right: 24em;
+}
+.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
+    padding-right: 25.5em;
+}
+.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
+    padding-left: 27em;
+}
+.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
+    padding-left: 28.5em;
+}
+.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
+    padding-right: 27em;
+}
+.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
+    padding-right: 28.5em;
+}
+.ql-editor .ql-video {
+    display: block;
+    max-width: 100%;
+}
+.ql-editor .ql-video.ql-align-center {
+    margin: 0 auto;
+}
+.ql-editor .ql-video.ql-align-right {
+    margin: 0 0 0 auto;
+}
+.ql-editor .ql-bg-black {
+    background-color: #000;
+}
+.ql-editor .ql-bg-red {
+    background-color: #e60000;
+}
+.ql-editor .ql-bg-orange {
+    background-color: #f90;
+}
+.ql-editor .ql-bg-yellow {
+    background-color: #ff0;
+}
+.ql-editor .ql-bg-green {
+    background-color: #008a00;
+}
+.ql-editor .ql-bg-blue {
+    background-color: #06c;
+}
+.ql-editor .ql-bg-purple {
+    background-color: #93f;
+}
+.ql-editor .ql-color-white {
+    color: #fff;
+}
+.ql-editor .ql-color-red {
+    color: #e60000;
+}
+.ql-editor .ql-color-orange {
+    color: #f90;
+}
+.ql-editor .ql-color-yellow {
+    color: #ff0;
+}
+.ql-editor .ql-color-green {
+    color: #008a00;
+}
+.ql-editor .ql-color-blue {
+    color: #06c;
+}
+.ql-editor .ql-color-purple {
+    color: #93f;
+}
+.ql-editor .ql-font-serif {
+    font-family: Georgia, "Times New Roman", serif;
+}
+.ql-editor .ql-font-monospace {
+    font-family: Monaco, "Courier New", monospace;
+}
+.ql-editor .ql-size-small {
+    font-size: 0.75em;
+}
+.ql-editor .ql-size-large {
+    font-size: 1.5em;
+}
+.ql-editor .ql-size-huge {
+    font-size: 2.5em;
+}
+.ql-editor .ql-direction-rtl {
+    direction: rtl;
+    text-align: inherit;
+}
+.ql-editor .ql-align-center {
+    text-align: center;
+}
+.ql-editor .ql-align-justify {
+    text-align: justify;
+}
+.ql-editor .ql-align-right {
+    text-align: right;
+}
+.ql-editor.ql-blank::before {
+    color: #909399;
+    content: attr(data-placeholder);
+    left: 15px;
+    pointer-events: none;
+    position: absolute;
+    right: 15px;
+}
+.ql-snow.ql-toolbar::after,
+.ql-snow .ql-toolbar::after {
+    clear: both;
+    content: "";
+    display: table;
+}
+.ql-snow.ql-toolbar button,
+.ql-snow .ql-toolbar button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: inline-block;
+    float: left;
+    height: 24px;
+    padding: 3px 5px;
+    width: 28px;
+}
+.ql-snow.ql-toolbar button svg,
+.ql-snow .ql-toolbar button svg {
+    float: left;
+    height: 100%;
+}
+.ql-snow.ql-toolbar button:active:hover,
+.ql-snow .ql-toolbar button:active:hover {
+    outline: none;
+}
+.ql-snow.ql-toolbar input.ql-image[type="file"],
+.ql-snow .ql-toolbar input.ql-image[type="file"] {
+    display: none;
+}
+.ql-snow.ql-toolbar button:hover,
+.ql-snow .ql-toolbar button:hover,
+.ql-snow.ql-toolbar button:focus,
+.ql-snow .ql-toolbar button:focus,
+.ql-snow.ql-toolbar button.ql-active,
+.ql-snow .ql-toolbar button.ql-active,
+.ql-snow.ql-toolbar .ql-picker-label:hover,
+.ql-snow .ql-toolbar .ql-picker-label:hover,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active,
+.ql-snow.ql-toolbar .ql-picker-item:hover,
+.ql-snow .ql-toolbar .ql-picker-item:hover,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
+    color: #06c;
+}
+.ql-snow.ql-toolbar button:hover .ql-fill,
+.ql-snow .ql-toolbar button:hover .ql-fill,
+.ql-snow.ql-toolbar button:focus .ql-fill,
+.ql-snow .ql-toolbar button:focus .ql-fill,
+.ql-snow.ql-toolbar button.ql-active .ql-fill,
+.ql-snow .ql-toolbar button.ql-active .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
+.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
+    fill: #06c;
+}
+.ql-snow.ql-toolbar button:hover .ql-stroke,
+.ql-snow .ql-toolbar button:hover .ql-stroke,
+.ql-snow.ql-toolbar button:focus .ql-stroke,
+.ql-snow .ql-toolbar button:focus .ql-stroke,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
+.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
+    stroke: #06c;
+}
+@media (pointer: coarse) {
+    .ql-snow.ql-toolbar button:hover:not(.ql-active),
+    .ql-snow .ql-toolbar button:hover:not(.ql-active) {
+        color: #444;
+    }
+    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
+    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
+    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
+    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
+        fill: #444;
+    }
+    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
+    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
+        stroke: #444;
+    }
+}
+.ql-snow {
+    box-sizing: border-box;
+}
+.ql-snow * {
+    box-sizing: border-box;
+}
+.ql-snow .ql-hidden {
+    display: none;
+}
+.ql-snow .ql-out-bottom,
+.ql-snow .ql-out-top {
+    visibility: hidden;
+}
+.ql-snow .ql-tooltip {
+    position: absolute;
+    transform: translateY(10px);
+}
+.ql-snow .ql-tooltip a {
+    cursor: pointer;
+    text-decoration: none;
+}
+.ql-snow .ql-tooltip.ql-flip {
+    transform: translateY(-10px);
+}
+.ql-snow .ql-formats {
+    display: inline-block;
+    vertical-align: middle;
+}
+.ql-snow .ql-formats::after {
+    clear: both;
+    content: "";
+    display: table;
+}
+.ql-snow .ql-stroke {
+    fill: none;
+    stroke: #444;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 2;
+}
+.ql-snow .ql-stroke-miter {
+    fill: none;
+    stroke: #444;
+    stroke-miterlimit: 10;
+    stroke-width: 2;
+}
+.ql-snow .ql-fill,
+.ql-snow .ql-stroke.ql-fill {
+    fill: #444;
+}
+.ql-snow .ql-empty {
+    fill: none;
+}
+.ql-snow .ql-even {
+    fill-rule: evenodd;
+}
+.ql-snow .ql-thin,
+.ql-snow .ql-stroke.ql-thin {
+    stroke-width: 1;
+}
+.ql-snow .ql-transparent {
+    opacity: 0.4;
+}
+.ql-snow .ql-direction svg:last-child {
+    display: none;
+}
+.ql-snow .ql-direction.ql-active svg:last-child {
+    display: inline;
+}
+.ql-snow .ql-direction.ql-active svg:first-child {
+    display: none;
+}
+.ql-snow .ql-editor h1 {
+    font-size: 2em;
+}
+.ql-snow .ql-editor h2 {
+    font-size: 1.5em;
+}
+.ql-snow .ql-editor h3 {
+    font-size: 1.17em;
+}
+.ql-snow .ql-editor h4 {
+    font-size: 1em;
+}
+.ql-snow .ql-editor h5 {
+    font-size: 0.83em;
+}
+.ql-snow .ql-editor h6 {
+    font-size: 0.67em;
+}
+.ql-snow .ql-editor a {
+    text-decoration: underline;
+}
+.ql-snow .ql-editor blockquote {
+    border-left: 4px solid #ccc;
+    margin-bottom: 5px;
+    margin-top: 5px;
+    padding-left: 16px;
+}
+.ql-snow .ql-editor code,
+.ql-snow .ql-editor pre {
+    background-color: #f0f0f0;
+    border-radius: 3px;
+}
+.ql-snow .ql-editor pre {
+    white-space: pre-wrap;
+    margin-bottom: 5px;
+    margin-top: 5px;
+    padding: 5px 10px;
+}
+.ql-snow .ql-editor code {
+    font-size: 85%;
+    padding: 2px 4px;
+}
+.ql-snow .ql-editor pre.ql-syntax {
+    background-color: #23241f;
+    color: #f8f8f2;
+    overflow: visible;
+}
+.ql-snow .ql-editor img {
+    max-width: 100%;
+}
+.ql-snow .ql-picker {
+    color: #444;
+    display: inline-block;
+    float: left;
+    font-size: 14px;
+    font-weight: 500;
+    height: 24px;
+    position: relative;
+    vertical-align: middle;
+}
+.ql-snow .ql-picker-label {
+    cursor: pointer;
+    display: inline-block;
+    height: 100%;
+    padding-left: 8px;
+    padding-right: 2px;
+    position: relative;
+    width: 100%;
+}
+.ql-snow .ql-picker-label::before {
+    display: inline-block;
+    line-height: 22px;
+}
+.ql-snow .ql-picker-options {
+    background-color: #fff;
+    display: none;
+    min-width: 100%;
+    padding: 4px 8px;
+    position: absolute;
+    white-space: nowrap;
+}
+.ql-snow .ql-picker-options .ql-picker-item {
+    cursor: pointer;
+    display: block;
+    padding-bottom: 5px;
+    padding-top: 5px;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+    color: #ccc;
+    z-index: 2;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+    fill: #ccc;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+    stroke: #ccc;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+    display: block;
+    margin-top: -1px;
+    top: 100%;
+    z-index: 1;
+}
+.ql-snow .ql-color-picker,
+.ql-snow .ql-icon-picker {
+    width: 28px;
+}
+.ql-snow .ql-color-picker .ql-picker-label,
+.ql-snow .ql-icon-picker .ql-picker-label {
+    padding: 2px 4px;
+}
+.ql-snow .ql-color-picker .ql-picker-label svg,
+.ql-snow .ql-icon-picker .ql-picker-label svg {
+    right: 4px;
+}
+.ql-snow .ql-icon-picker .ql-picker-options {
+    padding: 4px 0;
+}
+.ql-snow .ql-icon-picker .ql-picker-item {
+    height: 24px;
+    width: 24px;
+    padding: 2px 4px;
+}
+.ql-snow .ql-color-picker .ql-picker-options {
+    padding: 3px 5px;
+    width: 152px;
+}
+.ql-snow .ql-color-picker .ql-picker-item {
+    border: 1px solid transparent;
+    float: left;
+    height: 16px;
+    margin: 2px;
+    padding: 0;
+    width: 16px;
+}
+.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
+    position: absolute;
+    margin-top: -9px;
+    right: 0;
+    top: 50%;
+    width: 18px;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=""])::before,
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=""])::before,
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=""])::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=""])::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=""])::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=""])::before {
+    content: attr(data-label);
+}
+.ql-snow .ql-picker.ql-header {
+    width: 98px;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item::before {
+    content: "Normal";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+    content: "Heading 1";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+    content: "Heading 2";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+    content: "Heading 3";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+    content: "Heading 4";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+    content: "Heading 5";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+    content: "Heading 6";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+    font-size: 2em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+    font-size: 1.5em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+    font-size: 1.17em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+    font-size: 1em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+    font-size: 0.83em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+    font-size: 0.67em;
+}
+.ql-snow .ql-picker.ql-font {
+    width: 108px;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item::before {
+    content: "Sans Serif";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
+    content: "Serif";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
+    content: "Monospace";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
+    font-family: Georgia, "Times New Roman", serif;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
+    font-family: Monaco, "Courier New", monospace;
+}
+.ql-snow .ql-picker.ql-size {
+    width: 98px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+    content: "Normal";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
+    content: "Small";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
+    content: "Large";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
+    content: "Huge";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
+    font-size: 10px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
+    font-size: 18px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
+    font-size: 32px;
+}
+.ql-snow .ql-color-picker.ql-background .ql-picker-item {
+    background-color: #fff;
+}
+.ql-snow .ql-color-picker.ql-color .ql-picker-item {
+    background-color: #000;
+}
+.ql-toolbar.ql-snow {
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    padding: 8px;
+}
+.ql-toolbar.ql-snow .ql-formats {
+    margin-right: 15px;
+}
+.ql-toolbar.ql-snow .ql-picker-label {
+    border: 1px solid transparent;
+}
+.ql-toolbar.ql-snow .ql-picker-options {
+    border: 1px solid transparent;
+    box-shadow: rgb(0 0 0 / 20%) 0 2px 8px;
+}
+.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+    border-color: #ccc;
+}
+.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+    border-color: #ccc;
+}
+.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
+.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
+    border-color: #000;
+}
+.ql-toolbar.ql-snow + .ql-container.ql-snow {
+    border-top: 0;
+}
+.ql-snow .ql-tooltip {
+    background-color: #fff;
+    border: 1px solid #ccc;
+    box-shadow: 0 0 5px #ddd;
+    color: #444;
+    padding: 5px 12px;
+    white-space: nowrap;
+}
+.ql-snow .ql-tooltip::before {
+    content: "Visit URL:";
+    line-height: 26px;
+    margin-right: 8px;
+}
+.ql-snow .ql-tooltip input[type="text"] {
+    display: none;
+    border: 1px solid #ccc;
+    font-size: 13px;
+    height: 26px;
+    margin: 0;
+    padding: 3px 5px;
+    width: 170px;
+}
+.ql-snow .ql-tooltip a.ql-preview {
+    display: inline-block;
+    max-width: 200px;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top;
+}
+.ql-snow .ql-tooltip a.ql-action::after {
+    border-right: 1px solid #ccc;
+    content: "Edit";
+    margin-left: 16px;
+    padding-right: 8px;
+}
+.ql-snow .ql-tooltip a.ql-remove::before {
+    content: "Remove";
+    margin-left: 8px;
+}
+.ql-snow .ql-tooltip a {
+    line-height: 26px;
+}
+.ql-snow .ql-tooltip.ql-editing a.ql-preview,
+.ql-snow .ql-tooltip.ql-editing a.ql-remove {
+    display: none;
+}
+.ql-snow .ql-tooltip.ql-editing input[type="text"] {
+    display: inline-block;
+}
+.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+    border-right: 0;
+    content: "Save";
+    padding-right: 0;
+}
+.ql-snow .ql-tooltip[data-mode="link"]::before {
+    content: "Enter link:";
+}
+.ql-snow .ql-tooltip[data-mode="formula"]::before {
+    content: "Enter formula:";
+}
+.ql-snow .ql-tooltip[data-mode="video"]::before {
+    content: "Enter video:";
+}
+.ql-snow a {
+    color: #06c;
+}
+.ql-container.ql-snow {
+    border: 1px solid #ccc;
+}

src/assets/iconfont/demo_index.html

@@ -47,7 +47,7 @@
         <li class="dib"><span>Symbol</span></li>
       </ul>
       
-      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4723464" target="_blank" class="nav-more">查看项目</a>
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4820751" target="_blank" class="nav-more">查看项目</a>
       
     </div>
     <div class="tab-container">
@@ -55,51 +55,81 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
-              <span class="icon iconfont">&#xe7ec;</span>
-                <div class="name">left</div>
-                <div class="code-name">&amp;#xe7ec;</div>
+              <span class="icon iconfont">&#xe7e5;</span>
+                <div class="name">Female</div>
+                <div class="code-name">&amp;#xe7e5;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe7eb;</span>
-                <div class="name">right</div>
-                <div class="code-name">&amp;#xe7eb;</div>
+              <span class="icon iconfont">&#xe7e4;</span>
+                <div class="name">Male</div>
+                <div class="code-name">&amp;#xe7e4;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe7f4;</span>
-                <div class="name">menu</div>
-                <div class="code-name">&amp;#xe7f4;</div>
+              <span class="icon iconfont">&#xe60f;</span>
+                <div class="name">profile</div>
+                <div class="code-name">&amp;#xe60f;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe78a;</span>
-                <div class="name">message</div>
-                <div class="code-name">&amp;#xe78a;</div>
+              <span class="icon iconfont">&#xe60d;</span>
+                <div class="name">arrow_right</div>
+                <div class="code-name">&amp;#xe60d;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe783;</span>
-                <div class="name">smile</div>
-                <div class="code-name">&amp;#xe783;</div>
+              <span class="icon iconfont">&#xe866;</span>
+                <div class="name">fire-fill</div>
+                <div class="code-name">&amp;#xe866;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe7df;</span>
-                <div class="name">star</div>
-                <div class="code-name">&amp;#xe7df;</div>
+              <span class="icon iconfont">&#xe869;</span>
+                <div class="name">eye-fill</div>
+                <div class="code-name">&amp;#xe869;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe86b;</span>
-                <div class="name">star-fill</div>
-                <div class="code-name">&amp;#xe86b;</div>
+              <span class="icon iconfont">&#xe86a;</span>
+                <div class="name">like-fill</div>
+                <div class="code-name">&amp;#xe86a;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe8fe;</span>
-                <div class="name">plus</div>
-                <div class="code-name">&amp;#xe8fe;</div>
+              <span class="icon iconfont">&#xe868;</span>
+                <div class="name">location-fill</div>
+                <div class="code-name">&amp;#xe868;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7fc;</span>
+                <div class="name">close</div>
+                <div class="code-name">&amp;#xe7fc;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe8ec;</span>
+                <div class="name">caret-down</div>
+                <div class="code-name">&amp;#xe8ec;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe845;</span>
+                <div class="name">plus-circle-fill</div>
+                <div class="code-name">&amp;#xe845;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe860;</span>
+                <div class="name">image-fill</div>
+                <div class="code-name">&amp;#xe860;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe78e;</span>
+                <div class="name">setting</div>
+                <div class="code-name">&amp;#xe78e;</div>
               </li>
           
             <li class="dib">
@@ -115,69 +145,273 @@
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe78e;</span>
+              <span class="icon iconfont">&#xe8fe;</span>
+                <div class="name">plus</div>
+                <div class="code-name">&amp;#xe8fe;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe86b;</span>
+                <div class="name">star-fill</div>
+                <div class="code-name">&amp;#xe86b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7df;</span>
+                <div class="name">star</div>
+                <div class="code-name">&amp;#xe7df;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe783;</span>
+                <div class="name">smile</div>
+                <div class="code-name">&amp;#xe783;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe78a;</span>
+                <div class="name">message</div>
+                <div class="code-name">&amp;#xe78a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7f4;</span>
+                <div class="name">menu</div>
+                <div class="code-name">&amp;#xe7f4;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7eb;</span>
+                <div class="name">right</div>
+                <div class="code-name">&amp;#xe7eb;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7ec;</span>
+                <div class="name">left</div>
+                <div class="code-name">&amp;#xe7ec;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe77e;</span>
+                <div class="name">info-circle</div>
+                <div class="code-name">&amp;#xe77e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe8ed;</span>
+                <div class="name">caret-up</div>
+                <div class="code-name">&amp;#xe8ed;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7c0;</span>
+                <div class="name">close-one</div>
+                <div class="code-name">&amp;#xe7c0;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7c1;</span>
+                <div class="name">slightly-smiling-face</div>
+                <div class="code-name">&amp;#xe7c1;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7c2;</span>
+                <div class="name">pic</div>
+                <div class="code-name">&amp;#xe7c2;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7c4;</span>
+                <div class="name">voice-one</div>
+                <div class="code-name">&amp;#xe7c4;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7c5;</span>
+                <div class="name">peoples-two </div>
+                <div class="code-name">&amp;#xe7c5;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7c6;</span>
+                <div class="name">pic-two</div>
+                <div class="code-name">&amp;#xe7c6;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7c8;</span>
+                <div class="name">close-remind</div>
+                <div class="code-name">&amp;#xe7c8;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7c9;</span>
+                <div class="name">log</div>
+                <div class="code-name">&amp;#xe7c9;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7ca;</span>
+                <div class="name">jubaoguanli</div>
+                <div class="code-name">&amp;#xe7ca;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7cb;</span>
                 <div class="name">setting</div>
-                <div class="code-name">&amp;#xe78e;</div>
+                <div class="code-name">&amp;#xe7cb;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe845;</span>
-                <div class="name">plus-circle-fill</div>
-                <div class="code-name">&amp;#xe845;</div>
+              <span class="icon iconfont">&#xe7cc;</span>
+                <div class="name">delete</div>
+                <div class="code-name">&amp;#xe7cc;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe860;</span>
-                <div class="name">image-fill</div>
-                <div class="code-name">&amp;#xe860;</div>
+              <span class="icon iconfont">&#xe7c7;</span>
+                <div class="name">set-top</div>
+                <div class="code-name">&amp;#xe7c7;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe7fc;</span>
-                <div class="name">close</div>
-                <div class="code-name">&amp;#xe7fc;</div>
+              <span class="icon iconfont">&#xe7cd;</span>
+                <div class="name">comment-two</div>
+                <div class="code-name">&amp;#xe7cd;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe8ec;</span>
-                <div class="name">caret-down</div>
-                <div class="code-name">&amp;#xe8ec;</div>
+              <span class="icon iconfont">&#xe7ce;</span>
+                <div class="name">tiji</div>
+                <div class="code-name">&amp;#xe7ce;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe868;</span>
-                <div class="name">location-fill</div>
-                <div class="code-name">&amp;#xe868;</div>
+              <span class="icon iconfont">&#xe7cf;</span>
+                <div class="name">comments</div>
+                <div class="code-name">&amp;#xe7cf;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe866;</span>
-                <div class="name">fire-fill</div>
-                <div class="code-name">&amp;#xe866;</div>
+              <span class="icon iconfont">&#xe7d0;</span>
+                <div class="name">comment-one</div>
+                <div class="code-name">&amp;#xe7d0;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe869;</span>
-                <div class="name">eye-fill</div>
-                <div class="code-name">&amp;#xe869;</div>
+              <span class="icon iconfont">&#xe7d1;</span>
+                <div class="name">like</div>
+                <div class="code-name">&amp;#xe7d1;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe86a;</span>
-                <div class="name">like-fill</div>
-                <div class="code-name">&amp;#xe86a;</div>
+              <span class="icon iconfont">&#xe7d2;</span>
+                <div class="name">send</div>
+                <div class="code-name">&amp;#xe7d2;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe60d;</span>
-                <div class="name">arrow_right</div>
-                <div class="code-name">&amp;#xe60d;</div>
+              <span class="icon iconfont">&#xe7d3;</span>
+                <div class="name">copy</div>
+                <div class="code-name">&amp;#xe7d3;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe60f;</span>
-                <div class="name">profile</div>
-                <div class="code-name">&amp;#xe60f;</div>
+              <span class="icon iconfont">&#xe7d4;</span>
+                <div class="name">quote</div>
+                <div class="code-name">&amp;#xe7d4;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7d5;</span>
+                <div class="name">delete-three</div>
+                <div class="code-name">&amp;#xe7d5;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7d7;</span>
+                <div class="name">edit-1</div>
+                <div class="code-name">&amp;#xe7d7;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7d8;</span>
+                <div class="name">logout</div>
+                <div class="code-name">&amp;#xe7d8;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7d9;</span>
+                <div class="name">chat-message</div>
+                <div class="code-name">&amp;#xe7d9;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7da;</span>
+                <div class="name">chevron-down</div>
+                <div class="code-name">&amp;#xe7da;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7db;</span>
+                <div class="name">caret-down-small</div>
+                <div class="code-name">&amp;#xe7db;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7dc;</span>
+                <div class="name">cart</div>
+                <div class="code-name">&amp;#xe7dc;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7dd;</span>
+                <div class="name">lock</div>
+                <div class="code-name">&amp;#xe7dd;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7e0;</span>
+                <div class="name">unlock</div>
+                <div class="code-name">&amp;#xe7e0;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7e1;</span>
+                <div class="name">more</div>
+                <div class="code-name">&amp;#xe7e1;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7e2;</span>
+                <div class="name">location</div>
+                <div class="code-name">&amp;#xe7e2;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7de;</span>
+                <div class="name">chatgroup</div>
+                <div class="code-name">&amp;#xe7de;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7d6;</span>
+                <div class="name">share</div>
+                <div class="code-name">&amp;#xe7d6;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7e3;</span>
+                <div class="name">Thumbs-up</div>
+                <div class="code-name">&amp;#xe7e3;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe78f;</span>
+                <div class="name">eye</div>
+                <div class="code-name">&amp;#xe78f;</div>
               </li>
           
           </ul>
@@ -198,10 +432,10 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1735367455324') format('woff2'),
-       url('iconfont.woff?t=1735367455324') format('woff'),
-       url('iconfont.ttf?t=1735367455324') format('truetype'),
-       url('iconfont.svg?t=1735367455324#iconfont') format('svg');
+  src: url('iconfont.woff2?t=1738918368855') format('woff2'),
+       url('iconfont.woff?t=1738918368855') format('woff'),
+       url('iconfont.ttf?t=1738918368855') format('truetype'),
+       url('iconfont.svg?t=1738918368855#iconfont') format('svg');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -228,65 +462,137 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
-            <span class="icon iconfont icon-left"></span>
+            <span class="icon iconfont icon-Female"></span>
             <div class="name">
-              left
+              Female
             </div>
-            <div class="code-name">.icon-left
+            <div class="code-name">.icon-Female
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-right"></span>
+            <span class="icon iconfont icon-Male"></span>
             <div class="name">
-              right
+              Male
             </div>
-            <div class="code-name">.icon-right
+            <div class="code-name">.icon-Male
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-menu"></span>
+            <span class="icon iconfont icon-profile"></span>
             <div class="name">
-              menu
+              profile
             </div>
-            <div class="code-name">.icon-menu
+            <div class="code-name">.icon-profile
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-message"></span>
+            <span class="icon iconfont icon-arrow_right"></span>
             <div class="name">
-              message
+              arrow_right
             </div>
-            <div class="code-name">.icon-message
+            <div class="code-name">.icon-arrow_right
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-smile"></span>
+            <span class="icon iconfont icon-fire-fill"></span>
             <div class="name">
-              smile
+              fire-fill
             </div>
-            <div class="code-name">.icon-smile
+            <div class="code-name">.icon-fire-fill
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-star"></span>
+            <span class="icon iconfont icon-eye-fill"></span>
             <div class="name">
-              star
+              eye-fill
             </div>
-            <div class="code-name">.icon-star
+            <div class="code-name">.icon-eye-fill
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-star-fill"></span>
+            <span class="icon iconfont icon-like-fill"></span>
             <div class="name">
-              star-fill
+              like-fill
             </div>
-            <div class="code-name">.icon-star-fill
+            <div class="code-name">.icon-like-fill
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-location-fill"></span>
+            <div class="name">
+              location-fill
+            </div>
+            <div class="code-name">.icon-location-fill
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-close"></span>
+            <div class="name">
+              close
+            </div>
+            <div class="code-name">.icon-close
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-caret-down"></span>
+            <div class="name">
+              caret-down
+            </div>
+            <div class="code-name">.icon-caret-down
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-plus-circle-fill"></span>
+            <div class="name">
+              plus-circle-fill
+            </div>
+            <div class="code-name">.icon-plus-circle-fill
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-image-fill"></span>
+            <div class="name">
+              image-fill
+            </div>
+            <div class="code-name">.icon-image-fill
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-setting"></span>
+            <div class="name">
+              setting
+            </div>
+            <div class="code-name">.icon-setting
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-edit-square"></span>
+            <div class="name">
+              edit-square
+            </div>
+            <div class="code-name">.icon-edit-square
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-delete-two"></span>
+            <div class="name">
+              delete
+            </div>
+            <div class="code-name">.icon-delete-two
             </div>
           </li>
           
@@ -299,316 +605,907 @@
             </div>
           </li>
           
-          <li class="dib">
-            <span class="icon iconfont icon-edit-square"></span>
-            <div class="name">
-              edit-square
-            </div>
-            <div class="code-name">.icon-edit-square
-            </div>
-          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-star-fill"></span>
+            <div class="name">
+              star-fill
+            </div>
+            <div class="code-name">.icon-star-fill
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-star"></span>
+            <div class="name">
+              star
+            </div>
+            <div class="code-name">.icon-star
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-smile"></span>
+            <div class="name">
+              smile
+            </div>
+            <div class="code-name">.icon-smile
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-message"></span>
+            <div class="name">
+              message
+            </div>
+            <div class="code-name">.icon-message
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-menu"></span>
+            <div class="name">
+              menu
+            </div>
+            <div class="code-name">.icon-menu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-right"></span>
+            <div class="name">
+              right
+            </div>
+            <div class="code-name">.icon-right
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-left"></span>
+            <div class="name">
+              left
+            </div>
+            <div class="code-name">.icon-left
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-info-circle"></span>
+            <div class="name">
+              info-circle
+            </div>
+            <div class="code-name">.icon-info-circle
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-caret-up"></span>
+            <div class="name">
+              caret-up
+            </div>
+            <div class="code-name">.icon-caret-up
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-close-one"></span>
+            <div class="name">
+              close-one
+            </div>
+            <div class="code-name">.icon-close-one
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-slightly-smiling-face"></span>
+            <div class="name">
+              slightly-smiling-face
+            </div>
+            <div class="code-name">.icon-slightly-smiling-face
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-pic"></span>
+            <div class="name">
+              pic
+            </div>
+            <div class="code-name">.icon-pic
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-voice-one"></span>
+            <div class="name">
+              voice-one
+            </div>
+            <div class="code-name">.icon-voice-one
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-peoples-two"></span>
+            <div class="name">
+              peoples-two 
+            </div>
+            <div class="code-name">.icon-peoples-two
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-pic-two"></span>
+            <div class="name">
+              pic-two
+            </div>
+            <div class="code-name">.icon-pic-two
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-close-remind"></span>
+            <div class="name">
+              close-remind
+            </div>
+            <div class="code-name">.icon-close-remind
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-log"></span>
+            <div class="name">
+              log
+            </div>
+            <div class="code-name">.icon-log
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jubaoguanli"></span>
+            <div class="name">
+              jubaoguanli
+            </div>
+            <div class="code-name">.icon-jubaoguanli
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-setting-one"></span>
+            <div class="name">
+              setting
+            </div>
+            <div class="code-name">.icon-setting-one
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-delete-one"></span>
+            <div class="name">
+              delete
+            </div>
+            <div class="code-name">.icon-delete-one
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-set-top"></span>
+            <div class="name">
+              set-top
+            </div>
+            <div class="code-name">.icon-set-top
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-comment-two"></span>
+            <div class="name">
+              comment-two
+            </div>
+            <div class="code-name">.icon-comment-two
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-eit"></span>
+            <div class="name">
+              tiji
+            </div>
+            <div class="code-name">.icon-eit
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-comments"></span>
+            <div class="name">
+              comments
+            </div>
+            <div class="code-name">.icon-comments
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-comment-one"></span>
+            <div class="name">
+              comment-one
+            </div>
+            <div class="code-name">.icon-comment-one
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-like"></span>
+            <div class="name">
+              like
+            </div>
+            <div class="code-name">.icon-like
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-send"></span>
+            <div class="name">
+              send
+            </div>
+            <div class="code-name">.icon-send
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-copy"></span>
+            <div class="name">
+              copy
+            </div>
+            <div class="code-name">.icon-copy
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-quote"></span>
+            <div class="name">
+              quote
+            </div>
+            <div class="code-name">.icon-quote
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-delete-three"></span>
+            <div class="name">
+              delete-three
+            </div>
+            <div class="code-name">.icon-delete-three
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-edit-1"></span>
+            <div class="name">
+              edit-1
+            </div>
+            <div class="code-name">.icon-edit-1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-logout"></span>
+            <div class="name">
+              logout
+            </div>
+            <div class="code-name">.icon-logout
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-chat-message"></span>
+            <div class="name">
+              chat-message
+            </div>
+            <div class="code-name">.icon-chat-message
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-chevron-down"></span>
+            <div class="name">
+              chevron-down
+            </div>
+            <div class="code-name">.icon-chevron-down
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-caret-down-small"></span>
+            <div class="name">
+              caret-down-small
+            </div>
+            <div class="code-name">.icon-caret-down-small
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-cart"></span>
+            <div class="name">
+              cart
+            </div>
+            <div class="code-name">.icon-cart
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-lock"></span>
+            <div class="name">
+              lock
+            </div>
+            <div class="code-name">.icon-lock
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-unlock"></span>
+            <div class="name">
+              unlock
+            </div>
+            <div class="code-name">.icon-unlock
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-more"></span>
+            <div class="name">
+              more
+            </div>
+            <div class="code-name">.icon-more
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-location"></span>
+            <div class="name">
+              location
+            </div>
+            <div class="code-name">.icon-location
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-chatgroup"></span>
+            <div class="name">
+              chatgroup
+            </div>
+            <div class="code-name">.icon-chatgroup
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-share"></span>
+            <div class="name">
+              share
+            </div>
+            <div class="code-name">.icon-share
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-Thumbs-up"></span>
+            <div class="name">
+              Thumbs-up
+            </div>
+            <div class="code-name">.icon-Thumbs-up
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-eye"></span>
+            <div class="name">
+              eye
+            </div>
+            <div class="code-name">.icon-eye
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-Female"></use>
+                </svg>
+                <div class="name">Female</div>
+                <div class="code-name">#icon-Female</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-Male"></use>
+                </svg>
+                <div class="name">Male</div>
+                <div class="code-name">#icon-Male</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-profile"></use>
+                </svg>
+                <div class="name">profile</div>
+                <div class="code-name">#icon-profile</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-arrow_right"></use>
+                </svg>
+                <div class="name">arrow_right</div>
+                <div class="code-name">#icon-arrow_right</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fire-fill"></use>
+                </svg>
+                <div class="name">fire-fill</div>
+                <div class="code-name">#icon-fire-fill</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-eye-fill"></use>
+                </svg>
+                <div class="name">eye-fill</div>
+                <div class="code-name">#icon-eye-fill</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-like-fill"></use>
+                </svg>
+                <div class="name">like-fill</div>
+                <div class="code-name">#icon-like-fill</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-location-fill"></use>
+                </svg>
+                <div class="name">location-fill</div>
+                <div class="code-name">#icon-location-fill</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-close"></use>
+                </svg>
+                <div class="name">close</div>
+                <div class="code-name">#icon-close</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-caret-down"></use>
+                </svg>
+                <div class="name">caret-down</div>
+                <div class="code-name">#icon-caret-down</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-plus-circle-fill"></use>
+                </svg>
+                <div class="name">plus-circle-fill</div>
+                <div class="code-name">#icon-plus-circle-fill</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-image-fill"></use>
+                </svg>
+                <div class="name">image-fill</div>
+                <div class="code-name">#icon-image-fill</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-setting"></use>
+                </svg>
+                <div class="name">setting</div>
+                <div class="code-name">#icon-setting</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-edit-square"></use>
+                </svg>
+                <div class="name">edit-square</div>
+                <div class="code-name">#icon-edit-square</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-delete-two"></use>
+                </svg>
+                <div class="name">delete</div>
+                <div class="code-name">#icon-delete-two</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-plus"></use>
+                </svg>
+                <div class="name">plus</div>
+                <div class="code-name">#icon-plus</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-star-fill"></use>
+                </svg>
+                <div class="name">star-fill</div>
+                <div class="code-name">#icon-star-fill</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-star"></use>
+                </svg>
+                <div class="name">star</div>
+                <div class="code-name">#icon-star</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-smile"></use>
+                </svg>
+                <div class="name">smile</div>
+                <div class="code-name">#icon-smile</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-message"></use>
+                </svg>
+                <div class="name">message</div>
+                <div class="code-name">#icon-message</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-menu"></use>
+                </svg>
+                <div class="name">menu</div>
+                <div class="code-name">#icon-menu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-right"></use>
+                </svg>
+                <div class="name">right</div>
+                <div class="code-name">#icon-right</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-left"></use>
+                </svg>
+                <div class="name">left</div>
+                <div class="code-name">#icon-left</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-info-circle"></use>
+                </svg>
+                <div class="name">info-circle</div>
+                <div class="code-name">#icon-info-circle</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-caret-up"></use>
+                </svg>
+                <div class="name">caret-up</div>
+                <div class="code-name">#icon-caret-up</div>
+            </li>
           
-          <li class="dib">
-            <span class="icon iconfont icon-delete"></span>
-            <div class="name">
-              delete
-            </div>
-            <div class="code-name">.icon-delete
-            </div>
-          </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-close-one"></use>
+                </svg>
+                <div class="name">close-one</div>
+                <div class="code-name">#icon-close-one</div>
+            </li>
           
-          <li class="dib">
-            <span class="icon iconfont icon-setting"></span>
-            <div class="name">
-              setting
-            </div>
-            <div class="code-name">.icon-setting
-            </div>
-          </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-slightly-smiling-face"></use>
+                </svg>
+                <div class="name">slightly-smiling-face</div>
+                <div class="code-name">#icon-slightly-smiling-face</div>
+            </li>
           
-          <li class="dib">
-            <span class="icon iconfont icon-plus-circle-fill"></span>
-            <div class="name">
-              plus-circle-fill
-            </div>
-            <div class="code-name">.icon-plus-circle-fill
-            </div>
-          </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-pic"></use>
+                </svg>
+                <div class="name">pic</div>
+                <div class="code-name">#icon-pic</div>
+            </li>
           
-          <li class="dib">
-            <span class="icon iconfont icon-image-fill"></span>
-            <div class="name">
-              image-fill
-            </div>
-            <div class="code-name">.icon-image-fill
-            </div>
-          </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-voice-one"></use>
+                </svg>
+                <div class="name">voice-one</div>
+                <div class="code-name">#icon-voice-one</div>
+            </li>
           
-          <li class="dib">
-            <span class="icon iconfont icon-close"></span>
-            <div class="name">
-              close
-            </div>
-            <div class="code-name">.icon-close
-            </div>
-          </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-peoples-two"></use>
+                </svg>
+                <div class="name">peoples-two </div>
+                <div class="code-name">#icon-peoples-two</div>
+            </li>
           
-          <li class="dib">
-            <span class="icon iconfont icon-caret-down"></span>
-            <div class="name">
-              caret-down
-            </div>
-            <div class="code-name">.icon-caret-down
-            </div>
-          </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-pic-two"></use>
+                </svg>
+                <div class="name">pic-two</div>
+                <div class="code-name">#icon-pic-two</div>
+            </li>
           
-          <li class="dib">
-            <span class="icon iconfont icon-location-fill"></span>
-            <div class="name">
-              location-fill
-            </div>
-            <div class="code-name">.icon-location-fill
-            </div>
-          </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-close-remind"></use>
+                </svg>
+                <div class="name">close-remind</div>
+                <div class="code-name">#icon-close-remind</div>
+            </li>
           
-          <li class="dib">
-            <span class="icon iconfont icon-fire-fill"></span>
-            <div class="name">
-              fire-fill
-            </div>
-            <div class="code-name">.icon-fire-fill
-            </div>
-          </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-log"></use>
+                </svg>
+                <div class="name">log</div>
+                <div class="code-name">#icon-log</div>
+            </li>
           
-          <li class="dib">
-            <span class="icon iconfont icon-eye-fill"></span>
-            <div class="name">
-              eye-fill
-            </div>
-            <div class="code-name">.icon-eye-fill
-            </div>
-          </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jubaoguanli"></use>
+                </svg>
+                <div class="name">jubaoguanli</div>
+                <div class="code-name">#icon-jubaoguanli</div>
+            </li>
           
-          <li class="dib">
-            <span class="icon iconfont icon-like-fill"></span>
-            <div class="name">
-              like-fill
-            </div>
-            <div class="code-name">.icon-like-fill
-            </div>
-          </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-setting-one"></use>
+                </svg>
+                <div class="name">setting</div>
+                <div class="code-name">#icon-setting-one</div>
+            </li>
           
-          <li class="dib">
-            <span class="icon iconfont icon-arrow_right"></span>
-            <div class="name">
-              arrow_right
-            </div>
-            <div class="code-name">.icon-arrow_right
-            </div>
-          </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-delete-one"></use>
+                </svg>
+                <div class="name">delete</div>
+                <div class="code-name">#icon-delete-one</div>
+            </li>
           
-          <li class="dib">
-            <span class="icon iconfont icon-profile"></span>
-            <div class="name">
-              profile
-            </div>
-            <div class="code-name">.icon-profile
-            </div>
-          </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-set-top"></use>
+                </svg>
+                <div class="name">set-top</div>
+                <div class="code-name">#icon-set-top</div>
+            </li>
           
-        </ul>
-        <div class="article markdown">
-        <h2 id="font-class-">font-class 引用</h2>
-        <hr>
-
-        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
-        <p>与 Unicode 使用方式相比，具有如下特点：</p>
-        <ul>
-          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
-          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
-        </ul>
-        <p>使用步骤如下：</p>
-        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
-<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
-</code></pre>
-        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
-<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
-</code></pre>
-        <blockquote>
-          <p>"
-            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
-        </blockquote>
-      </div>
-      </div>
-      <div class="content symbol">
-          <ul class="icon_lists dib-box">
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-comment-two"></use>
+                </svg>
+                <div class="name">comment-two</div>
+                <div class="code-name">#icon-comment-two</div>
+            </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-left"></use>
+                  <use xlink:href="#icon-eit"></use>
                 </svg>
-                <div class="name">left</div>
-                <div class="code-name">#icon-left</div>
+                <div class="name">tiji</div>
+                <div class="code-name">#icon-eit</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-right"></use>
+                  <use xlink:href="#icon-comments"></use>
                 </svg>
-                <div class="name">right</div>
-                <div class="code-name">#icon-right</div>
+                <div class="name">comments</div>
+                <div class="code-name">#icon-comments</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-menu"></use>
+                  <use xlink:href="#icon-comment-one"></use>
                 </svg>
-                <div class="name">menu</div>
-                <div class="code-name">#icon-menu</div>
+                <div class="name">comment-one</div>
+                <div class="code-name">#icon-comment-one</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-message"></use>
+                  <use xlink:href="#icon-like"></use>
                 </svg>
-                <div class="name">message</div>
-                <div class="code-name">#icon-message</div>
+                <div class="name">like</div>
+                <div class="code-name">#icon-like</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-smile"></use>
+                  <use xlink:href="#icon-send"></use>
                 </svg>
-                <div class="name">smile</div>
-                <div class="code-name">#icon-smile</div>
+                <div class="name">send</div>
+                <div class="code-name">#icon-send</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-star"></use>
+                  <use xlink:href="#icon-copy"></use>
                 </svg>
-                <div class="name">star</div>
-                <div class="code-name">#icon-star</div>
+                <div class="name">copy</div>
+                <div class="code-name">#icon-copy</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-star-fill"></use>
+                  <use xlink:href="#icon-quote"></use>
                 </svg>
-                <div class="name">star-fill</div>
-                <div class="code-name">#icon-star-fill</div>
+                <div class="name">quote</div>
+                <div class="code-name">#icon-quote</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-plus"></use>
+                  <use xlink:href="#icon-delete-three"></use>
                 </svg>
-                <div class="name">plus</div>
-                <div class="code-name">#icon-plus</div>
+                <div class="name">delete-three</div>
+                <div class="code-name">#icon-delete-three</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-edit-square"></use>
+                  <use xlink:href="#icon-edit-1"></use>
                 </svg>
-                <div class="name">edit-square</div>
-                <div class="code-name">#icon-edit-square</div>
+                <div class="name">edit-1</div>
+                <div class="code-name">#icon-edit-1</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-delete"></use>
+                  <use xlink:href="#icon-logout"></use>
                 </svg>
-                <div class="name">delete</div>
-                <div class="code-name">#icon-delete</div>
+                <div class="name">logout</div>
+                <div class="code-name">#icon-logout</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-setting"></use>
+                  <use xlink:href="#icon-chat-message"></use>
                 </svg>
-                <div class="name">setting</div>
-                <div class="code-name">#icon-setting</div>
+                <div class="name">chat-message</div>
+                <div class="code-name">#icon-chat-message</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-plus-circle-fill"></use>
+                  <use xlink:href="#icon-chevron-down"></use>
                 </svg>
-                <div class="name">plus-circle-fill</div>
-                <div class="code-name">#icon-plus-circle-fill</div>
+                <div class="name">chevron-down</div>
+                <div class="code-name">#icon-chevron-down</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-image-fill"></use>
+                  <use xlink:href="#icon-caret-down-small"></use>
                 </svg>
-                <div class="name">image-fill</div>
-                <div class="code-name">#icon-image-fill</div>
+                <div class="name">caret-down-small</div>
+                <div class="code-name">#icon-caret-down-small</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-close"></use>
+                  <use xlink:href="#icon-cart"></use>
                 </svg>
-                <div class="name">close</div>
-                <div class="code-name">#icon-close</div>
+                <div class="name">cart</div>
+                <div class="code-name">#icon-cart</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-caret-down"></use>
+                  <use xlink:href="#icon-lock"></use>
                 </svg>
-                <div class="name">caret-down</div>
-                <div class="code-name">#icon-caret-down</div>
+                <div class="name">lock</div>
+                <div class="code-name">#icon-lock</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-location-fill"></use>
+                  <use xlink:href="#icon-unlock"></use>
                 </svg>
-                <div class="name">location-fill</div>
-                <div class="code-name">#icon-location-fill</div>
+                <div class="name">unlock</div>
+                <div class="code-name">#icon-unlock</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-fire-fill"></use>
+                  <use xlink:href="#icon-more"></use>
                 </svg>
-                <div class="name">fire-fill</div>
-                <div class="code-name">#icon-fire-fill</div>
+                <div class="name">more</div>
+                <div class="code-name">#icon-more</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-eye-fill"></use>
+                  <use xlink:href="#icon-location"></use>
                 </svg>
-                <div class="name">eye-fill</div>
-                <div class="code-name">#icon-eye-fill</div>
+                <div class="name">location</div>
+                <div class="code-name">#icon-location</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-like-fill"></use>
+                  <use xlink:href="#icon-chatgroup"></use>
                 </svg>
-                <div class="name">like-fill</div>
-                <div class="code-name">#icon-like-fill</div>
+                <div class="name">chatgroup</div>
+                <div class="code-name">#icon-chatgroup</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-arrow_right"></use>
+                  <use xlink:href="#icon-share"></use>
                 </svg>
-                <div class="name">arrow_right</div>
-                <div class="code-name">#icon-arrow_right</div>
+                <div class="name">share</div>
+                <div class="code-name">#icon-share</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-profile"></use>
+                  <use xlink:href="#icon-Thumbs-up"></use>
                 </svg>
-                <div class="name">profile</div>
-                <div class="code-name">#icon-profile</div>
+                <div class="name">Thumbs-up</div>
+                <div class="code-name">#icon-Thumbs-up</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-eye"></use>
+                </svg>
+                <div class="name">eye</div>
+                <div class="code-name">#icon-eye</div>
             </li>
           
           </ul>

src/assets/iconfont/iconfont.css

@@ -1,9 +1,9 @@
 @font-face {
-  font-family: "iconfont"; /* Project id 4723464 */
-  src: url('iconfont.woff2?t=1735367455324') format('woff2'),
-       url('iconfont.woff?t=1735367455324') format('woff'),
-       url('iconfont.ttf?t=1735367455324') format('truetype'),
-       url('iconfont.svg?t=1735367455324#iconfont') format('svg');
+  font-family: "iconfont"; /* Project id 4820751 */
+  src: url('iconfont.woff2?t=1738918368855') format('woff2'),
+       url('iconfont.woff?t=1738918368855') format('woff'),
+       url('iconfont.ttf?t=1738918368855') format('truetype'),
+       url('iconfont.svg?t=1738918368855#iconfont') format('svg');
 }
 
 .iconfont {
@@ -14,87 +14,243 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-left:before {
-  content: "\e7ec";
+.icon-Female:before {
+  content: "\e7e5";
 }
 
-.icon-right:before {
-  content: "\e7eb";
+.icon-Male:before {
+  content: "\e7e4";
 }
 
-.icon-menu:before {
-  content: "\e7f4";
+.icon-profile:before {
+  content: "\e60f";
 }
 
-.icon-message:before {
-  content: "\e78a";
+.icon-arrow_right:before {
+  content: "\e60d";
 }
 
-.icon-smile:before {
-  content: "\e783";
+.icon-fire-fill:before {
+  content: "\e866";
 }
 
-.icon-star:before {
-  content: "\e7df";
+.icon-eye-fill:before {
+  content: "\e869";
 }
 
-.icon-star-fill:before {
-  content: "\e86b";
+.icon-like-fill:before {
+  content: "\e86a";
 }
 
-.icon-plus:before {
-  content: "\e8fe";
+.icon-location-fill:before {
+  content: "\e868";
+}
+
+.icon-close:before {
+  content: "\e7fc";
+}
+
+.icon-caret-down:before {
+  content: "\e8ec";
+}
+
+.icon-plus-circle-fill:before {
+  content: "\e845";
+}
+
+.icon-image-fill:before {
+  content: "\e860";
+}
+
+.icon-setting:before {
+  content: "\e78e";
 }
 
 .icon-edit-square:before {
   content: "\e791";
 }
 
-.icon-delete:before {
+.icon-delete-two:before {
   content: "\e7c3";
 }
 
-.icon-setting:before {
-  content: "\e78e";
+.icon-plus:before {
+  content: "\e8fe";
 }
 
-.icon-plus-circle-fill:before {
-  content: "\e845";
+.icon-star-fill:before {
+  content: "\e86b";
 }
 
-.icon-image-fill:before {
-  content: "\e860";
+.icon-star:before {
+  content: "\e7df";
 }
 
-.icon-close:before {
-  content: "\e7fc";
+.icon-smile:before {
+  content: "\e783";
 }
 
-.icon-caret-down:before {
-  content: "\e8ec";
+.icon-message:before {
+  content: "\e78a";
 }
 
-.icon-location-fill:before {
-  content: "\e868";
+.icon-menu:before {
+  content: "\e7f4";
 }
 
-.icon-fire-fill:before {
-  content: "\e866";
+.icon-right:before {
+  content: "\e7eb";
 }
 
-.icon-eye-fill:before {
-  content: "\e869";
+.icon-left:before {
+  content: "\e7ec";
 }
 
-.icon-like-fill:before {
-  content: "\e86a";
+.icon-info-circle:before {
+  content: "\e77e";
 }
 
-.icon-arrow_right:before {
-  content: "\e60d";
+.icon-caret-up:before {
+  content: "\e8ed";
 }
 
-.icon-profile:before {
-  content: "\e60f";
+.icon-close-one:before {
+  content: "\e7c0";
+}
+
+.icon-slightly-smiling-face:before {
+  content: "\e7c1";
+}
+
+.icon-pic:before {
+  content: "\e7c2";
+}
+
+.icon-voice-one:before {
+  content: "\e7c4";
+}
+
+.icon-peoples-two:before {
+  content: "\e7c5";
+}
+
+.icon-pic-two:before {
+  content: "\e7c6";
+}
+
+.icon-close-remind:before {
+  content: "\e7c8";
+}
+
+.icon-log:before {
+  content: "\e7c9";
+}
+
+.icon-jubaoguanli:before {
+  content: "\e7ca";
+}
+
+.icon-setting-one:before {
+  content: "\e7cb";
+}
+
+.icon-delete-one:before {
+  content: "\e7cc";
+}
+
+.icon-set-top:before {
+  content: "\e7c7";
+}
+
+.icon-comment-two:before {
+  content: "\e7cd";
+}
+
+.icon-eit:before {
+  content: "\e7ce";
+}
+
+.icon-comments:before {
+  content: "\e7cf";
+}
+
+.icon-comment-one:before {
+  content: "\e7d0";
+}
+
+.icon-like:before {
+  content: "\e7d1";
+}
+
+.icon-send:before {
+  content: "\e7d2";
+}
+
+.icon-copy:before {
+  content: "\e7d3";
+}
+
+.icon-quote:before {
+  content: "\e7d4";
+}
+
+.icon-delete-three:before {
+  content: "\e7d5";
+}
+
+.icon-edit-1:before {
+  content: "\e7d7";
+}
+
+.icon-logout:before {
+  content: "\e7d8";
+}
+
+.icon-chat-message:before {
+  content: "\e7d9";
+}
+
+.icon-chevron-down:before {
+  content: "\e7da";
+}
+
+.icon-caret-down-small:before {
+  content: "\e7db";
+}
+
+.icon-cart:before {
+  content: "\e7dc";
+}
+
+.icon-lock:before {
+  content: "\e7dd";
+}
+
+.icon-unlock:before {
+  content: "\e7e0";
+}
+
+.icon-more:before {
+  content: "\e7e1";
+}
+
+.icon-location:before {
+  content: "\e7e2";
+}
+
+.icon-chatgroup:before {
+  content: "\e7de";
+}
+
+.icon-share:before {
+  content: "\e7d6";
+}
+
+.icon-Thumbs-up:before {
+  content: "\e7e3";
+}
+
+.icon-eye:before {
+  content: "\e78f";
 }
 

src/assets/iconfont/iconfont.json

@@ -1,65 +1,100 @@
 {
-  "id": "4723464",
-  "name": "xyy-web",
+  "id": "4820751",
+  "name": "xxy-web-two",
   "font_family": "iconfont",
   "css_prefix_text": "icon-",
-  "description": "",
+  "description": "逍遥游",
   "glyphs": [
     {
-      "icon_id": "4767012",
-      "name": "left",
-      "font_class": "left",
-      "unicode": "e7ec",
-      "unicode_decimal": 59372
+      "icon_id": "43272273",
+      "name": "Female",
+      "font_class": "Female",
+      "unicode": "e7e5",
+      "unicode_decimal": 59365
     },
     {
-      "icon_id": "4767011",
-      "name": "right",
-      "font_class": "right",
-      "unicode": "e7eb",
-      "unicode_decimal": 59371
+      "icon_id": "43272253",
+      "name": "Male",
+      "font_class": "Male",
+      "unicode": "e7e4",
+      "unicode_decimal": 59364
     },
     {
-      "icon_id": "4767059",
-      "name": "menu",
-      "font_class": "menu",
-      "unicode": "e7f4",
-      "unicode_decimal": 59380
+      "icon_id": "11813183",
+      "name": "profile",
+      "font_class": "profile",
+      "unicode": "e60f",
+      "unicode_decimal": 58895
     },
     {
-      "icon_id": "4765866",
-      "name": "message",
-      "font_class": "message",
-      "unicode": "e78a",
-      "unicode_decimal": 59274
+      "icon_id": "14678715",
+      "name": "arrow_right",
+      "font_class": "arrow_right",
+      "unicode": "e60d",
+      "unicode_decimal": 58893
     },
     {
-      "icon_id": "4765739",
-      "name": "smile",
-      "font_class": "smile",
-      "unicode": "e783",
-      "unicode_decimal": 59267
+      "icon_id": "4936652",
+      "name": "fire-fill",
+      "font_class": "fire-fill",
+      "unicode": "e866",
+      "unicode_decimal": 59494
     },
     {
-      "icon_id": "4766954",
-      "name": "star",
-      "font_class": "star",
-      "unicode": "e7df",
-      "unicode_decimal": 59359
+      "icon_id": "4936668",
+      "name": "eye-fill",
+      "font_class": "eye-fill",
+      "unicode": "e869",
+      "unicode_decimal": 59497
     },
     {
-      "icon_id": "4936673",
-      "name": "star-fill",
-      "font_class": "star-fill",
-      "unicode": "e86b",
-      "unicode_decimal": 59499
+      "icon_id": "4936669",
+      "name": "like-fill",
+      "font_class": "like-fill",
+      "unicode": "e86a",
+      "unicode_decimal": 59498
     },
     {
-      "icon_id": "7834345",
-      "name": "plus",
-      "font_class": "plus",
-      "unicode": "e8fe",
-      "unicode_decimal": 59646
+      "icon_id": "4936659",
+      "name": "location-fill",
+      "font_class": "location-fill",
+      "unicode": "e868",
+      "unicode_decimal": 59496
+    },
+    {
+      "icon_id": "4767096",
+      "name": "close",
+      "font_class": "close",
+      "unicode": "e7fc",
+      "unicode_decimal": 59388
+    },
+    {
+      "icon_id": "6598339",
+      "name": "caret-down",
+      "font_class": "caret-down",
+      "unicode": "e8ec",
+      "unicode_decimal": 59628
+    },
+    {
+      "icon_id": "4936486",
+      "name": "plus-circle-fill",
+      "font_class": "plus-circle-fill",
+      "unicode": "e845",
+      "unicode_decimal": 59461
+    },
+    {
+      "icon_id": "4936630",
+      "name": "image-fill",
+      "font_class": "image-fill",
+      "unicode": "e860",
+      "unicode_decimal": 59488
+    },
+    {
+      "icon_id": "4765891",
+      "name": "setting",
+      "font_class": "setting",
+      "unicode": "e78e",
+      "unicode_decimal": 59278
     },
     {
       "icon_id": "4765957",
@@ -71,86 +106,324 @@
     {
       "icon_id": "4766676",
       "name": "delete",
-      "font_class": "delete",
+      "font_class": "delete-two",
       "unicode": "e7c3",
       "unicode_decimal": 59331
     },
     {
-      "icon_id": "4765891",
+      "icon_id": "7834345",
+      "name": "plus",
+      "font_class": "plus",
+      "unicode": "e8fe",
+      "unicode_decimal": 59646
+    },
+    {
+      "icon_id": "4936673",
+      "name": "star-fill",
+      "font_class": "star-fill",
+      "unicode": "e86b",
+      "unicode_decimal": 59499
+    },
+    {
+      "icon_id": "4766954",
+      "name": "star",
+      "font_class": "star",
+      "unicode": "e7df",
+      "unicode_decimal": 59359
+    },
+    {
+      "icon_id": "4765739",
+      "name": "smile",
+      "font_class": "smile",
+      "unicode": "e783",
+      "unicode_decimal": 59267
+    },
+    {
+      "icon_id": "4765866",
+      "name": "message",
+      "font_class": "message",
+      "unicode": "e78a",
+      "unicode_decimal": 59274
+    },
+    {
+      "icon_id": "4767059",
+      "name": "menu",
+      "font_class": "menu",
+      "unicode": "e7f4",
+      "unicode_decimal": 59380
+    },
+    {
+      "icon_id": "4767011",
+      "name": "right",
+      "font_class": "right",
+      "unicode": "e7eb",
+      "unicode_decimal": 59371
+    },
+    {
+      "icon_id": "4767012",
+      "name": "left",
+      "font_class": "left",
+      "unicode": "e7ec",
+      "unicode_decimal": 59372
+    },
+    {
+      "icon_id": "4765727",
+      "name": "info-circle",
+      "font_class": "info-circle",
+      "unicode": "e77e",
+      "unicode_decimal": 59262
+    },
+    {
+      "icon_id": "6598341",
+      "name": "caret-up",
+      "font_class": "caret-up",
+      "unicode": "e8ed",
+      "unicode_decimal": 59629
+    },
+    {
+      "icon_id": "43062458",
+      "name": "close-one",
+      "font_class": "close-one",
+      "unicode": "e7c0",
+      "unicode_decimal": 59328
+    },
+    {
+      "icon_id": "43062459",
+      "name": "slightly-smiling-face",
+      "font_class": "slightly-smiling-face",
+      "unicode": "e7c1",
+      "unicode_decimal": 59329
+    },
+    {
+      "icon_id": "43062460",
+      "name": "pic",
+      "font_class": "pic",
+      "unicode": "e7c2",
+      "unicode_decimal": 59330
+    },
+    {
+      "icon_id": "43062461",
+      "name": "voice-one",
+      "font_class": "voice-one",
+      "unicode": "e7c4",
+      "unicode_decimal": 59332
+    },
+    {
+      "icon_id": "43062462",
+      "name": "peoples-two ",
+      "font_class": "peoples-two",
+      "unicode": "e7c5",
+      "unicode_decimal": 59333
+    },
+    {
+      "icon_id": "43063327",
+      "name": "pic-two",
+      "font_class": "pic-two",
+      "unicode": "e7c6",
+      "unicode_decimal": 59334
+    },
+    {
+      "icon_id": "43063326",
+      "name": "close-remind",
+      "font_class": "close-remind",
+      "unicode": "e7c8",
+      "unicode_decimal": 59336
+    },
+    {
+      "icon_id": "43063324",
+      "name": "log",
+      "font_class": "log",
+      "unicode": "e7c9",
+      "unicode_decimal": 59337
+    },
+    {
+      "icon_id": "43063325",
+      "name": "jubaoguanli",
+      "font_class": "jubaoguanli",
+      "unicode": "e7ca",
+      "unicode_decimal": 59338
+    },
+    {
+      "icon_id": "43063323",
       "name": "setting",
-      "font_class": "setting",
-      "unicode": "e78e",
-      "unicode_decimal": 59278
+      "font_class": "setting-one",
+      "unicode": "e7cb",
+      "unicode_decimal": 59339
     },
     {
-      "icon_id": "4936486",
-      "name": "plus-circle-fill",
-      "font_class": "plus-circle-fill",
-      "unicode": "e845",
-      "unicode_decimal": 59461
+      "icon_id": "43063322",
+      "name": "delete",
+      "font_class": "delete-one",
+      "unicode": "e7cc",
+      "unicode_decimal": 59340
     },
     {
-      "icon_id": "4936630",
-      "name": "image-fill",
-      "font_class": "image-fill",
-      "unicode": "e860",
-      "unicode_decimal": 59488
+      "icon_id": "43063382",
+      "name": "set-top",
+      "font_class": "set-top",
+      "unicode": "e7c7",
+      "unicode_decimal": 59335
     },
     {
-      "icon_id": "4767096",
-      "name": "close",
-      "font_class": "close",
-      "unicode": "e7fc",
-      "unicode_decimal": 59388
+      "icon_id": "43073203",
+      "name": "comment-two",
+      "font_class": "comment-two",
+      "unicode": "e7cd",
+      "unicode_decimal": 59341
     },
     {
-      "icon_id": "6598339",
-      "name": "caret-down",
-      "font_class": "caret-down",
-      "unicode": "e8ec",
-      "unicode_decimal": 59628
+      "icon_id": "43073202",
+      "name": "tiji",
+      "font_class": "eit",
+      "unicode": "e7ce",
+      "unicode_decimal": 59342
     },
     {
-      "icon_id": "4936659",
-      "name": "location-fill",
-      "font_class": "location-fill",
-      "unicode": "e868",
-      "unicode_decimal": 59496
+      "icon_id": "43073200",
+      "name": "comments",
+      "font_class": "comments",
+      "unicode": "e7cf",
+      "unicode_decimal": 59343
     },
     {
-      "icon_id": "4936652",
-      "name": "fire-fill",
-      "font_class": "fire-fill",
-      "unicode": "e866",
-      "unicode_decimal": 59494
+      "icon_id": "43073199",
+      "name": "comment-one",
+      "font_class": "comment-one",
+      "unicode": "e7d0",
+      "unicode_decimal": 59344
     },
     {
-      "icon_id": "4936668",
-      "name": "eye-fill",
-      "font_class": "eye-fill",
-      "unicode": "e869",
-      "unicode_decimal": 59497
+      "icon_id": "43073201",
+      "name": "like",
+      "font_class": "like",
+      "unicode": "e7d1",
+      "unicode_decimal": 59345
     },
     {
-      "icon_id": "4936669",
-      "name": "like-fill",
-      "font_class": "like-fill",
-      "unicode": "e86a",
-      "unicode_decimal": 59498
+      "icon_id": "43073198",
+      "name": "send",
+      "font_class": "send",
+      "unicode": "e7d2",
+      "unicode_decimal": 59346
     },
     {
-      "icon_id": "14678715",
-      "name": "arrow_right",
-      "font_class": "arrow_right",
-      "unicode": "e60d",
-      "unicode_decimal": 58893
+      "icon_id": "43078629",
+      "name": "copy",
+      "font_class": "copy",
+      "unicode": "e7d3",
+      "unicode_decimal": 59347
     },
     {
-      "icon_id": "11813183",
-      "name": "profile",
-      "font_class": "profile",
-      "unicode": "e60f",
-      "unicode_decimal": 58895
+      "icon_id": "43078628",
+      "name": "quote",
+      "font_class": "quote",
+      "unicode": "e7d4",
+      "unicode_decimal": 59348
+    },
+    {
+      "icon_id": "43078637",
+      "name": "delete-three",
+      "font_class": "delete-three",
+      "unicode": "e7d5",
+      "unicode_decimal": 59349
+    },
+    {
+      "icon_id": "43103287",
+      "name": "edit-1",
+      "font_class": "edit-1",
+      "unicode": "e7d7",
+      "unicode_decimal": 59351
+    },
+    {
+      "icon_id": "43103286",
+      "name": "logout",
+      "font_class": "logout",
+      "unicode": "e7d8",
+      "unicode_decimal": 59352
+    },
+    {
+      "icon_id": "43103284",
+      "name": "chat-message",
+      "font_class": "chat-message",
+      "unicode": "e7d9",
+      "unicode_decimal": 59353
+    },
+    {
+      "icon_id": "43103285",
+      "name": "chevron-down",
+      "font_class": "chevron-down",
+      "unicode": "e7da",
+      "unicode_decimal": 59354
+    },
+    {
+      "icon_id": "43103282",
+      "name": "caret-down-small",
+      "font_class": "caret-down-small",
+      "unicode": "e7db",
+      "unicode_decimal": 59355
+    },
+    {
+      "icon_id": "43103283",
+      "name": "cart",
+      "font_class": "cart",
+      "unicode": "e7dc",
+      "unicode_decimal": 59356
+    },
+    {
+      "icon_id": "43209895",
+      "name": "lock",
+      "font_class": "lock",
+      "unicode": "e7dd",
+      "unicode_decimal": 59357
+    },
+    {
+      "icon_id": "43209870",
+      "name": "unlock",
+      "font_class": "unlock",
+      "unicode": "e7e0",
+      "unicode_decimal": 59360
+    },
+    {
+      "icon_id": "43209869",
+      "name": "more",
+      "font_class": "more",
+      "unicode": "e7e1",
+      "unicode_decimal": 59361
+    },
+    {
+      "icon_id": "43209868",
+      "name": "location",
+      "font_class": "location",
+      "unicode": "e7e2",
+      "unicode_decimal": 59362
+    },
+    {
+      "icon_id": "43210372",
+      "name": "chatgroup",
+      "font_class": "chatgroup",
+      "unicode": "e7de",
+      "unicode_decimal": 59358
+    },
+    {
+      "icon_id": "43223178",
+      "name": "share",
+      "font_class": "share",
+      "unicode": "e7d6",
+      "unicode_decimal": 59350
+    },
+    {
+      "icon_id": "43223177",
+      "name": "Thumbs-up",
+      "font_class": "Thumbs-up",
+      "unicode": "e7e3",
+      "unicode_decimal": 59363
+    },
+    {
+      "icon_id": "4765896",
+      "name": "eye",
+      "font_class": "eye",
+      "unicode": "e78f",
+      "unicode_decimal": 59279
     }
   ]
 }

src/assets/img/chat/book.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Book (&#228;&#185;&#166;&#231;&#177;&#141;)">
+<path id="Vector" d="M4 20C4 18 4 5 4 5C4 3.34315 5.4327 2 7.2 2H20V18C20 18 9.99075 18 7.2 18C4.68112 18 4 18.3421 4 20Z" fill="#FF9300" stroke="#FF9300" stroke-width="0.666667" stroke-linejoin="round"/>
+<path id="Vector_2" fill-rule="evenodd" clip-rule="evenodd" d="M6 22H20V18H6C4.89543 18 4 18.8954 4 20C4 21.1046 4.89543 22 6 22Z" stroke="#FF9300" stroke-width="0.666667" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/img/chat/chat-code.svg

@@ -0,0 +1,12 @@
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Two-dimensional-code-two (&#228;&#186;&#140;&#231;&#187;&#180;&#231;&#160;&#129;)">
+<path id="Vector" d="M5.25 2H1.75V6H5.25V2Z" stroke="#999999" stroke-linejoin="round"/>
+<path id="Vector_2" d="M5.25 10H1.75V14H5.25V10Z" stroke="#999999" stroke-linejoin="round"/>
+<path id="Vector_3" d="M12.25 2H8.75V6H12.25V2Z" stroke="#999999" stroke-linejoin="round"/>
+<path id="Vector_4" d="M7 2V6" stroke="#999999" stroke-linecap="round"/>
+<path id="Vector_5" d="M12.25 8H1.75" stroke="#999999" stroke-linecap="round"/>
+<path id="Vector_6" d="M9.91667 10V14" stroke="#999999" stroke-linecap="round"/>
+<path id="Vector_7" d="M12.25 10V14" stroke="#999999" stroke-linecap="round"/>
+<path id="Vector_8" d="M7.58333 10V14" stroke="#999999" stroke-linecap="round"/>
+</g>
+</svg>

src/assets/img/chat/check.svg

@@ -0,0 +1,5 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="check">
+<path id="union" d="M5.96249 9.01514L11.4073 3.57031L12.2117 4.37465L5.96249 10.6238L2.06055 6.72187L2.86488 5.91753L5.96249 9.01514Z" fill="white"/>
+</g>
+</svg>

src/assets/img/chat/city-one.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="City-one (&#229;&#159;&#142;&#229;&#184;&#130;)">
+<path id="Vector" d="M2 21H22" stroke="#FF6C5F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M9 11H5C4.44772 11 4 11.4477 4 12V20C4 20.5523 4.44772 21 5 21H9C9.55228 21 10 20.5523 10 20V12C10 11.4477 9.55228 11 9 11Z" fill="#FF6C5F" stroke="#FF6C5F" stroke-width="0.666667" stroke-linejoin="round"/>
+<path id="Vector_3" d="M19 2H11C10.4477 2 10 2.44772 10 3V20C10 20.5523 10.4477 21 11 21H19C19.5523 21 20 20.5523 20 20V3C20 2.44772 19.5523 2 19 2Z" fill="#FF6C5F" stroke="#FF6C5F" stroke-width="0.666667" stroke-linejoin="round"/>
+<path id="Vector_4" d="M14 16.0039H16" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_5" d="M6 16.0039H8" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_6" d="M14 11.5039H16" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_7" d="M14 7.00391H16" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/img/chat/close-remind.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Close-remind (&#229;&#133;&#179;&#233;&#151;&#173;&#230;&#143;&#144;&#233;&#134;&#146;)">
+<path id="Vector" d="M14 12.6666C14 12.6666 12 11 12 6.33331C12 4.12418 10.2091 2.33331 8 2.33331C7.15333 2.33331 6.36807 2.59637 5.72157 3.04522M10 12.6666H2C2 12.6666 3.8564 11.1196 3.99217 6.83331" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M6 12.6667H10C10 13.7713 9.10457 14.6667 8 14.6667C6.89543 14.6667 6 13.7713 6 12.6667Z" stroke="#666666" stroke-width="1.5"/>
+<path id="Vector_3" fill-rule="evenodd" clip-rule="evenodd" d="M7.99996 0.666687C7.26359 0.666687 6.66663 1.26364 6.66663 2.00002H9.33329C9.33329 1.26364 8.73633 0.666687 7.99996 0.666687Z" fill="#666666"/>
+<path id="Vector_4" d="M2.33337 2.16669L13.6667 14.8334" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/img/chat/comment-orange.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Comment (&#232;&#175;&#132;&#232;&#174;&#186;)">
+<path id="Vector" d="M22 3H2V18H6.5V20.5L11.5 18H22V3Z" stroke="#FF9300" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M7 9.75V11.25" stroke="#FF9300" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M12 9.75V11.25" stroke="#FF9300" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M17 9.75V11.25" stroke="#FF9300" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/img/chat/comment.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Comment (&#232;&#175;&#132;&#232;&#174;&#186;)">
+<path id="Vector" d="M22 3H2V18H6.5V20.5L11.5 18H22V3Z" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M7 9.75V11.25" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M12 9.75V11.25" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M17 9.75V11.25" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/img/chat/comments-black.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Comments (&#232;&#175;&#132;&#232;&#174;&#186;)">
+<path id="Vector" d="M16.5 19H11V15H18V11H22V19H19.5L18 20.5L16.5 19Z" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M2 3H18V15H8.5L6.5 17L4.5 15H2V3Z" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M6 11H9" stroke="#666666" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Vector_4" d="M6 7H12" stroke="#666666" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+</svg>

src/assets/img/chat/comments-orange.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Comments (&#232;&#175;&#132;&#232;&#174;&#186;)">
+<path id="Vector" d="M16.5 19H11V15H18V11H22V19H19.5L18 20.5L16.5 19Z" stroke="#FF9300" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M2 3H18V15H8.5L6.5 17L4.5 15H2V3Z" stroke="#FF9300" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M6 11H9" stroke="#FF9300" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Vector_4" d="M6 7H12" stroke="#FF9300" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+</svg>

src/assets/img/chat/comments-white.svg

@@ -0,0 +1,8 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Comments (&#232;&#175;&#132;&#232;&#174;&#186;)">
+<path id="Vector" d="M12.375 14.25H8.25V11.25H13.5V8.25H16.5V14.25H14.625L13.5 15.375L12.375 14.25Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M1.5 2.25H13.5V11.25H6.375L4.875 12.75L3.375 11.25H1.5V2.25Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M4.5 8.25H6.75" stroke="white" stroke-linecap="round"/>
+<path id="Vector_4" d="M4.5 5.25H9" stroke="white" stroke-linecap="round"/>
+</g>
+</svg>

src/assets/img/chat/ellipsis.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ellipsis">
+<g id="union">
+<path d="M4.5 13.5C5.32837 13.5 6 12.8284 6 12C6 11.1716 5.32837 10.5 4.5 10.5C3.67163 10.5 3 11.1716 3 12C3 12.8284 3.67163 13.5 4.5 13.5Z" fill="#333333"/>
+<path d="M10.5 12C10.5 12.8284 11.1716 13.5 12 13.5C12.8284 13.5 13.5 12.8284 13.5 12C13.5 11.1716 12.8284 10.5 12 10.5C11.1716 10.5 10.5 11.1716 10.5 12Z" fill="#333333"/>
+<path d="M18 12C18 12.8284 18.6716 13.5 19.5 13.5C20.3284 13.5 21 12.8284 21 12C21 11.1716 20.3284 10.5 19.5 10.5C18.6716 10.5 18 11.1716 18 12Z" fill="#333333"/>
+</g>
+</g>
+</svg>

src/assets/img/chat/like-orange.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Like (&#229;&#150;&#156;&#230;&#172;&#162;)">
+<path id="Vector" d="M7.5 4C4.46244 4 2 6.46245 2 9.5C2 15 8.5 20 12 21.1631C15.5 20 22 15 22 9.5C22 6.46245 19.5375 4 16.5 4C14.6399 4 12.9954 4.92345 12 6.3369C11.0046 4.92345 9.36015 4 7.5 4Z" stroke="#FF9300" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Line 4" d="M10 13H14" stroke="#FF9300" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Line 5" d="M12 11L12 15" stroke="#FF9300" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+</svg>

src/assets/img/chat/like.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Like (&#229;&#150;&#156;&#230;&#172;&#162;)">
+<path id="Vector" d="M7.5 4C4.46244 4 2 6.46245 2 9.5C2 15 8.5 20 12 21.1631C15.5 20 22 15 22 9.5C22 6.46245 19.5375 4 16.5 4C14.6399 4 12.9954 4.92345 12 6.3369C11.0046 4.92345 9.36015 4 7.5 4Z" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Line 4" d="M10 13H14" stroke="#666666" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Line 5" d="M12 11L12 15" stroke="#666666" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+</svg>

src/assets/img/chat/medical-files-orange.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Medical-files (&#229;&#140;&#187;&#231;&#150;&#151;&#230;&#161;&#163;&#230;&#161;&#136;)">
+<path id="Vector" d="M11.5 21H9.5H7.5H4.5C3.94771 21 3.5 20.5523 3.5 20V4C3.5 3.44771 3.94771 3 4.5 3H18.5C19.0523 3 19.5 3.44771 19.5 4V7.5V9.75" stroke="#FF9300" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M18.3182 13.5C19.5231 13.5 20.5 14.4402 20.5 15.6C20.5 17.1098 19.0454 18.4 18.3182 19.1C17.8333 19.5667 17.2272 20.0334 16.5 20.5C15.7728 20.0334 15.1666 19.5667 14.6818 19.1C13.9545 18.4 12.5 17.1098 12.5 15.6C12.5 14.4402 13.4768 13.5 14.6818 13.5C15.4407 13.5 16.1091 13.873 16.5 14.4388C16.8909 13.873 17.5593 13.5 18.3182 13.5Z" stroke="#FF9300" stroke-width="1.5" stroke-linejoin="round"/>
+<path id="Vector_3" d="M7.5 7H15.5" stroke="#FF9300" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+</svg>

src/assets/img/chat/medical-files.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Medical-files (&#229;&#140;&#187;&#231;&#150;&#151;&#230;&#161;&#163;&#230;&#161;&#136;)">
+<path id="Vector" d="M11.5 21H9.5H7.5H4.5C3.94771 21 3.5 20.5523 3.5 20V4C3.5 3.44771 3.94771 3 4.5 3H18.5C19.0523 3 19.5 3.44771 19.5 4V7.5V9.75" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M18.3182 13.5C19.5231 13.5 20.5 14.4402 20.5 15.6C20.5 17.1098 19.0454 18.4 18.3182 19.1C17.8333 19.5667 17.2272 20.0334 16.5 20.5C15.7728 20.0334 15.1666 19.5667 14.6818 19.1C13.9545 18.4 12.5 17.1098 12.5 15.6C12.5 14.4402 13.4768 13.5 14.6818 13.5C15.4407 13.5 16.1091 13.873 16.5 14.4388C16.8909 13.873 17.5593 13.5 18.3182 13.5Z" stroke="#666666" stroke-width="1.5" stroke-linejoin="round"/>
+<path id="Vector_3" d="M7.5 7H15.5" stroke="#666666" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+</svg>

src/assets/img/chat/no-conment.svg

@@ -0,0 +1,104 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#230;&#154;&#130;&#230;&#151;&#160;&#232;&#175;&#132;&#232;&#174;&#186;">
+<mask id="mask0_366_3616" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="160" height="160">
+<rect id="Rectangle 1" width="160" height="160" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_366_3616)">
+<g id="img">
+<path id="&#232;&#183;&#175;&#229;&#190;&#132; 78" fill-rule="evenodd" clip-rule="evenodd" d="M109.223 52.7596C90.0359 37.9707 92.3252 23.608 85.2995 18.225C78.2738 12.8421 34.8448 27.0372 16.7589 74.3968C-0.614342 119.89 42.7834 147.656 80.4762 145.255C114.974 143.057 160.251 113.173 149.393 75.5256C145.142 60.7885 128.411 67.5484 109.223 52.7596Z" fill="url(#paint0_linear_366_3616)"/>
+<g id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;" opacity="0.97998" filter="url(#filter0_i_366_3616)">
+<circle cx="60" cy="139" r="11" fill="url(#paint1_radial_366_3616)"/>
+</g>
+<g id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;&#229;&#164;&#135;&#228;&#187;&#189; 3" opacity="0.5" filter="url(#filter1_i_366_3616)">
+<circle cx="58.5" cy="34.5" r="6.5" fill="url(#paint2_radial_366_3616)"/>
+</g>
+<g id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;&#229;&#164;&#135;&#228;&#187;&#189; 4" opacity="0.2" filter="url(#filter2_i_366_3616)">
+<circle cx="77.5" cy="38.5" r="3.5" fill="url(#paint3_radial_366_3616)"/>
+</g>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132; 112" opacity="0.395601" fill-rule="evenodd" clip-rule="evenodd" d="M70.0008 123.617L19.2578 117.27C19.2578 117.27 5.76725 92.9653 20.9999 65.714L54.4773 96.328L70.0008 123.617Z" fill="url(#paint4_linear_366_3616)"/>
+<g id="&#232;&#175;&#132;&#232;&#174;&#186;" opacity="0.5">
+<path id="&#232;&#183;&#175;&#229;&#190;&#132; 111" fill-rule="evenodd" clip-rule="evenodd" d="M61.0308 53.7561C62.1117 53.2857 63.3587 53.4053 64.3305 54.0725L72.3287 59.5638L31.1996 78.676V104.352L23.9244 100.151C22.5502 99.3572 21.6875 97.9062 21.6467 96.3199L21.1975 78.8547C21.0781 74.2131 23.7863 69.9631 28.0437 68.1104L61.0308 53.7561Z" fill="url(#paint5_linear_366_3616)"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132; 111_2" fill-rule="evenodd" clip-rule="evenodd" d="M68.7998 59.1C71.0597 58.1056 73.5964 59.7607 73.5964 62.2298V81.5488C73.5964 85.0944 71.5964 88.3366 68.4279 89.9277V94.4628C68.4279 94.8035 68.1308 95.0681 67.7924 95.0289L58.8588 93.9938L35.3948 104.589C32.419 105.933 29.0367 103.804 28.9606 100.54L28.5865 84.5002C28.4789 79.8854 31.1654 75.6614 35.3904 73.8021L68.7998 59.1Z" fill="#FEECD1"/>
+<path id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;_2" fill-rule="evenodd" clip-rule="evenodd" d="M42.3837 88.1626C43.7999 86.4749 44.0684 84.3686 42.9834 83.4582C41.8984 82.5478 39.8708 83.178 38.4546 84.8657C37.0384 86.5535 36.7699 88.6597 37.8549 89.5701C38.9399 90.4805 40.9675 89.8504 42.3837 88.1626Z" fill="#FDC166"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;" fill-rule="evenodd" clip-rule="evenodd" d="M41.7165 83.0415C42.2005 83.0358 42.6393 83.1696 42.9833 83.4582C44.0683 84.3686 43.7998 86.4749 42.3836 88.1626C40.9674 89.8504 38.9398 90.4805 37.8548 89.5701C37.6313 89.3825 37.4652 89.1442 37.3547 88.8692C38.3104 88.7952 39.4146 88.2608 40.3375 87.3379C41.7356 85.9398 42.2423 84.1255 41.6077 83.0441L41.7165 83.0415Z" fill="#FDA422"/>
+<path id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;_3" fill-rule="evenodd" clip-rule="evenodd" d="M53.2116 83.6035C54.6278 81.9157 54.8963 79.8095 53.8113 78.8991C52.7263 77.9887 50.6987 78.6188 49.2825 80.3066C47.8663 81.9943 47.5978 84.1006 48.6828 85.011C49.7678 85.9214 51.7954 85.2912 53.2116 83.6035Z" fill="#FDC166"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;_2" fill-rule="evenodd" clip-rule="evenodd" d="M52.5444 78.4823C53.0284 78.4766 53.4672 78.6104 53.8112 78.8991C54.8962 79.8095 54.6277 81.9157 53.2115 83.6035C51.7953 85.2912 49.7677 85.9214 48.6827 85.011C48.4591 84.8234 48.293 84.585 48.1826 84.31C49.1382 84.2361 50.2425 83.7016 51.1654 82.7788C52.5635 81.3807 53.0701 79.5663 52.4356 78.485L52.5444 78.4823Z" fill="#FDA422"/>
+<path id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;_4" fill-rule="evenodd" clip-rule="evenodd" d="M64.6095 78.4744C66.0257 76.7867 66.2942 74.6805 65.2092 73.7701C64.1243 72.8596 62.0967 73.4898 60.6805 75.1776C59.2643 76.8653 58.9958 78.9715 60.0808 79.8819C61.1657 80.7923 63.1933 80.1622 64.6095 78.4744Z" fill="#FDC166"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;_3" fill-rule="evenodd" clip-rule="evenodd" d="M63.9423 73.3533C64.4263 73.3476 64.8651 73.4814 65.2091 73.7701C66.2941 74.6805 66.0256 76.7867 64.6094 78.4744C63.1932 80.1622 61.1656 80.7923 60.0806 79.8819C59.8571 79.6944 59.691 79.456 59.5806 79.181C60.5362 79.1071 61.6405 78.5726 62.5633 77.6497C63.9614 76.2517 64.4681 74.4373 63.8335 73.3559L63.9423 73.3533Z" fill="#FDA422"/>
+</g>
+<g id="&#232;&#175;&#132;&#232;&#174;&#186;_2">
+<path id="&#232;&#183;&#175;&#229;&#190;&#132; 111_3" fill-rule="evenodd" clip-rule="evenodd" d="M122.346 34.8353C124.243 34.0099 126.431 34.2198 128.136 35.3905L142.171 45.0262L70.0009 78.5626V123.617L57.2351 116.245C54.8238 114.852 53.31 112.306 53.2384 109.523L52.4501 78.8762C52.2406 70.7316 56.9926 63.2739 64.4633 60.0231L122.346 34.8353Z" fill="url(#paint6_linear_366_3616)"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132; 111_4" fill-rule="evenodd" clip-rule="evenodd" d="M135.978 44.2124C139.944 42.4673 144.395 45.3717 144.395 49.7041V83.6036C144.395 89.825 140.886 95.5143 135.326 98.3062V106.264C135.326 106.862 134.805 107.326 134.211 107.257L118.535 105.441L77.3621 124.032C72.1404 126.39 66.2056 122.656 66.072 116.928L65.4156 88.7825C65.2267 80.6848 69.9407 73.2728 77.3545 70.0103L135.978 44.2124Z" fill="#FEECD1"/>
+<path id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;_5" fill-rule="evenodd" clip-rule="evenodd" d="M89.6257 95.2089C92.1107 92.2474 92.5819 88.5516 90.678 86.9541C88.7742 85.3566 85.2163 86.4623 82.7313 89.4239C80.2463 92.3854 79.7752 96.0812 81.679 97.6787C83.5829 99.2762 87.1407 98.1705 89.6257 95.2089Z" fill="#FDC166"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;_4" fill-rule="evenodd" clip-rule="evenodd" d="M88.4551 86.2228C89.3044 86.2128 90.0744 86.4476 90.678 86.9541C92.5819 88.5516 92.1107 92.2474 89.6257 95.2089C87.1407 98.1705 83.5828 99.2762 81.679 97.6787C81.2867 97.3496 80.9953 96.9313 80.8015 96.4488C82.4784 96.319 84.4161 95.3812 86.0354 93.7618C88.4886 91.3086 89.3777 88.1249 88.2643 86.2274L88.4551 86.2228Z" fill="#FDA422"/>
+<path id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;_6" fill-rule="evenodd" clip-rule="evenodd" d="M108.626 87.2089C111.111 84.2474 111.582 80.5516 109.678 78.9541C107.774 77.3566 104.216 78.4623 101.731 81.4239C99.2463 84.3854 98.7752 88.0812 100.679 89.6787C102.583 91.2762 106.141 90.1705 108.626 87.2089Z" fill="#FDC166"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;_5" fill-rule="evenodd" clip-rule="evenodd" d="M107.455 78.2228C108.304 78.2128 109.074 78.4476 109.678 78.9541C111.582 80.5516 111.111 84.2474 108.626 87.2089C106.141 90.1705 102.583 91.2762 100.679 89.6787C100.287 89.3496 99.9953 88.9313 99.8015 88.4488C101.478 88.319 103.416 87.3812 105.035 85.7618C107.489 83.3086 108.378 80.1249 107.264 78.2274L107.455 78.2228Z" fill="#FDA422"/>
+<path id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;_7" fill-rule="evenodd" clip-rule="evenodd" d="M128.626 78.2089C131.111 75.2474 131.582 71.5516 129.678 69.9541C127.774 68.3566 124.216 69.4623 121.731 72.4239C119.246 75.3854 118.775 79.0812 120.679 80.6787C122.583 82.2762 126.141 81.1705 128.626 78.2089Z" fill="#FDC166"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;_6" fill-rule="evenodd" clip-rule="evenodd" d="M127.455 69.2228C128.304 69.2128 129.074 69.4476 129.678 69.9541C131.582 71.5516 131.111 75.2474 128.626 78.2089C126.141 81.1705 122.583 82.2762 120.679 80.6787C120.287 80.3496 119.995 79.9313 119.802 79.4488C121.478 79.319 123.416 78.3812 125.035 76.7618C127.489 74.3086 128.378 71.1249 127.264 69.2274L127.455 69.2228Z" fill="#FDA422"/>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_366_3616" x="49" y="128" width="22" height="22" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="4"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_366_3616"/>
+</filter>
+<filter id="filter1_i_366_3616" x="52" y="28" width="13" height="13" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_366_3616"/>
+</filter>
+<filter id="filter2_i_366_3616" x="74" y="35" width="7" height="7" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_366_3616"/>
+</filter>
+<linearGradient id="paint0_linear_366_3616" x1="-8.2605" y1="50.8347" x2="38.4885" y2="166.542" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEA82E"/>
+<stop offset="1" stop-color="#FEB243"/>
+</linearGradient>
+<radialGradient id="paint1_radial_366_3616" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(54.2893 139) rotate(-90) scale(14.5573)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#FEC575"/>
+</radialGradient>
+<radialGradient id="paint2_radial_366_3616" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(55.1255 34.5) rotate(-90) scale(8.60203)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#FEC575"/>
+</radialGradient>
+<radialGradient id="paint3_radial_366_3616" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(75.683 38.5) rotate(-90) scale(4.63186)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#FEC575"/>
+</radialGradient>
+<linearGradient id="paint4_linear_366_3616" x1="70.0028" y1="111.325" x2="54.1673" y2="62.3723" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FA8817"/>
+<stop offset="1" stop-color="#FEAE39"/>
+</linearGradient>
+<linearGradient id="paint5_linear_366_3616" x1="42.7245" y1="49.3774" x2="14.3769" y2="67.5451" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FDCB83"/>
+<stop offset="0.749149" stop-color="#FEAF4C"/>
+<stop offset="1" stop-color="#FD9217"/>
+</linearGradient>
+<linearGradient id="paint6_linear_366_3616" x1="90.1443" y1="28.62" x2="43.3365" y2="60.6591" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FDCB83"/>
+<stop offset="0.749149" stop-color="#FEAF4C"/>
+<stop offset="1" stop-color="#FD9217"/>
+</linearGradient>
+</defs>
+</svg>

src/assets/img/chat/polygon.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="8" viewBox="0 0 24 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 0L24 8H0L12 0Z" fill="#F7F8FA"/>
+</svg>

src/assets/img/chat/remind.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Remind (&#230;&#143;&#144;&#233;&#134;&#146;)">
+<path id="Vector" d="M5.5 9C5.5 5.41014 8.41014 2.5 12 2.5C15.5899 2.5 18.5 5.41014 18.5 9V18.5H5.5V9Z" stroke="white"/>
+<path id="Vector_2" d="M5 19V9C5 5.134 8.134 2 12 2C15.866 2 19 5.134 19 9V19M2 19H22" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M12 22C13.3807 22 14.5 20.8807 14.5 19.5V19H9.5V19.5C9.5 20.8807 10.6193 22 12 22Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/img/chat/scan.svg

@@ -0,0 +1,9 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="scan">
+<g id="union">
+<path d="M13.5 3.9375H4.5V7.3125H3.375V3.9375C3.375 3.31615 3.87872 2.8125 4.5 2.8125H13.5C14.1213 2.8125 14.625 3.31615 14.625 3.9375V7.3125H13.5V3.9375Z" fill="white"/>
+<path d="M3.375 10.6875H4.5V14.0625H13.5V10.6875H14.625V14.0625C14.625 14.6838 14.1213 15.1875 13.5 15.1875H4.5C3.87872 15.1875 3.375 14.6838 3.375 14.0625V10.6875Z" fill="white"/>
+<path d="M15.75 8.4375V9.5625H2.25V8.4375H15.75Z" fill="white"/>
+</g>
+</g>
+</svg>

src/assets/img/chat/search.svg

@@ -0,0 +1,149 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#230;&#154;&#130;&#230;&#151;&#160;&#230;&#148;&#175;&#228;&#187;&#152;&#232;&#174;&#176;&#229;&#189;&#149;">
+<g id="img">
+<path id="&#232;&#183;&#175;&#229;&#190;&#132; 78" fill-rule="evenodd" clip-rule="evenodd" d="M118.351 66.3036C106.1 45.404 113.603 32.9447 109.106 25.3218C104.608 17.699 59.0238 14.5916 24.5136 51.7276C-8.63666 87.4002 21.1998 129.401 57.0475 141.295C89.8562 152.18 143.031 141.434 147.067 102.46C148.646 87.2033 130.601 87.2033 118.351 66.3036Z" fill="url(#paint0_linear_2611_11727)"/>
+<g id="&#230;&#184;&#144;&#229;&#143;&#152;&#229;&#157;&#151;">
+<mask id="mask0_2611_11727" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="10" y="20" width="138" height="126">
+<path id="&#232;&#146;&#153;&#231;&#137;&#136;" fill-rule="evenodd" clip-rule="evenodd" d="M118.351 66.3036C106.1 45.404 113.603 32.9447 109.106 25.3218C104.608 17.699 59.0238 14.5916 24.5136 51.7276C-8.63666 87.4002 21.1998 129.401 57.0475 141.295C89.8562 152.18 143.031 141.434 147.067 102.46C148.646 87.2033 130.601 87.2033 118.351 66.3036Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_2611_11727)">
+<path id="&#232;&#183;&#175;&#229;&#190;&#132; 86" fill-rule="evenodd" clip-rule="evenodd" d="M40.4753 35.3262C40.4753 35.3262 61.8925 90.562 51.1839 147.781C40.4753 205 -30.1666 70.884 29.8378 40.0093C30.3504 40.0093 40.4753 35.3262 40.4753 35.3262Z" fill="url(#paint1_linear_2611_11727)"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132; 85" fill-rule="evenodd" clip-rule="evenodd" d="M18.2404 58.8809C18.2404 58.8809 38.5956 66.8519 51.1839 140.091C45.1415 152.027 -7.99268 104.258 13.6429 65.1106L18.2404 58.8809Z" fill="#FDA423"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132; 87" fill-rule="evenodd" clip-rule="evenodd" d="M131.147 78.4185C131.147 78.4185 118.927 95.7468 123 144C123 144 176.403 106.784 135.084 81.4221L131.147 78.4185Z" fill="#FDA423"/>
+<circle id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;" cx="137.5" cy="109.5" r="3.5" fill="#FDB247"/>
+<g id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;&#229;&#164;&#135;&#228;&#187;&#189;" filter="url(#filter0_i_2611_11727)">
+<circle cx="92.0001" cy="36" r="5" fill="url(#paint2_linear_2611_11727)"/>
+</g>
+<g id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;&#229;&#164;&#135;&#228;&#187;&#189; 2" filter="url(#filter1_i_2611_11727)">
+<circle cx="41.0001" cy="54" r="6" fill="url(#paint3_linear_2611_11727)"/>
+</g>
+</g>
+</g>
+<g id="&#230;&#156;&#172;&#229;&#173;&#144;">
+<path id="&#232;&#183;&#175;&#229;&#190;&#132; 90" fill-rule="evenodd" clip-rule="evenodd" d="M115.814 86.166C115.814 86.166 125.83 92.621 116.895 102.272C107.961 111.924 99.2351 127.314 96.1153 132.783C92.9956 138.251 87.9847 130.439 87.9847 130.439L107.788 88.135L115.814 86.166Z" fill="url(#paint4_linear_2611_11727)"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132; 89" fill-rule="evenodd" clip-rule="evenodd" d="M100.005 81.8022C100.005 81.8022 113.399 84.9054 115.814 86.1661C115.814 86.1661 107.458 88.4815 104.185 102.316C100.912 116.15 94.8815 134.167 86.1066 132.698C77.3317 131.23 74.5784 117.901 86.7914 98.8257C93.3554 88.5736 100.005 81.8022 100.005 81.8022Z" fill="url(#paint5_linear_2611_11727)"/>
+<g id="&#232;&#183;&#175;&#229;&#190;&#132; 88" filter="url(#filter2_i_2611_11727)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70.593 48C70.593 48 104.137 64.4542 113.809 61.9568C117.53 60.9959 108.269 72.1828 93.129 89.9597C77.9894 107.737 75.2264 128.688 84.4509 132.225C84.4509 132.225 64.5847 126.719 56.619 124.725C48.6534 122.732 34.6349 120.598 37.2492 106C39.8636 91.4021 50.5713 71.8698 58.1913 64.0172C65.8113 56.1645 69.5427 52.3189 70.593 48Z" fill="url(#paint6_linear_2611_11727)"/>
+</g>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;" d="M68.021 60.4937L100.048 71.2217L99.413 73.1181L67.3858 62.3901L68.021 60.4937Z" fill="url(#paint7_linear_2611_11727)"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;_2" d="M61.6232 75.2881L89.2983 85.0163L88.635 86.9031L60.96 77.1749L61.6232 75.2881Z" fill="url(#paint8_linear_2611_11727)"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;_3" d="M58.0854 85.0093L83.4573 93.2897L82.8368 95.191L57.4649 86.9106L58.0854 85.0093Z" fill="url(#paint9_linear_2611_11727)"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;_4" d="M53.3838 95.228L78.1333 102.53L77.5673 104.448L52.8178 97.1463L53.3838 95.228Z" fill="url(#paint10_linear_2611_11727)"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;_5" d="M48.5482 107.489L75.4149 115.503L74.8433 117.419L47.9766 109.406L48.5482 107.489Z" fill="url(#paint11_linear_2611_11727)"/>
+</g>
+<g id="&#230;&#148;&#190;&#229;&#164;&#167;&#233;&#149;&#156;">
+<ellipse id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;_2" opacity="0.202962" cx="68.1958" cy="96.0901" rx="18" ry="22.5" transform="rotate(53 68.1958 96.0901)" fill="url(#paint12_linear_2611_11727)"/>
+<ellipse id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;_3" cx="56.7999" cy="87.8956" rx="18" ry="25.5" transform="rotate(53 56.7999 87.8956)" fill="#FDA521"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;_6" d="M42.3879 102.202C43.0984 101.018 44.6341 100.635 45.8179 101.345C46.9525 102.026 47.3521 103.465 46.7581 104.625L46.6749 104.775L41.8204 112.864C41.1098 114.047 39.5741 114.431 38.3903 113.721C37.2558 113.04 36.8561 111.601 37.4501 110.44L37.5333 110.29L42.3879 102.202Z" fill="url(#paint13_linear_2611_11727)"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;_7" d="M34.4241 110.743C35.8588 108.383 38.9346 107.634 41.294 109.068C43.5879 110.463 44.3603 113.409 43.083 115.74L42.9684 115.938L32.3701 133.368C30.9354 135.727 27.8597 136.477 25.5002 135.042C23.2063 133.648 22.4339 130.701 23.7112 128.371L23.8258 128.172L34.4241 110.743Z" fill="url(#paint14_linear_2611_11727)"/>
+<ellipse id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;_4" cx="53.7999" cy="84.8956" rx="18" ry="25.5" transform="rotate(53 53.7999 84.8956)" fill="url(#paint15_linear_2611_11727)"/>
+<ellipse id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;_5" cx="53.3931" cy="84.62" rx="13.5" ry="21.5" transform="rotate(53 53.3931 84.62)" fill="url(#paint16_linear_2611_11727)"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;_8" fill-rule="evenodd" clip-rule="evenodd" d="M45.2686 73.8384C54.7517 66.6924 66.0767 65.7265 70.5638 71.681C71.3525 72.7277 71.8775 73.9186 72.1555 75.2094C67.0048 70.957 56.8777 72.351 48.2686 78.8384C40.4534 84.7276 36.3281 92.9763 37.6303 99.0285C37.1075 98.5977 36.636 98.1078 36.2225 97.559C31.7354 91.6045 35.7855 80.9844 45.2686 73.8384Z" fill="#FECD86"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;_9" fill-rule="evenodd" clip-rule="evenodd" d="M70.5638 71.681L70.6826 71.8455C65.4032 68.0445 55.6214 69.5442 47.2686 75.8384C38.3345 82.5708 34.2225 92.3866 37.5285 98.4796C37.5574 98.6651 37.5914 98.8478 37.6303 99.0285C37.1075 98.5977 36.636 98.1078 36.2225 97.559C31.7354 91.6045 35.7855 80.9844 45.2686 73.8384C54.7517 66.6924 66.0767 65.7265 70.5638 71.681Z" fill="#FDA423"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_2611_11727" x="87.0001" y="31" width="10" height="10" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_2611_11727"/>
+</filter>
+<filter id="filter1_i_2611_11727" x="35.0001" y="48" width="12" height="12" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_2611_11727"/>
+</filter>
+<filter id="filter2_i_2611_11727" x="35.929" y="48" width="78.7021" height="84.2246" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-1"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_2611_11727"/>
+</filter>
+<linearGradient id="paint0_linear_2611_11727" x1="10.1426" y1="20.5088" x2="10.1426" y2="145.304" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEA82E"/>
+<stop offset="1" stop-color="#FEB243"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2611_11727" x1="10.1053" y1="66.9505" x2="75.0676" y2="108.538" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEB244"/>
+<stop offset="1" stop-color="#FEBB5A"/>
+</linearGradient>
+<linearGradient id="paint2_linear_2611_11727" x1="97.0001" y1="31" x2="87.0001" y2="31" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FDC065"/>
+<stop stop-color="#FFBC59"/>
+<stop offset="1" stop-color="#FFCD80"/>
+</linearGradient>
+<linearGradient id="paint3_linear_2611_11727" x1="47.0001" y1="48" x2="35.0001" y2="48" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FDC065"/>
+<stop stop-color="#FFBC59"/>
+<stop offset="1" stop-color="#FFCD80"/>
+</linearGradient>
+<linearGradient id="paint4_linear_2611_11727" x1="102.047" y1="74.3547" x2="68.5465" y2="106.71" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAA323"/>
+<stop offset="1" stop-color="#FEB140"/>
+</linearGradient>
+<linearGradient id="paint5_linear_2611_11727" x1="87.2061" y1="69.7539" x2="56.7756" y2="103.548" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAD59D"/>
+<stop offset="0.134591" stop-color="#FDCE88"/>
+<stop offset="1" stop-color="#FAC984"/>
+</linearGradient>
+<linearGradient id="paint6_linear_2611_11727" x1="62.0811" y1="54.1805" x2="31.9871" y2="109.344" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#FEE4C0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_2611_11727" x1="108.214" y1="60.4937" x2="92.9422" y2="40.7379" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCDAB5"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint8_linear_2611_11727" x1="96.3828" y1="75.2881" x2="82.1463" y2="57.9209" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCDAB5"/>
+<stop offset="1" stop-color="#FFF4E6"/>
+</linearGradient>
+<linearGradient id="paint9_linear_2611_11727" x1="89.9554" y1="85.0093" x2="77.5982" y2="69.2361" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCDAB5"/>
+<stop offset="1" stop-color="#FFF4E6"/>
+</linearGradient>
+<linearGradient id="paint10_linear_2611_11727" x1="84.4622" y1="95.228" x2="73.4921" y2="80.1682" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCDAB5"/>
+<stop offset="1" stop-color="#FFF4E6"/>
+</linearGradient>
+<linearGradient id="paint11_linear_2611_11727" x1="82.2745" y1="107.489" x2="70.4835" y2="91.1988" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCDAB5"/>
+<stop offset="1" stop-color="#FEE6C5"/>
+</linearGradient>
+<linearGradient id="paint12_linear_2611_11727" x1="84.4147" y1="73.6633" x2="55.4988" y2="76.5286" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FDA521" stop-opacity="0.01"/>
+<stop offset="1" stop-color="#FDA521"/>
+</linearGradient>
+<linearGradient id="paint13_linear_2611_11727" x1="40.3873" y1="109.74" x2="43.4897" y2="110.847" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FDE5C0"/>
+<stop offset="1" stop-color="#FDA521"/>
+</linearGradient>
+<linearGradient id="paint14_linear_2611_11727" x1="29.6021" y1="126.029" x2="35.0038" y2="127.949" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FDE5C0"/>
+<stop offset="1" stop-color="#F7990C"/>
+</linearGradient>
+<linearGradient id="paint15_linear_2611_11727" x1="35.7999" y1="59.3956" x2="35.7999" y2="110.396" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FDF1DB"/>
+<stop offset="1" stop-color="#FDE4BD"/>
+</linearGradient>
+<linearGradient id="paint16_linear_2611_11727" x1="39.8931" y1="63.12" x2="39.8931" y2="106.12" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEEED4"/>
+<stop offset="1" stop-color="#FFCE87"/>
+</linearGradient>
+</defs>
+</svg>

src/assets/img/chat/send-orange.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Send (&#229;&#143;&#145;&#233;&#128;&#129;)">
+<path id="Vector" d="M21.5 2.5L14.85 21.5L11.05 12.95L2.5 9.15L21.5 2.5Z" stroke="#FF9300" stroke-width="1.5" stroke-linejoin="round"/>
+<path id="Vector_2" d="M21.5 2.5L11.05 12.95" stroke="#FF9300" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/img/chat/send.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Send (&#229;&#143;&#145;&#233;&#128;&#129;)">
+<path id="Vector" d="M21.5 2.5L14.85 21.5L11.05 12.95L2.5 9.15L21.5 2.5Z" stroke="#666666" stroke-width="1.5" stroke-linejoin="round"/>
+<path id="Vector_2" d="M21.5 2.5L11.05 12.95" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/img/chat/system-svg.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="System (&#231;&#179;&#187;&#231;&#187;&#159;)">
+<path id="Vector" d="M9 3H4C3.44772 3 3 3.44772 3 4V9C3 9.5523 3.44772 10 4 10H9C9.5523 10 10 9.5523 10 9V4C10 3.44772 9.5523 3 9 3Z" fill="#999999" stroke="#999999" stroke-width="0.666667" stroke-linejoin="round"/>
+<path id="Vector_2" d="M9 14H4C3.44772 14 3 14.4477 3 15V20C3 20.5523 3.44772 21 4 21H9C9.5523 21 10 20.5523 10 20V15C10 14.4477 9.5523 14 9 14Z" fill="#999999" stroke="#999999" stroke-width="0.666667" stroke-linejoin="round"/>
+<path id="Vector_3" d="M17.5 10C19.433 10 21 8.433 21 6.5C21 4.56701 19.433 3 17.5 3C15.567 3 14 4.56701 14 6.5C14 8.433 15.567 10 17.5 10Z" fill="#999999" stroke="#999999" stroke-width="0.666667" stroke-linejoin="round"/>
+<path id="Vector_4" d="M20 14H15C14.4477 14 14 14.4477 14 15V20C14 20.5523 14.4477 21 15 21H20C20.5523 21 21 20.5523 21 20V15C21 14.4477 20.5523 14 20 14Z" fill="#999999" stroke="#999999" stroke-width="0.666667" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/img/chat/tiji-orange.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="tiji.svg">
+<path id="Vector" d="M15.096 17.2522H16.2012C18.9648 16.3618 20.562 14.2558 20.9916 10.933C21.0528 9.15345 20.7756 7.81905 20.1624 6.92865C18.5664 4.37745 15.9864 3.07305 12.4248 3.01305C11.1348 2.95425 9.59161 3.06345 8.00281 3.81465C4.75681 5.34825 3.27481 8.11545 3.02881 11.2006C2.89784 12.8755 3.18225 14.5568 3.85681 16.0954C5.39281 19.1794 7.84921 20.8114 11.2272 20.9902C14.2356 21.1078 16.908 20.1886 19.2408 18.2302L18.228 17.1622C15.4644 19.3582 12.456 19.9822 9.20041 19.0318C6.37561 17.845 4.83961 15.5902 4.59481 12.2686C4.64178 10.8373 5.01965 9.43628 5.69881 8.17545C7.05121 5.80185 9.22561 4.31625 12.24 4.34745C16.6764 4.39545 19.0872 6.48345 19.518 9.68745C19.578 12.6538 18.474 14.6422 16.2012 15.6502H15.6492C15.2184 15.3538 15.0648 14.9386 15.1884 14.4046L17.4912 7.01865H15.648L15.372 7.99665L14.8188 7.28505C13.2828 6.27705 11.6868 6.24705 10.0284 7.19625C8.55481 8.26425 7.60201 9.61305 7.17241 11.245C6.74281 12.877 6.77281 14.2114 7.26481 15.2494C7.75681 16.2874 8.61601 16.8958 9.84481 17.0734C11.256 17.1934 12.5148 16.6894 13.6212 15.5614V15.6502C13.6212 16.4218 14.1132 16.9558 15.0948 17.2522H15.096ZM10.95 15.4726L9.75241 15.3826C8.83201 15.0862 8.43241 14.3146 8.55601 13.069C9.04681 10.1026 10.368 8.41305 12.516 7.99665C13.806 8.05665 14.544 8.53065 14.7276 9.42105C14.5428 12.505 13.284 14.5234 10.95 15.4726Z" fill="#FF9300"/>
+</g>
+</svg>

src/assets/img/chat/tiji.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="tiji.svg">
+<path id="Vector" d="M15.096 17.2522H16.2012C18.9648 16.3618 20.562 14.2558 20.9916 10.933C21.0528 9.15345 20.7756 7.81905 20.1624 6.92865C18.5664 4.37745 15.9864 3.07305 12.4248 3.01305C11.1348 2.95425 9.59161 3.06345 8.00281 3.81465C4.75681 5.34825 3.27481 8.11545 3.02881 11.2006C2.89784 12.8755 3.18225 14.5568 3.85681 16.0954C5.39281 19.1794 7.84921 20.8114 11.2272 20.9902C14.2356 21.1078 16.908 20.1886 19.2408 18.2302L18.228 17.1622C15.4644 19.3582 12.456 19.9822 9.20041 19.0318C6.37561 17.845 4.83961 15.5902 4.59481 12.2686C4.64178 10.8373 5.01965 9.43628 5.69881 8.17545C7.05121 5.80185 9.22561 4.31625 12.24 4.34745C16.6764 4.39545 19.0872 6.48345 19.518 9.68745C19.578 12.6538 18.474 14.6422 16.2012 15.6502H15.6492C15.2184 15.3538 15.0648 14.9386 15.1884 14.4046L17.4912 7.01865H15.648L15.372 7.99665L14.8188 7.28505C13.2828 6.27705 11.6868 6.24705 10.0284 7.19625C8.55481 8.26425 7.60201 9.61305 7.17241 11.245C6.74281 12.877 6.77281 14.2114 7.26481 15.2494C7.75681 16.2874 8.61601 16.8958 9.84481 17.0734C11.256 17.1934 12.5148 16.6894 13.6212 15.5614V15.6502C13.6212 16.4218 14.1132 16.9558 15.0948 17.2522H15.096ZM10.95 15.4726L9.75241 15.3826C8.83201 15.0862 8.43241 14.3146 8.55601 13.069C9.04681 10.1026 10.368 8.41305 12.516 7.99665C13.806 8.05665 14.544 8.53065 14.7276 9.42105C14.5428 12.505 13.284 14.5234 10.95 15.4726Z" fill="#666666"/>
+</g>
+</svg>

src/assets/img/chat/user-add.svg

@@ -0,0 +1,9 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="user-add">
+<g id="union">
+<path d="M4.70455 6.06522C4.70455 3.95813 6.35295 2.25 8.38636 2.25C10.4198 2.25 12.0682 3.95813 12.0682 6.06522C12.0682 8.1723 10.4198 9.88043 8.38636 9.88043C6.35295 9.88043 4.70455 8.1723 4.70455 6.06522ZM10.8409 6.06522C10.8409 4.66049 9.74197 3.52174 8.38636 3.52174C7.03076 3.52174 5.93182 4.66049 5.93182 6.06522C5.93182 7.46994 7.03076 8.6087 8.38636 8.6087C9.74197 8.6087 10.8409 7.46994 10.8409 6.06522Z" fill="white"/>
+<path d="M8.38636 10.5163C9.23392 10.5163 10.0564 10.6276 10.8409 10.8368V12.1567C10.0632 11.9168 9.23928 11.788 8.38636 11.788C6.5611 11.788 4.8688 12.3779 3.47727 13.3837L3.47727 15.6033H10.8409V16.875H3.47727C2.79947 16.875 2.25 16.3056 2.25 15.6033V13.284C2.25 12.807 2.50755 12.3701 2.91708 12.1524L3.62682 11.788H3.62945C5.03866 10.9777 6.66051 10.5163 8.38636 10.5163Z" fill="white"/>
+<path d="M13.2955 10.5163V13.0598H15.75V14.3315H13.2955V16.875H12.0682V14.3315H9.61364V13.0598H12.0682V10.5163H13.2955Z" fill="white"/>
+</g>
+</g>
+</svg>

src/assets/img/chat/user-grey.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="user">
+<g id="union">
+<path d="M17.25 7.5C17.25 10.3995 14.8995 12.75 12 12.75C9.1005 12.75 6.75 10.3995 6.75 7.5C6.75 4.6005 9.1005 2.25 12 2.25C14.8995 2.25 17.25 4.6005 17.25 7.5ZM15.75 7.5C15.75 5.42893 14.0711 3.75 12 3.75C9.92893 3.75 8.25 5.42893 8.25 7.5C8.25 9.57107 9.92893 11.25 12 11.25C14.0711 11.25 15.75 9.57107 15.75 7.5Z" fill="#999999"/>
+<path d="M20.9447 16.2792C21.4455 16.5183 21.75 17.032 21.75 17.5869V21C21.75 21.4142 21.4142 21.75 21 21.75H3C2.58579 21.75 2.25 21.4142 2.25 21V17.5869C2.25 17.032 2.55452 16.5183 3.0553 16.2792C5.7741 14.9806 8.79976 14.25 12 14.25C15.2002 14.25 18.2259 14.9806 20.9447 16.2792ZM12 15.75C9.05011 15.75 6.26152 16.4186 3.75 17.6097V20.25H20.25V17.6097C17.7385 16.4186 14.9499 15.75 12 15.75Z" fill="#999999"/>
+</g>
+</g>
+</svg>

src/assets/img/chat/user.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="user">
+<g id="union">
+<path d="M17.25 7.5C17.25 10.3995 14.8995 12.75 12 12.75C9.1005 12.75 6.75 10.3995 6.75 7.5C6.75 4.6005 9.1005 2.25 12 2.25C14.8995 2.25 17.25 4.6005 17.25 7.5ZM15.75 7.5C15.75 5.42893 14.0711 3.75 12 3.75C9.92893 3.75 8.25 5.42893 8.25 7.5C8.25 9.57107 9.92893 11.25 12 11.25C14.0711 11.25 15.75 9.57107 15.75 7.5Z" fill="white"/>
+<path d="M20.9447 16.2792C21.4455 16.5183 21.75 17.032 21.75 17.5869V21C21.75 21.4142 21.4142 21.75 21 21.75H3C2.58579 21.75 2.25 21.4142 2.25 21V17.5869C2.25 17.032 2.55452 16.5183 3.0553 16.2792C5.7741 14.9806 8.79976 14.25 12 14.25C15.2002 14.25 18.2259 14.9806 20.9447 16.2792ZM12 15.75C9.05011 15.75 6.26152 16.4186 3.75 17.6097V20.25H20.25V17.6097C17.7385 16.4186 14.9499 15.75 12 15.75Z" fill="white"/>
+</g>
+</g>
+</svg>

src/assets/img/chat/weixin-shake.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Weixin-shake (&#229;&#190;&#174;&#228;&#191;&#161;&#230;&#145;&#135;&#228;&#184;&#128;&#230;&#145;&#135;)">
+<path id="Vector" d="M21 9.5L14.5 3L3 14.5L9.5 21L21 9.5Z" fill="white" stroke="white" stroke-width="0.666667" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M8 14.5L9.5 16" stroke="white" stroke-width="0.666667" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M15 21L21 15" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M3 9L9 3" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/img/note-create/check.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="check">
+<path id="union" d="M6.43348 9.92188L12.6561 3.69922L13.5754 4.61846L6.43348 11.7604L1.97412 7.301L2.89336 6.38176L6.43348 9.92188Z" fill="#FF9300"/>
+</g>
+</svg>

src/assets/img/note-create/expand-text-input.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Expand-text-input (&#229;&#177;&#149;&#229;&#188;&#128;&#230;&#150;&#135;&#230;&#156;&#172;&#229;&#159;&#159;)">
+<path id="Vector" d="M3.99967 9.33358L3.99967 4.00024L9.33301 4.00024" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M12 6.66675L12 12.0001L6.66667 12.0001" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/img/note-create/location.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="location">
+<g id="union">
+<path d="M10.5001 6.00042C10.5001 7.38113 9.3808 8.50042 8.00009 8.50042C6.61938 8.50042 5.50009 7.38113 5.50009 6.00042C5.50009 4.6197 6.61938 3.50042 8.00009 3.50042C9.3808 3.50042 10.5001 4.6197 10.5001 6.00042ZM9.50009 6.00042C9.50009 5.17199 8.82852 4.50042 8.00009 4.50042C7.17166 4.50042 6.50009 5.17199 6.50009 6.00042C6.50009 6.82884 7.17166 7.50042 8.00009 7.50042C8.82852 7.50042 9.50009 6.82884 9.50009 6.00042Z" fill="#333333"/>
+<path d="M8.36196 14.4688C8.18821 14.7241 7.81196 14.7241 7.63822 14.4688L3.85557 8.91217C2.50041 6.92146 2.75204 4.24847 4.45488 2.54562C6.41284 0.587658 9.58733 0.587657 11.5453 2.54562C13.2481 4.24847 13.4998 6.92146 12.1446 8.91217L8.36196 14.4688ZM11.318 8.34944C12.4028 6.75579 12.2014 4.61593 10.8382 3.25273C9.27075 1.68529 6.72943 1.68529 5.16199 3.25273C3.79878 4.61593 3.59735 6.75579 4.68221 8.34944L8.00009 13.2234L11.318 8.34944Z" fill="#333333"/>
+</g>
+</g>
+</svg>

src/assets/img/note-create/orange-expand-text-input.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Expand-text-input (&#229;&#177;&#149;&#229;&#188;&#128;&#230;&#150;&#135;&#230;&#156;&#172;&#229;&#159;&#159;)">
+<path id="Vector" d="M7.33333 1.41729L7.33333 7.19507L2 7.19507" stroke="#FF9300" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M8.66699 15.5L8.66699 9.72222L14.0003 9.72222" stroke="#FF9300" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/img/profile-others/Female.svg

@@ -0,0 +1,9 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Female (&#229;&#165;&#179;&#230;&#128;&#167;)">
+<g id="Female (&#229;&#165;&#179;&#230;&#128;&#167;)_2">
+<path id="Vector" d="M11.1933 2.87323C9.59872 1.27859 7.01326 1.27859 5.41864 2.87323C4.62131 3.67055 4.22266 4.71556 4.22266 5.76057C4.22266 6.80559 4.62131 7.8506 5.41864 8.64793C7.01326 10.2426 9.59872 10.2426 11.1933 8.64793C12.788 7.0533 12.788 4.46788 11.1933 2.87323Z" stroke="#FF0FE3" stroke-linejoin="round"/>
+<path id="Vector_2" d="M5.38515 8.6145L1.67285 12.3268" stroke="#FF0FE3" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M5.59122 12.1205L1.87891 8.4082" stroke="#FF0FE3" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+</svg>

src/assets/img/profile-others/Like.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Like (&#229;&#150;&#156;&#230;&#172;&#162;)">
+<path id="Vector" d="M4.99967 3.16675C2.97463 3.16675 1.33301 4.80838 1.33301 6.83341C1.33301 10.5001 5.66634 13.8334 7.99967 14.6088C10.333 13.8334 14.6663 10.5001 14.6663 6.83341C14.6663 4.80838 13.0247 3.16675 10.9997 3.16675C9.75957 3.16675 8.66324 3.78238 7.99967 4.72468C7.33611 3.78238 6.23977 3.16675 4.99967 3.16675Z" stroke="#999999" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/img/profile-others/Like2.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Like (&#229;&#150;&#156;&#230;&#172;&#162;)">
+<path id="Vector" d="M4.99967 2.6665C2.97463 2.6665 1.33301 4.30814 1.33301 6.33317C1.33301 9.99984 5.66634 13.3332 7.99967 14.1086C10.333 13.3332 14.6663 9.99984 14.6663 6.33317C14.6663 4.30814 13.0247 2.6665 10.9997 2.6665C9.75957 2.6665 8.66324 3.28214 7.99967 4.22444C7.33611 3.28214 6.23977 2.6665 4.99967 2.6665Z" fill="#FF476A"/>
+</g>
+</svg>