🎨 updated comment

components.d.ts

@@ -45,6 +45,7 @@ declare module 'vue' {
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     AUpload: typeof import('ant-design-vue/es')['Upload']
     AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
+    Badge: typeof import('./src/components/MyUI/Badge/Badge.vue')['default']
     BoxDog: typeof import('./src/components/BoxDog/BoxDog.vue')['default']
     Card3D: typeof import('./src/components/Card3D/Card3D.vue')['default']
     CloseCircleOutlined: typeof import('@ant-design/icons-vue')['CloseCircleOutlined']

public/level_icon/2/lv1.svg

@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 109.3 42.45">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#_未命名的渐变_3);
+      }
+
+      .cls-1, .cls-2, .cls-3, .cls-4 {
+        stroke-linejoin: round;
+      }
+
+      .cls-1, .cls-5, .cls-4 {
+        stroke: #fff;
+      }
+
+      .cls-6 {
+        font-size: 18px;
+      }
+
+      .cls-6, .cls-2, .cls-3, .cls-4 {
+        stroke-width: 2px;
+      }
+
+      .cls-7 {
+        filter: url(#drop-shadow-1);
+      }
+
+      .cls-2 {
+        fill: url(#_未命名的渐变_15);
+      }
+
+      .cls-2, .cls-3 {
+        stroke: #333;
+      }
+
+      .cls-3 {
+        fill: url(#_未命名的渐变_17);
+      }
+
+      .cls-8 {
+        font-size: 24px;
+      }
+
+      .cls-5 {
+        fill: #fff;
+        font-family: A023-SounsoUndividedad, 'A023-Sounso Undividedad';
+        stroke-miterlimit: 10;
+      }
+
+      .cls-4 {
+        fill: none;
+        stroke-linecap: round;
+      }
+    </style>
+    <linearGradient id="_未命名的渐变_15" data-name="未命名的渐变 15" x1="85.37" y1="-4.52" x2="26.64" y2="54.21" gradientUnits="userSpaceOnUse">
+      <stop offset=".04" stop-color="#ff931e"/>
+      <stop offset=".56" stop-color="#ff931e"/>
+    </linearGradient>
+    <filter id="drop-shadow-1" filterUnits="userSpaceOnUse">
+      <feOffset dx="5" dy="7"/>
+      <feGaussianBlur result="blur" stdDeviation="9"/>
+      <feFlood flood-color="#000" flood-opacity=".43"/>
+      <feComposite in2="blur" operator="in"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+    <linearGradient id="_未命名的渐变_17" data-name="未命名的渐变 17" x1="16.17" y1="41.45" x2="16.17" y2="1" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ff931e"/>
+      <stop offset=".76" stop-color="#ffb855"/>
+    </linearGradient>
+    <linearGradient id="_未命名的渐变_3" data-name="未命名的渐变 3" x1="8.3" y1="31.5" x2="8.3" y2="30.5" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="red"/>
+      <stop offset=".7" stop-color="#93278f"/>
+    </linearGradient>
+  </defs>
+  <rect class="cls-2" x="3.71" y="9.31" width="104.58" height="31.08" rx="15.54" ry="15.54"/>
+  <g class="cls-7">
+    <path class="cls-3" d="M16.17,41.45c8.33,0,15.17-6.6,15.17-15.07,0-2.08-.11-4.31-1.26-7.77-1.15-3.46-1.38-3.91-2.6-6.05-.52,4.37-3.31,6.19-4.01,6.73,0-.57-1.69-6.82-4.24-10.57-2.51-3.67-5.92-6.09-7.92-7.72,0,3.1-.87,7.72-2.12,10.07s-1.49,2.44-3.05,4.19c-1.56,1.75-2.28,2.29-3.58,4.41-1.31,2.12-1.54,4.95-1.54,7.03,0,8.47,6.84,14.75,15.17,14.75Z"/>
+  </g>
+  <path class="cls-4" d="M6.3,22c-.16,.78-.27,1.79-.15,2.96,.13,1.21,.46,2.2,.79,2.92"/>
+  <circle class="cls-1" cx="8.3" cy="31" r=".5"/>
+  <text class="cls-5" transform="translate(42.07 31.3)"><tspan class="cls-6" x="0" y="0">LV</tspan><tspan class="cls-8" x="27.88" y="0">1</tspan></text>
+</svg>

public/level_icon/2/lv10.svg

@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 112.3 38.94">
+  <defs>
+    <style>
+      .cls-1 {
+        font-size: 19px;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 2px;
+      }
+
+      .cls-3 {
+        opacity: .18;
+      }
+
+      .cls-3, .cls-4, .cls-5 {
+        fill: #fff;
+      }
+
+      .cls-6 {
+        fill: #fdad00;
+      }
+
+      .cls-7 {
+        fill: #fdd231;
+      }
+
+      .cls-8 {
+        fill: #fdb300;
+      }
+
+      .cls-9 {
+        filter: url(#drop-shadow-1);
+      }
+
+      .cls-2 {
+        fill: url(#_未命名的渐变_77);
+        stroke: #333;
+        stroke-linejoin: round;
+      }
+
+      .cls-4 {
+        font-family: A023-SounsoUndividedad, 'A023-Sounso Undividedad';
+        stroke: #fff;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-10 {
+        fill: #ea6c00;
+      }
+
+      .cls-5 {
+        opacity: .22;
+      }
+
+      .cls-11 {
+        fill: #feeeb7;
+      }
+
+      .cls-12 {
+        font-size: 25.34px;
+        letter-spacing: 0em;
+      }
+    </style>
+    <linearGradient id="_未命名的渐变_77" data-name="未命名的渐变 77" x1="24.93" y1="51.39" x2="87.37" y2="-11.05" gradientUnits="userSpaceOnUse">
+      <stop offset=".36" stop-color="#fdad00"/>
+      <stop offset=".63" stop-color="#f7931e"/>
+    </linearGradient>
+    <filter id="drop-shadow-1" filterUnits="userSpaceOnUse">
+      <feOffset dx="7" dy="7"/>
+      <feGaussianBlur result="blur" stdDeviation="5"/>
+      <feFlood flood-color="#000" flood-opacity=".4"/>
+      <feComposite in2="blur" operator="in"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <rect class="cls-2" x="1" y="3.78" width="110.3" height="32.77" rx="15.54" ry="15.54"/>
+  <text class="cls-4" transform="translate(43.59 28.04) scale(.87 1)"><tspan class="cls-1" x="0" y="0">LV</tspan><tspan class="cls-12" x="29.43" y="0">10</tspan></text>
+  <polygon class="cls-5" points="75.59 35.56 61.59 4.86 56.59 4.86 70.59 35.56 75.59 35.56"/>
+  <polygon class="cls-3" points="84.74 35.56 70.74 4.86 65.74 4.86 79.74 35.56 84.74 35.56"/>
+  <g class="cls-9">
+    <path class="cls-8" d="M8.42,1.15L19.29,0l10.87,1.15,8.42,11.3-19.29,22.47L0,12.45,8.42,1.15Z"/>
+    <path class="cls-10" d="M7.81,12.56l11.48,22.47L0,12.56H7.81Z"/>
+    <path class="cls-10" d="M30.77,12.56l-11.48,22.47L38.59,12.56h-7.81Z"/>
+    <path class="cls-6" d="M7.81,12.56H30.77l-11.48,22.47L7.81,12.56Z"/>
+    <path class="cls-7" d="M19.29,0L8.42,1.15l-.6,11.3L19.29,0Z"/>
+    <path class="cls-7" d="M19.29,0l10.87,1.15,.6,11.3L19.29,0Z"/>
+    <path class="cls-6" d="M38.59,12.56L30.17,1.25l.6,11.3h7.81Z"/>
+    <path class="cls-6" d="M0,12.56L8.42,1.25l-.6,11.3H0Z"/>
+    <path class="cls-11" d="M19.29,.1L7.81,12.56H30.77L19.29,.1Z"/>
+  </g>
+</svg>

public/level_icon/2/lv2.svg

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 111.09 37.03">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #7ed321;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-linecap: round;
+        stroke-width: 2.42px;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        stroke-linejoin: round;
+      }
+
+      .cls-1, .cls-3 {
+        stroke: #333;
+      }
+
+      .cls-4 {
+        font-size: 18px;
+      }
+
+      .cls-4, .cls-3 {
+        stroke-width: 2px;
+      }
+
+      .cls-2 {
+        fill: none;
+      }
+
+      .cls-2, .cls-5 {
+        stroke: #fff;
+      }
+
+      .cls-6 {
+        font-size: 24px;
+      }
+
+      .cls-5 {
+        fill: #fff;
+        font-family: A023-SounsoUndividedad, 'A023-Sounso Undividedad';
+        stroke-miterlimit: 10;
+      }
+
+      .cls-3 {
+        fill: url(#_未命名的渐变_18);
+      }
+    </style>
+    <linearGradient id="_未命名的渐变_18" data-name="未命名的渐变 18" x1="87.16" y1="-9.17" x2="28.43" y2="49.56" gradientUnits="userSpaceOnUse">
+      <stop offset=".04" stop-color="#7ac943"/>
+      <stop offset=".56" stop-color="#40931e"/>
+    </linearGradient>
+  </defs>
+  <rect class="cls-3" x="5.5" y="4.65" width="104.58" height="31.08" rx="15.54" ry="15.54"/>
+  <text class="cls-5" transform="translate(43.86 26.65)"><tspan class="cls-4" x="0" y="0">LV</tspan><tspan class="cls-6" x="27.88" y="0">2</tspan></text>
+  <g>
+    <path class="cls-1" d="M19.45,1.22c7.32,.43,7.53,7.92,6.65,11,8.86-2.82,12.26,1.17,12.85,3.52,1.06,5.63-4.28,7.33-7.09,7.48,5.67,7.04,2.95,10.56,.89,11.44-6.38,1.76-10.04-2.79-11.08-5.28-2.84,5.98-7.68,6.31-9.75,5.72-6.03-1.76-3.4-8.07-1.33-11C2.08,22.69,.84,18.52,1.29,16.62c1.42-7.04,8.86-5.87,12.41-4.4C12.27,3.06,16.94,1.07,19.45,1.22Z"/>
+    <path class="cls-2" d="M21.09,20.15l-3.79,4.73"/>
+    <path class="cls-2" d="M15.41,19.2l5.68,.95"/>
+    <path class="cls-2" d="M20.15,13.52l.95,6.63"/>
+    <path class="cls-2" d="M26.78,18.25l-5.68,1.89"/>
+    <path class="cls-2" d="M21.09,20.15l4.73,3.79"/>
+  </g>
+</svg>

public/level_icon/2/lv3.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 109.65 40.33">
+  <defs>
+    <style>
+      .cls-1, .cls-2 {
+        stroke-width: 2.58px;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        stroke-linejoin: round;
+      }
+
+      .cls-1, .cls-4 {
+        fill: #fff;
+        stroke: #fff;
+      }
+
+      .cls-5 {
+        font-size: 18px;
+      }
+
+      .cls-5, .cls-3 {
+        stroke-width: 2px;
+      }
+
+      .cls-2 {
+        fill: #f57887;
+        stroke: #000;
+      }
+
+      .cls-3 {
+        fill: url(#_未命名的渐变_22);
+        stroke: #333;
+      }
+
+      .cls-6 {
+        font-size: 24px;
+      }
+
+      .cls-4 {
+        font-family: A023-SounsoUndividedad, 'A023-Sounso Undividedad';
+        stroke-miterlimit: 10;
+      }
+    </style>
+    <linearGradient id="_未命名的渐变_22" data-name="未命名的渐变 22" x1="85.72" y1="-5.87" x2="26.99" y2="52.86" gradientUnits="userSpaceOnUse">
+      <stop offset=".15" stop-color="#f54e87"/>
+      <stop offset=".56" stop-color="#f57887"/>
+    </linearGradient>
+  </defs>
+  <rect class="cls-3" x="4.06" y="7.96" width="104.58" height="31.08" rx="15.54" ry="15.54"/>
+  <text class="cls-4" transform="translate(42.42 29.95)"><tspan class="cls-5" x="0" y="0">LV</tspan><tspan class="cls-6" x="27.88" y="0">3</tspan></text>
+  <g>
+    <path class="cls-2" d="M19.47,1.29l-5.45,5.45H6.75v7.27L1.29,19.47l5.45,5.45v7.27h7.27l5.45,5.45,5.45-5.45h7.27v-7.27l5.45-5.45-5.45-5.45V6.75h-7.27L19.47,1.29Z"/>
+    <path class="cls-1" d="M19.15,25.06c3.03,0,5.48-2.45,5.48-5.48s-2.45-5.48-5.48-5.48-5.48,2.45-5.48,5.48,2.45,5.48,5.48,5.48Z"/>
+  </g>
+</svg>

public/level_icon/2/lv4.svg

@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 107.88 38.22">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #ff931e;
+      }
+
+      .cls-1, .cls-2, .cls-3, .cls-4, .cls-5 {
+        stroke-linejoin: round;
+      }
+
+      .cls-1, .cls-2, .cls-3, .cls-5 {
+        stroke-width: 2.58px;
+      }
+
+      .cls-1, .cls-2, .cls-5 {
+        stroke: #000;
+      }
+
+      .cls-6 {
+        font-size: 18px;
+      }
+
+      .cls-6, .cls-4 {
+        stroke-width: 2px;
+      }
+
+      .cls-2 {
+        fill: #29abe2;
+      }
+
+      .cls-7 {
+        filter: url(#drop-shadow-1);
+      }
+
+      .cls-8 {
+        font-size: 24px;
+      }
+
+      .cls-9 {
+        fill: #fff;
+        font-family: A023-SounsoUndividedad, 'A023-Sounso Undividedad';
+        stroke-miterlimit: 10;
+      }
+
+      .cls-9, .cls-3 {
+        stroke: #fff;
+      }
+
+      .cls-3 {
+        fill: none;
+        stroke-linecap: round;
+      }
+
+      .cls-4 {
+        fill: url(#_未命名的渐变_23);
+        stroke: #333;
+      }
+
+      .cls-5 {
+        fill: #d0021b;
+      }
+    </style>
+    <linearGradient id="_未命名的渐变_23" data-name="未命名的渐变 23" x1="83.95" y1="-7.98" x2="25.22" y2="50.75" gradientUnits="userSpaceOnUse">
+      <stop offset=".15" stop-color="#ff001c"/>
+      <stop offset=".56" stop-color="#ff4f00"/>
+    </linearGradient>
+    <filter id="drop-shadow-1" filterUnits="userSpaceOnUse">
+      <feOffset dx="7" dy="7"/>
+      <feGaussianBlur result="blur" stdDeviation="5"/>
+      <feFlood flood-color="#000" flood-opacity=".46"/>
+      <feComposite in2="blur" operator="in"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <rect class="cls-4" x="2.29" y="5.84" width="104.58" height="31.08" rx="15.54" ry="15.54"/>
+  <text class="cls-9" transform="translate(40.65 27.84)"><tspan class="cls-6" x="0" y="0">LV</tspan><tspan class="cls-8" x="27.88" y="0">4</tspan></text>
+  <g class="cls-7">
+    <path class="cls-5" d="M22.57,6.27c0-3.27-3.16-5.81-6.59-4.73-2.05,.65-3.37,2.65-3.37,4.8,0,5.31,0,17.77,0,23.08,0,2.15,1.31,4.16,3.37,4.8,3.44,1.08,6.59-1.45,6.59-4.73V6.27Z"/>
+    <path class="cls-1" d="M22.57,14.93l5.71,5.71c1.06,1.06,2.74,1.39,4.02,.61,1.86-1.14,2.07-3.61,.63-5.04L22.57,5.83V14.93Z"/>
+    <path class="cls-2" d="M12.61,20.64l-5.71-5.71c-1.06-1.06-2.74-1.39-4.02-.61-1.86,1.14-2.07,3.6-.63,5.04l10.37,10.37v-9.1Z"/>
+    <path class="cls-3" d="M17.59,6.54v1.24"/>
+    <path class="cls-3" d="M17.59,28.95h0"/>
+  </g>
+</svg>

public/level_icon/2/lv5.svg

@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 106.58 39.48">
+  <defs>
+    <style>
+      .cls-1, .cls-2, .cls-3, .cls-4, .cls-5 {
+        stroke-linejoin: round;
+      }
+
+      .cls-1, .cls-3, .cls-4, .cls-5 {
+        stroke-width: 2.58px;
+      }
+
+      .cls-1, .cls-6 {
+        fill: #fff;
+      }
+
+      .cls-1, .cls-6, .cls-4 {
+        stroke: #fff;
+      }
+
+      .cls-2 {
+        fill: url(#_未命名的渐变_27);
+        stroke: #333;
+      }
+
+      .cls-2, .cls-7 {
+        stroke-width: 2px;
+      }
+
+      .cls-7 {
+        font-size: 18px;
+      }
+
+      .cls-3, .cls-4 {
+        fill: none;
+        stroke-linecap: round;
+      }
+
+      .cls-3, .cls-5 {
+        stroke: #000;
+      }
+
+      .cls-8 {
+        font-size: 24px;
+      }
+
+      .cls-6 {
+        font-family: A023-SounsoUndividedad, 'A023-Sounso Undividedad';
+        stroke-miterlimit: 10;
+      }
+
+      .cls-5 {
+        fill: #ed1e79;
+      }
+    </style>
+    <linearGradient id="_未命名的渐变_27" data-name="未命名的渐变 27" x1="82.66" y1="-6.72" x2="23.93" y2="52.01" gradientUnits="userSpaceOnUse">
+      <stop offset=".15" stop-color="#ed1e79"/>
+      <stop offset=".56" stop-color="#ed5c79"/>
+    </linearGradient>
+  </defs>
+  <rect class="cls-2" x="1" y="7.11" width="104.58" height="31.08" rx="15.54" ry="15.54"/>
+  <text class="cls-6" transform="translate(39.36 29.11)"><tspan class="cls-7" x="0" y="0">LV</tspan><tspan class="cls-8" x="27.88" y="0">5</tspan></text>
+  <g>
+    <path class="cls-5" d="M9.86,33.2l2.68-6.63c-3.67-2.47-6.08-6.69-6.08-11.5C6.46,7.46,12.53,1.29,20.02,1.29s13.56,6.17,13.56,13.78c0,4.8-2.42,9.03-6.08,11.5l2.68,6.63H9.86Z"/>
+    <path class="cls-4" d="M17.11,28.26v4.94"/>
+    <path class="cls-4" d="M23.29,28.26v4.94"/>
+    <path class="cls-1" d="M14.44,15.96c1.32,0,2.39-1.07,2.39-2.39s-1.07-2.39-2.39-2.39-2.39,1.07-2.39,2.39,1.07,2.39,2.39,2.39Z"/>
+    <path class="cls-1" d="M25.61,15.96c1.32,0,2.39-1.07,2.39-2.39s-1.07-2.39-2.39-2.39-2.39,1.07-2.39,2.39,1.07,2.39,2.39,2.39Z"/>
+    <path class="cls-3" d="M26.99,33.2h-7.41"/>
+    <path class="cls-3" d="M19.58,33.2h-6.18"/>
+  </g>
+</svg>

public/level_icon/2/lv6.svg

@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 108.33 35.38">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #50e3c2;
+      }
+
+      .cls-1, .cls-2 {
+        stroke: #000;
+        stroke-width: 2.58px;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        stroke-linejoin: round;
+      }
+
+      .cls-4 {
+        font-size: 18px;
+      }
+
+      .cls-4, .cls-3 {
+        stroke-width: 2px;
+      }
+
+      .cls-5 {
+        filter: url(#drop-shadow-1);
+      }
+
+      .cls-2 {
+        fill: none;
+        stroke-linecap: round;
+      }
+
+      .cls-6 {
+        font-size: 24px;
+      }
+
+      .cls-7 {
+        fill: #fff;
+        font-family: A023-SounsoUndividedad, 'A023-Sounso Undividedad';
+        stroke: #fff;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-3 {
+        fill: url(#_未命名的渐变_30);
+        stroke: #333;
+      }
+    </style>
+    <linearGradient id="_未命名的渐变_30" data-name="未命名的渐变 30" x1="84.4" y1="-10.82" x2="25.67" y2="47.9" gradientUnits="userSpaceOnUse">
+      <stop offset=".15" stop-color="#50e3c2"/>
+      <stop offset=".56" stop-color="#50b1c2"/>
+    </linearGradient>
+    <filter id="drop-shadow-1" filterUnits="userSpaceOnUse">
+      <feOffset dx="7" dy="7"/>
+      <feGaussianBlur result="blur" stdDeviation="5"/>
+      <feFlood flood-color="#000" flood-opacity=".46"/>
+      <feComposite in2="blur" operator="in"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <rect class="cls-3" x="2.74" y="3" width="104.58" height="31.08" rx="15.54" ry="15.54"/>
+  <text class="cls-7" transform="translate(41.1 25)"><tspan class="cls-4" x="0" y="0">LV</tspan><tspan class="cls-6" x="27.88" y="0">6</tspan></text>
+  <g class="cls-5">
+    <path class="cls-1" d="M1.29,8.39L19.06,1.29l17.77,7.1-17.77,7.1L1.29,8.39Z"/>
+    <path class="cls-2" d="M37.33,9.02v7.85"/>
+    <path class="cls-2" d="M9.84,11.64v11.05s4.12,4.05,9.82,4.05,9.82-4.05,9.82-4.05V11.64"/>
+  </g>
+</svg>

public/level_icon/2/lv7.svg

@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 114.15 38.61">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#_未命名的渐变_57);
+        stroke: #333;
+        stroke-linejoin: round;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 2px;
+      }
+
+      .cls-3 {
+        fill: #fdbd39;
+      }
+
+      .cls-4 {
+        fill: none;
+        isolation: isolate;
+        opacity: .9;
+        stroke: #ee6723;
+        stroke-width: 1.2px;
+      }
+
+      .cls-2 {
+        font-size: 19px;
+      }
+
+      .cls-5 {
+        fill: #ee6723;
+      }
+
+      .cls-6 {
+        opacity: .18;
+      }
+
+      .cls-6, .cls-7, .cls-8 {
+        fill: #fff;
+      }
+
+      .cls-9 {
+        font-size: 25.34px;
+      }
+
+      .cls-10 {
+        filter: url(#drop-shadow-1);
+      }
+
+      .cls-7 {
+        font-family: A023-SounsoUndividedad, 'A023-Sounso Undividedad';
+        stroke: #fff;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-8 {
+        opacity: .22;
+      }
+
+      .cls-11 {
+        fill: #f69833;
+      }
+
+      .cls-12 {
+        fill: #fecf33;
+      }
+    </style>
+    <linearGradient id="_未命名的渐变_57" data-name="未命名的渐变 57" x1="89.22" y1="-11.38" x2="26.78" y2="51.06" gradientUnits="userSpaceOnUse">
+      <stop offset=".25" stop-color="#9e00c5"/>
+      <stop offset=".67" stop-color="#f7931e"/>
+    </linearGradient>
+    <filter id="drop-shadow-1" filterUnits="userSpaceOnUse">
+      <feOffset dx="7" dy="7"/>
+      <feGaussianBlur result="blur" stdDeviation="5"/>
+      <feFlood flood-color="#000" flood-opacity=".46"/>
+      <feComposite in2="blur" operator="in"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <rect class="cls-1" x="2.85" y="3.45" width="110.3" height="32.77" rx="15.54" ry="15.54"/>
+  <text class="cls-7" transform="translate(46.21 27.71)"><tspan class="cls-2" x="0" y="0">LV</tspan><tspan class="cls-9" x="29.43" y="0">7</tspan></text>
+  <g class="cls-10">
+    <path class="cls-3" d="M6.39,23.21l-2.17,.79-.12,6.45,7.5-2.74c-2.58-.86-4.45-2.38-5.22-4.5Z"/>
+    <path class="cls-11" d="M7.52,16.39L0,19.14l4.22,4.87,2.17-.79c-.76-2.11-.29-4.49,1.13-6.82Z"/>
+    <path class="cls-12" d="M20.18,7.08c-9.58,3.5-15.75,10.72-13.79,16.13L41.07,10.54c-1.96-5.41-11.32-6.95-20.89-3.46Z"/>
+    <path class="cls-5" d="M27.28,26.67c9.58-3.5,15.76-10.69,13.79-16.13L6.39,23.21c1.97,5.44,11.32,6.96,20.89,3.46Z"/>
+    <path class="cls-11" d="M41.07,10.54L6.39,23.21c.68,1.87,3.27,2.8,6.9,2.8s8.08-.88,12.81-2.6c9.58-3.5,16.32-9.16,14.97-12.86Z"/>
+    <path class="cls-3" d="M34.17,7.74c-3.54,0-8.08,.88-12.81,2.6-9.58,3.5-16.32,9.16-14.97,12.86L41.07,10.54c-.68-1.87-3.27-2.79-6.9-2.79Z"/>
+    <path class="cls-4" d="M25.08,5.72c-.91-3.22-1.98-5.2-2.97-5.12-1.87,.17-2.74,7.59-1.94,16.59,.8,9,2.95,16.16,4.82,15.99,1.08-.1,1.82-2.61,2.11-6.45,.06-.02,.13-.05,.19-.07,1.67-.61,3.24-1.33,4.68-2.14,1.36,3.01,1.8,5.18,.99,5.74-1.53,1.08-6.99-4.04-12.18-11.43C15.57,11.46,12.6,4.59,14.14,3.52c.89-.63,3.12,.84,5.84,3.64"/>
+  </g>
+  <polygon class="cls-8" points="77.44 35.23 63.44 4.53 58.44 4.53 72.44 35.23 77.44 35.23"/>
+  <polygon class="cls-6" points="86.59 35.23 72.59 4.53 67.59 4.53 81.59 35.23 86.59 35.23"/>
+</svg>

public/level_icon/2/lv8.svg

@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 113.69 38.29">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#_未命名的渐变_62);
+        stroke: #333;
+        stroke-linejoin: round;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 2px;
+      }
+
+      .cls-2 {
+        font-size: 19px;
+      }
+
+      .cls-3 {
+        opacity: .18;
+      }
+
+      .cls-3, .cls-4, .cls-5 {
+        fill: #fff;
+      }
+
+      .cls-6 {
+        font-size: 25.34px;
+      }
+
+      .cls-7 {
+        fill: #00ad45;
+      }
+
+      .cls-8 {
+        fill: #b3dcff;
+      }
+
+      .cls-4 {
+        font-family: A023-SounsoUndividedad, 'A023-Sounso Undividedad';
+        stroke: #fff;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-5 {
+        opacity: .22;
+      }
+
+      .cls-9 {
+        fill: #5ecc62;
+      }
+    </style>
+    <linearGradient id="_未命名的渐变_62" data-name="未命名的渐变 62" x1="88.76" y1="-11.69" x2="26.33" y2="50.74" gradientUnits="userSpaceOnUse">
+      <stop offset=".12" stop-color="#b3dcff"/>
+      <stop offset=".6" stop-color="#009245"/>
+    </linearGradient>
+  </defs>
+  <rect class="cls-1" x="2.39" y="3.14" width="110.3" height="32.77" rx="15.54" ry="15.54"/>
+  <text class="cls-4" transform="translate(45.75 27.4)"><tspan class="cls-2" x="0" y="0">LV</tspan><tspan class="cls-6" x="29.43" y="0">8</tspan></text>
+  <polygon class="cls-5" points="76.98 34.91 62.98 4.21 57.98 4.21 71.98 34.91 76.98 34.91"/>
+  <polygon class="cls-3" points="86.13 34.91 72.13 4.21 67.13 4.21 81.13 34.91 86.13 34.91"/>
+  <g>
+    <path class="cls-8" d="M20.49,0C9.46,0,.83,14.53,0,26.8c3.46,6.22,11.81,8.59,20.49,8.59s17.03-2.34,20.48-8.59C40.16,14.53,31.52,0,20.49,0Z"/>
+    <path class="cls-9" d="M33.26,15.26c-2.42-3.24-5.51-6.67-7.3-6.67s-6.79,9.17-9.12,9.17-3.49-4.17-6.31-4.16c-3.85,0-7.61,11.72-7.61,11.72,0,0,1.56,7.15,17.86,7.15s17.61-7.03,17.61-7.03c-1.18-3.65-2.91-7.09-5.13-10.19Z"/>
+    <path d="M11.75,24.35c0-.42,.12-.84,.35-1.19,.23-.35,.55-.63,.93-.79,.38-.16,.79-.2,1.19-.12,.4,.08,.77,.29,1.06,.59,.29,.3,.49,.68,.57,1.09,.08,.41,.04,.84-.12,1.24-.16,.39-.42,.72-.76,.96-.34,.23-.74,.36-1.15,.36-.55,0-1.07-.23-1.46-.63-.39-.4-.6-.94-.6-1.51Zm13.34,0c0,.42,.12,.84,.35,1.19s.55,.63,.93,.79c.38,.16,.79,.2,1.19,.12s.77-.29,1.06-.59c.29-.3,.49-.68,.57-1.09,.08-.41,.04-.84-.12-1.24-.16-.39-.42-.72-.76-.96-.34-.23-.74-.36-1.15-.36-.27,0-.54,.06-.79,.16-.25,.11-.48,.27-.67,.46-.19,.2-.34,.43-.45,.69-.1,.26-.16,.54-.16,.82Zm-.37,3.13c.06-.15,.07-.32,.01-.48-.05-.16-.16-.28-.3-.36-.14-.08-.31-.1-.46-.05-.15,.04-.29,.14-.37,.28-.33,.53-.78,.95-1.32,1.24-.54,.28-1.14,.41-1.74,.38-.62,.01-1.23-.13-1.79-.42-.55-.29-1.03-.71-1.39-1.23-.09-.13-.23-.23-.39-.26-.16-.03-.32,0-.46,.08-.14,.09-.24,.22-.28,.38s-.03,.33,.04,.48c.47,.71,1.11,1.3,1.85,1.69s1.57,.6,2.41,.58c.83,.04,1.66-.16,2.4-.56,.74-.41,1.35-1.01,1.79-1.75Z"/>
+    <path class="cls-7" d="M17.13,21.69c-2.53,0-3.83-2.58-4.54-4.18-.63-1.43-.75-3.71-2.54-3.77,.16-.07,.33-.11,.51-.11,2.82,0,4.01,4.16,6.31,4.16s7.31-9.2,9.09-9.2c.4,.02,.78,.14,1.13,.34-.18-.03-.36-.03-.53,.03-.17,.05-.33,.15-.46,.27-.57,.61-5.83,12.46-8.97,12.46Z"/>
+  </g>
+</svg>

public/level_icon/up.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1681972447512" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="49893" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"><path d="M688.4352 397.824L511.7952 610.2016l-177.2544-212.992h-91.136v34.5088a30.8224 30.8224 0 0 1 28.9792 12.288v3.6864c38.8096 49.8688 191.488 223.4368 234.5984 276.992 43.1104-54.1696 195.1744-227.7376 234.5984-278.2208 6.656-9.1136 17.7152-13.824 28.9792-12.288v-39.424h-86.2208c-0.2048 0 6.5536 0 4.096 3.072z m259.7888-52.9408c32.6656 38.7072 32.6656 95.4368 0 134.2464L736.4608 709.3248 580.096 877.9776a85.7088 85.7088 0 0 1-67.6864 34.5088 86.00576 86.00576 0 0 1-67.6864-34.5088L293.2736 714.8544 75.8784 479.6416a100.97664 100.97664 0 0 1 0-132.4032l100.352-111.4112 83.1488-90.5216a88.40192 88.40192 0 0 1 68.9152-33.8944h369.3568a90.8288 90.8288 0 0 1 66.4576 33.28C798.72 179.2 873.1648 261.7344 918.1184 310.3744l30.1056 34.5088z" fill="#409EFF" p-id="49894"></path></svg>

src/assets/styles/theme.scss

@@ -7,6 +7,16 @@
     --comment-text-color: #767779;
     // 评论子评论背景颜色
     --comment-child-background-color: #f5f5f5;
+
+    // 评论列表背景颜色
+    --comment-list-background-color: #fafafa;
+
+    // 举报弹窗文字颜色
+    --comment-report-text-color: rgba(15, 15, 16, 0.58);
+    // 评论框边框颜色
+    --comment-child-box-border-color: #90d952;
+
+
 }
 
 [data-dark="dark"] {
@@ -18,6 +28,14 @@
     --comment-text-color: #ffffff;
     // 评论子评论背景颜色
     --comment-child-background-color: rgb(0, 0, 0);
+
+    // 评论列表背景颜色
+    --comment-list-background-color: rgba(15, 15, 16, 0.3);
+
+    // 举报弹窗文字颜色
+    --comment-report-text-color: #ffffff;
+    // 评论框边框颜色
+    --comment-child-box-border-color: #ffffff;
 }
 
 #app {

src/components/CommentReply/index.scss

@@ -1,9 +1,9 @@
 .comment-main {
     display: flex;
     flex-direction: column;
-    border: 1px solid #ccc;
+    //border: 1px solid #ccc;
     margin-top: 20px;
-    width: 650px;
+    width: 700px;
     padding: 50px;
 
     .comment-header-title {

src/components/CommentReply/src/CommentInput/index.scss

@@ -7,7 +7,7 @@
     margin-left: 20px;
 
     .comment-text {
-        width: 600px;
+        width: 630px;
     }
 
     .comment-editor {

src/components/CommentReply/src/CommentList/CommentList.vue

@@ -8,12 +8,12 @@
         </AFlex>
         <AFlex :vertical="false" justify="flex-end">
           <AButton type="text" size="small" @click="getHotCommentList" :icon="h(FireOutlined)"
-                   :style="{color: router.currentRoute.value.query.type === 'hot'? '#08a327' : '#000'}"
+                   :style="{color: router.currentRoute.value.query.type === 'hot'? '#08a327' : 'var(--text-color)'}"
                    class="reply-header-hot">
             {{ t('comment.hot') }}
           </AButton>
           <AButton type="text" size="small" @click="getLatestCommentList" :icon="h(ClockCircleOutlined)"
-                   :style="{color: router.currentRoute.value.query.type === 'latest'? '#08a327' : '#000'}"
+                   :style="{color: router.currentRoute.value.query.type === 'latest'? '#08a327' : 'var(--text-color)'}"
                    class="reply-header-latest">
             {{ t('comment.latest') }}
           </AButton>
@@ -25,16 +25,22 @@
         <div class="reply-item" v-for="(item, index) in comment.commentList.comments" :key="index">
           <AFlex :vertical="false" style="margin-top: 5px">
             <!-- 评论头像 -->
-            <AFlex :vertical="true" class="reply-avatar" v-if="item.avatar">
+            <ABadge :offset="[0,0]" :dot="false">
-              <AAvatar :size="50" class="reply-avatar-img" shape="circle" :src="item.avatar"/>
+              <template #count v-if="true">
-            </AFlex>
+                <img src="/level_icon/up.svg" style="width: 20px;height: 20px;"  alt="lv2">
+              </template>
+              <AFlex :vertical="true" class="reply-avatar" v-if="item.avatar">
+                <AAvatar :size="50" class="reply-avatar-img" shape="circle" :src="item.avatar"/>
+              </AFlex>
+            </ABadge>
             <!-- 评论内容 -->
             <AFlex :vertical="true" class="reply-content">
               <AFlex :vertical="true">
                 <AFlex :vertical="false" align="flex-start">
                   <span class="reply-name">{{ item.nickname }}</span>
-                  <a-tag color="cyan" class="reply-tag" size="small">Lv.5</a-tag>
+                  <img src="/level_icon/3/lv5.png" class="reply-level-icon" alt="lv1">
-                  <a-tag color="red" class="reply-tag" size="small" v-if="item.author===1">UP</a-tag>
+                  <img src="/level_icon/4/4.png" class="reply-level-icon" alt="lv2">
+
                 </AFlex>
                 <AFlex :vertical="false" align="flex-end" justify="space-between">
                   <AFlex :vertical="false" align="center" justify="space-between">
@@ -75,8 +81,10 @@
                           comment.handleShowCommentReply(item.id);
                           replyListThrottled(item.id)}" type="text" size="small"
                                :icon="h(MessageOutlined)"
+                               :disabled="item.reply_count === 0"
+                               v-show="item.reply_count > 0"
                                class="reply-action-btn">
-                        {{ item.reply_count }}
+                        查看{{ item.reply_count >= 99 ? '99+' : item.reply_count }}条回复
                       </AButton>
                       <AButton
                           @click="comment.handleShowReplyInput(item.id)"
@@ -113,13 +121,13 @@
 
               </AFlex>
               <!-- 回复输入框 -->
-              <ReplyInput :item="item" v-if="comment.showReplyInput && item.id === comment.showReplyInput"/>
+              <ReplyInput :item="item" v-show="comment.showReplyInput && item.id === comment.showReplyInput"/>
               <!-- 子回复列表 -->
-              <ReplyList :item="item" v-if="comment.showCommentReply && item.id === comment.showCommentReply"/>
+              <ReplyList :item="item" v-show="comment.showCommentReply && item.id === comment.showCommentReply"/>
             </AFlex>
           </AFlex>
         </div>
-        <APagination v-if="comment.commentList.total > 0" class="reply-pagination" @change="paginationCommentChange"
+        <APagination v-if="comment.commentList.total > 5" class="reply-pagination" @change="paginationCommentChange"
                      :current="Number(router.currentRoute.value.query.page) ||  comment.commentList.current"
                      :page-size="comment.commentList.size" :total="comment.commentList.total"
                      :default-page-size="comment.commentList.size"
@@ -152,6 +160,8 @@ import {useRouter} from "vue-router";
 import ReplyInput from "@/components/CommentReply/src/ReplyInput/ReplyInput.vue";
 import ReplyList from "@/components/CommentReply/src/ReplyList/ReplyList.vue";
 import MessageReport from "@/components/CommentReply/src/MessageReport/MessageReport.vue";
+import {Comment} from "@/types/comment";
+import Badge from "@/components/MyUI/Badge/Badge.vue";
 
 
 const {t} = useI18n();
@@ -171,7 +181,7 @@ async function getCommentList(page: number = 1, size: number = 5, hot: boolean =
     topic_id: topicId.value,
     page: page,
     size: size,
-    is_hot: router.currentRoute.value.query.type === "hot" || hot,
+    is_hot: router.currentRoute.value.query.type === "hot" ? hot : false,
   };
   await comment.getCommentList(params);
 }
@@ -284,28 +294,38 @@ async function paginationCommentChange(page: number, pageSize: number) {
  *  热门评论
  */
 async function getHotCommentList() {
-  await getCommentList(1, 5, true);
+  comment.commentList = {} as Comment;
-  await router.push({
+  comment.commentLoading = true;
-    path: "/main",
+  getCommentList(1, 5, true).then(() => {
-    query: {
+    router.push({
-      type: "hot",
+      path: "/main",
-      page: router.currentRoute.value.query.page,
+      query: {
-    }
+        type: "hot",
+        page: router.currentRoute.value.query.page,
+      }
+    });
+    comment.commentLoading = false;
   });
+
 }
 
 /**
  *  最新评论
  */
 async function getLatestCommentList() {
-  await getCommentList(1, 5, false);
+  comment.commentList = {} as Comment;
-  await router.push({
+  comment.commentLoading = true;
-    path: "/main",
+  getCommentList(1, 5, false).then(() => {
-    query: {
+    router.push({
-      type: "latest",
+      path: "/main",
-      page: router.currentRoute.value.query.page,
+      query: {
-    }
+        type: "latest",
+        page: router.currentRoute.value.query.page,
+      }
+    });
+    comment.commentLoading = false;
   });
+
 }
 
 onMounted(() => {

src/components/CommentReply/src/CommentList/index.scss

@@ -7,7 +7,21 @@
 }
 
 .reply-list {
-    margin-top: 30px;
+    margin-top: 10px;
+    border: 1px dashed #e9e9e9;
+    border-radius: 10px;
+    background-color: var(--comment-list-background-color);
+    padding: 10px;
+    min-width: 650px;
+
+    .reply-item {
+        margin-top: 10px;
+    }
+
+    .reply-avatar {
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+        border-radius: 50%;
+    }
 
     .reply-avatar-img {
         cursor: pointer;
@@ -27,6 +41,9 @@
             font-weight: 600;
             cursor: pointer;
         }
+        .reply-name:hover {
+           color: rgba(15, 15, 16, 0.68);
+        }
 
         .reply-tag {
             font-size: 10px;
@@ -35,6 +52,12 @@
             cursor: pointer;
         }
 
+        .reply-level-icon {
+            width: 40px;
+            margin-left: 5px;
+            cursor: pointer;
+        }
+
         .reply-ip {
             font-size: 12px;
             color: var(--comment-text-color);
@@ -46,6 +69,7 @@
         }
 
         .reply-card {
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
             width: 600px;
             //margin-top: 5px;
             .reply-text {

src/components/CommentReply/src/MessageReport/MessageReport.vue

@@ -66,7 +66,7 @@ import useStore from "@/store";
 const {t} = useI18n();
 const comment = useStore().comment;
 const radioStyle = reactive({
-  color: 'rgba(15,15,16,0.66)',
+  color: 'var(--comment-report-text-color)',
   fontSize: '13px',
   fontWeight: 'bold'
 });

src/components/CommentReply/src/MessageReport/index.scss

@@ -5,13 +5,13 @@
 
     .message-report-title {
         font-size: 13px;
-        color: rgba(15, 15, 16, 0.58);
+        color: var(--comment-report-text-color);
         font-weight: bolder;
     }
     .message-report-content {
         border: 1px dashed #e9e9e9;
         border-radius: 10px;
-        background-color: #fafafa;
+        background-color: var(--comment-list-background-color);
         min-height: 20px;
         padding: 10px;
     }

src/components/CommentReply/src/ReplyList/ReplyList.vue

@@ -4,8 +4,8 @@
       <AFlex :vertical="true" v-if="comment.replyList.comments">
         <AFlex :vertical="false" style="margin-top: 5px" v-for="(child, index) in comment.replyList.comments"
                :key="index">
-          <AFlex :vertical="true" class="reply-item-child-avatar">
+          <AFlex :vertical="true" >
-            <AAvatar :size="40" shape="circle" :src="child.avatar"/>
+            <AAvatar :size="40" shape="circle" class="reply-item-child-avatar" :src="child.avatar"/>
           </AFlex>
           <AFlex :vertical="true" class="reply-item-child-content">
             <AFlex :vertical="true">
@@ -96,7 +96,7 @@
             </AFlex>
           </AFlex>
         </AFlex>
-        <APagination v-if="comment.replyList.total > 0" class="reply-pagination-child" size="small"
+        <APagination v-if="comment.replyList.total > 5" class="reply-pagination-child" size="small"
                      :total="comment.replyList.total"
                      :current="comment.replyList.current" :page-size="comment.replyList.size"
                      :default-page-size="comment.replyList.size"

src/components/CommentReply/src/ReplyList/index.scss

@@ -3,6 +3,7 @@
     border-radius: 10px;
     background-color: var(--comment-child-background-color);
     padding: 10px;
+    border-left: var(--comment-child-box-border-color) 2px solid;
 
     .reply-pagination-child {
         display: flex;
@@ -10,6 +11,10 @@
         margin-top: 10px;
     }
 
+    .reply-item-child-avatar {
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    }
+
     .reply-item-child-content {
         margin-left: 10px;
 
@@ -29,6 +34,10 @@
             cursor: pointer;
         }
 
+        .reply-name-child:hover {
+            color: rgba(15, 15, 16, 0.68);
+        }
+
         .reply-tag-child {
             font-size: 10px;
             font-weight: 800;
@@ -47,6 +56,7 @@
         }
 
         .reply-card-child {
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
             width: 530px;
 
             .reply-action-item-child {

src/components/MyUI/Badge/Badge.vue

@@ -0,0 +1,394 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { CSSProperties } from 'vue';
+import { useSlotsExist } from '../utils/index.ts';
+enum PresetColor {
+  pink = 'pink',
+  red = 'red',
+  yellow = 'yellow',
+  orange = 'orange',
+  cyan = 'cyan',
+  green = 'green',
+  blue = 'blue',
+  purple = 'purple',
+  geekblue = 'geekblue',
+  magenta = 'magenta',
+  volcano = 'volcano',
+  gold = 'gold',
+  lime = 'lime'
+}
+enum Status {
+  success = 'success',
+  processing = 'processing',
+  default = 'default',
+  error = 'error',
+  warning = 'warning'
+}
+interface Props {
+  color?: PresetColor | string // 自定义小圆点的颜色，优先级高于 status
+  value?: number | string // 展示的数字或文字，为数字时大于 max 显示为 max+，为 0 时隐藏 number | string | slot
+  max?: number // 展示封顶的数字值
+  showZero?: boolean // 当数值为 0 时，是否展示 Badge
+  dot?: boolean // 不展示数字，只有一个小红点
+  offset?: [number | string, number | string] // 设置状态点的位置偏移，距默认位置左侧、上方的偏移量 [x, y]: [水平偏移, 垂直偏移]
+  status?: Status // 设置 Badge 为状态点
+  text?: string // 在设置了 status 或 color 的前提下有效，设置状态点的文本 string | slot
+  valueStyle?: CSSProperties // 设置徽标的样式
+  zIndex?: number // 设置徽标的 z-index
+  title?: string // 设置鼠标放在状态点上时显示的文字
+  ripple?: boolean // 是否开启涟漪动画效果
+}
+const props = withDefaults(defineProps<Props>(), {
+  color: undefined,
+  value: undefined,
+  max: 99,
+  showZero: false,
+  dot: false,
+  offset: undefined,
+  status: undefined,
+  text: undefined,
+  valueStyle: () => ({}),
+  zIndex: 9,
+  title: undefined,
+  ripple: true
+});
+const slotsExist = useSlotsExist(['default', 'value']);
+const customStyle = computed(() => {
+  if (props.color && !Object.keys(PresetColor).includes(props.color)) {
+    if ((props.value !== undefined && props.value !== 0) || (props.showZero && props.value === 0)) {
+      return {
+        backgroundColor: props.color
+      };
+    } else {
+      return {
+        color: props.color,
+        backgroundColor: props.color
+      };
+    }
+  }
+  return {};
+});
+const presetClass = computed(() => {
+  if (props.color) {
+    if (Object.keys(PresetColor).includes(props.color)) {
+      if ((props.value !== undefined && props.value !== 0) || (props.showZero && props.value === 0)) {
+        return `color-${props.color} white`;
+      } else {
+        return `color-${props.color}`;
+      }
+    }
+  }
+  if (props.status) {
+    if ((props.value !== undefined && props.value !== 0) || (props.showZero && props.value === 0)) {
+      return `status-${props.status} white`;
+    } else {
+      return `status-${props.status}`;
+    }
+  }
+  return {};
+});
+const showContent = computed(() => {
+  if (props.value !== undefined || props.dot || (!props.color && !props.status)) {
+    return slotsExist.default;
+  }
+  return false;
+});
+const showValue = computed(() => {
+  if (!props.color && !props.status) {
+    return slotsExist.value;
+  }
+  return false;
+});
+const showBadge = computed(() => {
+  if ((props.value !== undefined && props.value !== 0) || (props.showZero && props.value === 0) || props.dot) {
+    return true;
+  }
+  return false;
+});
+const showDot = computed(() => {
+  return props.value === undefined || (props.value === 0 && !props.showZero) || props.dot;
+});
+const dotOffestStyle = computed(() => {
+  if (props.offset?.length) {
+    return {
+      right: isNumber(props.offset[0]) ? -props.offset[0] + 'px' : handleOffset(props.offset[0] as string),
+      marginTop: isNumber(props.offset[1]) ? props.offset[1] + 'px' : props.offset[1]
+    };
+  }
+  return {};
+});
+function isNumber(value: number | string): boolean {
+  return typeof value === 'number';
+}
+function handleOffset(value: string): string {
+  if (value.includes('-')) {
+    return value.replace('-', '');
+  } else {
+    return `-${value}`;
+  }
+}
+</script>
+<template>
+  <div
+      class="m-badge"
+      :class="{ 'badge-status-color': value === undefined && (color || status) }"
+      :style="[`--z-index: ${zIndex}`, value === undefined && !dot ? dotOffestStyle : null]"
+  >
+    <template v-if="value === undefined && !dot && (color || status)">
+      <span class="status-dot" :class="[presetClass, { 'dot-ripple': ripple }]" :style="customStyle"></span>
+      <span class="status-text">
+        <slot>{{ text }}</slot>
+      </span>
+    </template>
+    <template v-else>
+      <template v-if="showContent">
+        <slot></slot>
+      </template>
+      <span v-if="showValue" class="m-value" :class="{ 'only-number': !showContent }">
+        <slot name="value"></slot>
+      </span>
+      <Transition name="zoom" v-else>
+        <div
+            v-if="showBadge"
+            class="m-badge-value"
+            :class="[
+            {
+              'small-num': typeof value === 'number' && value < 10,
+              'only-number': !showContent,
+              'only-dot': showDot
+            },
+            presetClass
+          ]"
+            :style="[customStyle, dotOffestStyle, valueStyle]"
+            :title="title || (value !== undefined ? String(value) : '')"
+        >
+          <span v-if="!dot" class="m-number" style="transition: none 0s ease 0s">
+            <span class="u-number">{{ typeof value === 'number' && value > max ? max + '+' : value }}</span>
+          </span>
+        </div>
+      </Transition>
+    </template>
+  </div>
+</template>
+<style lang="less" scoped>
+.zoom-enter-active {
+  animation: zoomBadgeIn 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46);
+  animation-fill-mode: both;
+}
+.zoom-leave-active {
+  animation: zoomBadgeOut 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46);
+  animation-fill-mode: both;
+}
+@keyframes zoomBadgeIn {
+  0% {
+    transform: scale(0) translate(50%, -50%);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1) translate(50%, -50%);
+  }
+}
+@keyframes zoomBadgeOut {
+  0% {
+    transform: scale(1) translate(50%, -50%);
+  }
+  100% {
+    transform: scale(0) translate(50%, -50%);
+    opacity: 0;
+  }
+}
+.m-badge {
+  position: relative;
+  display: inline-block;
+  width: fit-content;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.88);
+  line-height: 1;
+  .status-dot {
+    position: relative;
+    top: -1px;
+    display: inline-block;
+    vertical-align: middle;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+  }
+  .dot-ripple {
+    &::after {
+      box-sizing: border-box;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-width: 1px;
+      border-style: solid;
+      border-color: inherit;
+      border-radius: 50%;
+      animation-name: dotRipple;
+      animation-duration: 1.2s;
+      animation-iteration-count: infinite;
+      animation-timing-function: ease-in-out;
+      content: '';
+    }
+    @keyframes dotRipple {
+      0% {
+        transform: scale(0.8);
+        opacity: 0.5;
+      }
+      100% {
+        transform: scale(2.4);
+        opacity: 0;
+      }
+    }
+  }
+  .status-text {
+    margin-left: 8px;
+    color: rgba(0, 0, 0, 0.88);
+    font-size: 14px;
+  }
+  .m-value {
+    position: absolute;
+    top: 0;
+    z-index: var(--z-index);
+    right: 0;
+    transform: translate(50%, -50%);
+    transform-origin: 100% 0%;
+  }
+  .m-badge-value {
+    .m-value();
+    overflow: hidden;
+    padding: 0 8px;
+    min-width: 20px;
+    height: 20px;
+    color: #ffffff;
+    font-weight: normal;
+    font-size: 12px;
+    line-height: 20px;
+    white-space: nowrap;
+    text-align: center;
+    background: #ff4d4f;
+    border-radius: 10px;
+    box-shadow: 0 0 0 1px #ffffff;
+    transition: background 0.2s;
+    .m-number {
+      position: relative;
+      display: inline-block;
+      height: 20px;
+      transition: all 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46);
+      transform-style: preserve-3d;
+      -webkit-transform-style: preserve-3d; // 设置元素的子元素是位于 3D 空间中还是平面中 flat | preserve-3d
+      backface-visibility: hidden;
+      -webkit-backface-visibility: hidden; // 当元素背面朝向观察者时是否可见 hidden | visible
+      .u-number {
+        display: inline-block;
+        height: 20px;
+        margin: 0;
+        transform-style: preserve-3d;
+        -webkit-transform-style: preserve-3d;
+        backface-visibility: hidden;
+        -webkit-backface-visibility: hidden;
+      }
+    }
+  }
+  .small-num {
+    padding: 0;
+  }
+  .only-number {
+    position: relative;
+    top: auto;
+    display: block;
+    transform-origin: 50% 50%;
+    transform: none;
+  }
+  .only-dot {
+    width: 6px;
+    min-width: 6px;
+    height: 6px;
+    background: #ff4d4f;
+    border-radius: 100%;
+    box-shadow: 0 0 0 1px #ffffff;
+    padding: 0;
+    transition: background 0.3s;
+  }
+  .status-success {
+    color: #52c41a;
+    background-color: #52c41a;
+  }
+  .status-error {
+    color: #ff4d4f;
+    background-color: #ff4d4f;
+  }
+  .status-default {
+    color: rgba(0, 0, 0, 0.25);
+    background-color: rgba(0, 0, 0, 0.25);
+  }
+  .status-processing {
+    color: #1890ff;
+    background-color: #1890ff;
+  }
+  .status-warning {
+    color: #faad14;
+    background-color: #faad14;
+  }
+  .color-pink {
+    color: #eb2f96;
+    background-color: #eb2f96;
+  }
+  .color-red {
+    color: #f5222d;
+    background-color: #f5222d;
+  }
+  .color-yellow {
+    color: #fadb14;
+    background-color: #fadb14;
+  }
+  .color-orange {
+    color: #fa8c16;
+    background-color: #fa8c16;
+  }
+  .color-cyan {
+    color: #13c2c2;
+    background-color: #13c2c2;
+  }
+  .color-green {
+    color: #52c41a;
+    background-color: #52c41a;
+  }
+  .color-blue {
+    color: #1890ff;
+    background-color: #1890ff;
+  }
+  .color-purple {
+    color: #722ed1;
+    background-color: #722ed1;
+  }
+  .color-geekblue {
+    color: #2f54eb;
+    background-color: #2f54eb;
+  }
+  .color-magenta {
+    color: #eb2f96;
+    background-color: #eb2f96;
+  }
+  .color-volcano {
+    color: #fa541c;
+    background-color: #fa541c;
+  }
+  .color-gold {
+    color: #faad14;
+    background-color: #faad14;
+  }
+  .color-lime {
+    color: #a0d911;
+    background-color: #a0d911;
+  }
+  .white {
+    color: #ffffff;
+  }
+}
+.badge-status-color {
+  line-height: inherit;
+  vertical-align: baseline;
+}
+</style>

src/components/MyUI/utils/index.ts

@@ -0,0 +1,50 @@
+/**
+ * 组合式函数
+ * 监听给定名称或名称数组的插槽是否存在，支持监听单个插槽或一组插槽的存在
+ *
+ * @param slotsName - 插槽的名称或名称数组，默认为 'default'
+ * @returns 如果是单个插槽名称，则返回一个计算属性，表示该插槽是否存在
+ *          如果是插槽名称数组，则返回一个 reactive 对象，其中的每个属性对应该插槽是否存在
+ */
+import { useSlots, reactive, computed } from 'vue';
+export function useSlotsExist(slotsName: string | string[] = 'default') {
+    const slots = useSlots(); // 获取当前组件的所有插槽
+    // 检查特定名称的插槽是否存在且不为空
+    const checkSlotsExist = (slotsName: string): boolean => {
+        const slotsContent = slots[slotsName]?.();
+        const checkExist = (slotContent: any) => {
+            if (typeof slotContent.children === 'string') {
+                // 排除 v-if="false" 的插槽内容
+                if (slotContent.children === 'v-if') {
+                    return false;
+                }
+                return slotContent.children.trim() !== '';
+            } else {
+                if (slotContent.children === null) {
+                    if (slotContent.type === 'img' || typeof slotContent.type !== 'string') {
+                        return true;
+                    }
+                } else {
+                    return Boolean(slotContent.children);
+                }
+            }
+        };
+        if (slotsContent && slotsContent?.length) {
+            const result = slotsContent.some((slotContent) => {
+                return checkExist(slotContent);
+            });
+            return result;
+        }
+        return false;
+    };
+    if (Array.isArray(slotsName)) {
+        const slotsExist = reactive<any>({});
+        slotsName.forEach((item) => {
+            const exist = computed(() => checkSlotsExist(item));
+            slotsExist[item] = exist; // 将一个 ref 赋值给一个 reactive 属性时，该 ref 会自动解包
+        });
+        return slotsExist;
+    } else {
+        return computed(() => checkSlotsExist(slotsName));
+    }
+}

src/layout/default/Header/index.scss

@@ -11,7 +11,7 @@
     transition: background-color 0.3s;
     z-index: 3;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-    border-radius: 20px;
+    //border-radius: 20px;
 
     .header-logo-container {
         min-width: 280px;

src/store/modules/commentStore.ts

@@ -4,7 +4,6 @@ import {Comment} from "@/types/comment";
 import {cancelCommentLikeApi, commentLikeApi, commentListApi, replyListApi} from "@/api/comment";
 import {message} from "ant-design-vue";
 import {getSlideCaptchaDataApi} from "@/api/captcha";
-import imageCompression from "browser-image-compression";
 import QQ_EMOJI from "@/constant/qq_emoji.ts";
 import {initNSFWJs, predictNSFW} from "@/utils/nsfw/nsfw.ts";
 import {NSFWJS} from "nsfwjs";
@@ -180,17 +179,15 @@ export const useCommentStore = defineStore(
         async function beforeUpload(file: any) {
             uploadLoading.value = true;
             // 压缩图片配置
-            const options = {
+            // const options = {
-                maxSizeMB: 0.4,
+            //     maxSizeMB: 0.4,
-                maxWidthOrHeight: 750,
+            //     maxWidthOrHeight: 750,
-                maxIteration: 2
+            //     maxIteration: 2
-            };
+            // };
-
-
             if (!window.FileReader) return false; // 判断是否支持FileReader
-            const compressedFile = await imageCompression(file, options);
+            // const compressedFile = await imageCompression(file, options);
             const reader = new FileReader();
-            reader.readAsDataURL(compressedFile); // 文件转换
+            reader.readAsDataURL(file); // 文件转换
             reader.onloadend = async function () {
                 if (fileList.value.length < 3) {
                     const img: HTMLImageElement = document.createElement('img');