SCHISANDRA/schisandra-cloud-album-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 updated comment

Browse Source
This commit is contained in:
landaiqing
2024-11-04 11:35:42 +08:00
parent fca5879dc0
commit e8ba4a1010
62 changed files with 1343 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components.d.ts vendored
View File

@@ -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']

BIN
public/level_icon/1/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
public/level_icon/1/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
public/level_icon/1/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
public/level_icon/1/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
public/level_icon/1/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
public/level_icon/1/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
public/level_icon/1/7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
public/level_icon/1/8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
public/level_icon/1/9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

83
public/level_icon/2/lv1.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

93
public/level_icon/2/lv10.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

67
public/level_icon/2/lv2.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

56
public/level_icon/2/lv3.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

86
public/level_icon/2/lv4.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

72
public/level_icon/2/lv5.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

70
public/level_icon/2/lv6.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

94
public/level_icon/2/lv7.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

68
public/level_icon/2/lv8.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

92
public/level_icon/2/lv9.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
public/level_icon/3/lv1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
public/level_icon/3/lv10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
public/level_icon/3/lv2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
public/level_icon/3/lv3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
public/level_icon/3/lv4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
public/level_icon/3/lv5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
public/level_icon/3/lv6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
public/level_icon/3/lv7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
public/level_icon/3/lv8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
public/level_icon/3/lv9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
public/level_icon/4/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
public/level_icon/4/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
public/level_icon/4/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
public/level_icon/4/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
public/level_icon/4/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
public/level_icon/4/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
public/level_icon/4/7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
public/level_icon/4/8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
public/level_icon/4/9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
public/level_icon/5/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 214 KiB

BIN
public/level_icon/5/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 224 KiB

BIN
public/level_icon/5/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 230 KiB

BIN
public/level_icon/5/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 229 KiB

BIN
public/level_icon/5/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 220 KiB

BIN
public/level_icon/5/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 217 KiB

BIN
public/level_icon/5/7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
public/level_icon/5/8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
public/level_icon/5/9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

1
public/level_icon/up.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

18
src/assets/styles/theme.scss
View File

@@ -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 {

4
src/components/CommentReply/index.scss
View File

@@ -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 {

2
src/components/CommentReply/src/CommentInput/index.scss
View File

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

72
src/components/CommentReply/src/CommentList/CommentList.vue
View File

@@ -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">
<AAvatar :size="50" class="reply-avatar-img" shape="circle" :src="item.avatar"/>
</AFlex>
<ABadge :offset="[0,0]" :dot="false">
<template #count v-if="true">
<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>
<a-tag color="red" class="reply-tag" size="small" v-if="item.author===1">UP</a-tag>
<img src="/level_icon/3/lv5.png" class="reply-level-icon" alt="lv1">
<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);
await router.push({
path: "/main",
query: {
type: "hot",
page: router.currentRoute.value.query.page,
}
comment.commentList = {} as Comment;
comment.commentLoading = true;
getCommentList(1, 5, true).then(() => {
router.push({
path: "/main",
query: {
type: "hot",
page: router.currentRoute.value.query.page,
}
});
comment.commentLoading = false;
});
}
/**
* 最新评论
*/
async function getLatestCommentList() {
await getCommentList(1, 5, false);
await router.push({
path: "/main",
query: {
type: "latest",
page: router.currentRoute.value.query.page,
}
comment.commentList = {} as Comment;
comment.commentLoading = true;
getCommentList(1, 5, false).then(() => {
router.push({
path: "/main",
query: {
type: "latest",
page: router.currentRoute.value.query.page,
}
});
comment.commentLoading = false;
});
}
onMounted(() => {

26
src/components/CommentReply/src/CommentList/index.scss
View File

@@ -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 {

2
src/components/CommentReply/src/MessageReport/MessageReport.vue
View File

@@ -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'
});

4
src/components/CommentReply/src/MessageReport/index.scss
View File

@@ -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;
}

6
src/components/CommentReply/src/ReplyList/ReplyList.vue
View File

@@ -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">
<AAvatar :size="40" shape="circle" :src="child.avatar"/>
<AFlex :vertical="true" >
<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"

10
src/components/CommentReply/src/ReplyList/index.scss
View File

@@ -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 {

394
src/components/MyUI/Badge/Badge.vue Normal file
View File

@@ -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>

50
src/components/MyUI/utils/index.ts Normal file
View File

@@ -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));
}
}

2
src/layout/default/Header/index.scss
View File

@@ -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;

17
src/store/modules/commentStore.ts
View File

@@ -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 = {
maxSizeMB: 0.4,
maxWidthOrHeight: 750,
maxIteration: 2
};
// const options = {
// maxSizeMB: 0.4,
// maxWidthOrHeight: 750,
// 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');