A1300399510/PC-Light-Forum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加BI组件并优化多个页面样式和功能

Browse Source 
refactor: 重构slideshow-box组件，移除帖子标签

fix: 修复item-bottom组件中QR码加载状态显示问题

style: 调整多个页面的CSS样式，包括字体大小和间距

perf: 优化save.js文件同步逻辑，支持更多模板格式

docs: 更新组件文档和注释

chore: 添加bi组件相关文件并配置监听同步

test: 更新测试用例以适应组件变更
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-11-07 19:42:19 +08:00
parent 5c199bb8fe
commit dc871d80c0
28 changed files with 768 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
css/details.css
View File

@@ -75,13 +75,12 @@
width: 100vw;
height: 100vh;
z-index: 2;
background-color: rgba(0, 0, 0, 0.1);
}
#details .matter .matter-left .matter-head .operate .operate {
position: absolute;
top: 23px;
right: 0;
width: 100px;
width: 80px;
background-color: #f2f2f2;
border-radius: 8px;
padding: 5px;
@@ -101,16 +100,16 @@
}
#details .matter .matter-left .matter-head .operate .operate .item {
text-align: center;
font-size: 18px;
font-size: 14px;
color: #333333;
padding: 14px 0;
cursor: pointer;
}
#details .matter .matter-left .matter-head .operate .operate .item:first-of-type {
padding-top: 24px;
padding-top: 14px;
}
#details .matter .matter-left .matter-head .operate .operate .item:last-of-type {
padding-bottom: 24px;
padding-top: 14px;
}
#details .matter .matter-left .matter-head .operate .operate .item:not(:last-of-type) {
border-bottom: 1px dotted #d7d7d7;
@@ -257,6 +256,11 @@
height: 100px;
margin-bottom: 4px;
}
#details .matter .matter-left .action-bar .action-bar-item .share-box .share-item .QRcode-box .QRcode .load {
width: 50px;
height: 50px;
animation: loadingRotate 1s linear infinite;
}
#details .matter .matter-left .action-bar .action-bar-item .share-box .share-item .QRcode-box .text {
color: #555555;
font-size: 14px;
@@ -310,6 +314,11 @@
#details .matter .matter-left .related .list .item .text {
width: 352px;
}
#details .matter .sidebar-box.fixed {
position: fixed;
right: calc((100% - 1200px) / 2);
bottom: 10px;
}
#details .matter .sidebar-box .adv {
width: 291px;
height: 220px;
@@ -554,6 +563,7 @@
#details .coins-area .coins-box .coins-list-area .list .item {
height: 65px;
padding: 0 35px;
cursor: pointer;
}
#details .coins-area .coins-box .coins-list-area .list .item:not(:last-child) {
border-bottom: 1px solid #f2f2f2;
@@ -603,13 +613,13 @@
.answer-discuss .input-box {
background-color: #f6f6f6;
border-radius: 10px;
padding-top: 11px;
padding-top: 20px;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.answer-discuss .input-box .top {
padding: 0 14px;
padding: 0 20px;
position: relative;
}
.answer-discuss .input-box .top .input-placeholder {
@@ -621,8 +631,8 @@
left: 14px;
}
.answer-discuss .input-box .top .avatar {
width: 24px;
height: 24px;
width: 30px;
height: 30px;
border-radius: 50%;
display: block;
margin-right: 10px;
@@ -633,6 +643,7 @@
outline: none;
background-color: transparent;
min-height: 40px;
padding-top: 5px;
padding-bottom: 11px;
resize: none;
}
@@ -678,13 +689,12 @@
cursor: pointer;
}
.answer-discuss .input-box .bottom {
height: 52px;
padding: 0 14px;
padding: 0 20px;
justify-content: flex-end;
}
.answer-discuss .input-box .bottom .operate .item {
display: inline-flex;
margin-right: 20px;
margin-right: 25px;
position: relative;
z-index: 1;
}
@@ -704,8 +714,8 @@
z-index: -1;
}
.answer-discuss .input-box .bottom .operate .item .icon {
width: 16px;
height: 16px;
width: 20px;
height: 20px;
cursor: pointer;
}
.answer-discuss .input-box .bottom .operate .item .emoji-box {

43
css/details.less
View File

@@ -83,14 +83,14 @@
width: 100vw;
height: 100vh;
z-index: 2;
background-color: rgba(0, 0, 0, 0.1);
// background-color: rgba(0, 0, 0, 0.1);
}
.operate {
position: absolute;
top: 23px;
right: 0;
width: 100px;
width: 80px;
background-color: rgba(242, 242, 242, 1);
border-radius: 8px;
padding: 5px;
@@ -111,17 +111,17 @@
.item {
text-align: center;
font-size: 18px;
font-size: 14px;
color: #333333;
padding: 14px 0;
cursor: pointer;
&:first-of-type {
padding-top: 24px;
padding-top: 14px;
}
&:last-of-type {
padding-bottom: 24px;
padding-top: 14px;
}
&:not(:last-of-type) {
@@ -293,6 +293,12 @@
width: 100px;
height: 100px;
margin-bottom: 4px;
.load {
width: 50px;
height: 50px;
animation: loadingRotate 1s linear infinite;
}
}
.text {
@@ -366,6 +372,12 @@
}
.sidebar-box {
&.fixed {
position: fixed;
right: calc((100% - 1200px) / 2);
bottom: 10px;
}
.adv {
width: 291px;
height: 220px;
@@ -647,10 +659,12 @@
.item {
height: 65px;
padding: 0 35px;
cursor: pointer;
&:not(:last-child) {
border-bottom: 1px solid #f2f2f2;
}
.serial {
font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
font-weight: 700;
@@ -708,14 +722,14 @@
.answer-discuss .input-box {
background-color: #f6f6f6;
border-radius: 10px;
padding-top: 11px;
padding-top: 20px;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.answer-discuss .input-box .top {
padding: 0 14px;
padding: 0 20px;
position: relative;
}
@@ -729,8 +743,8 @@
}
.answer-discuss .input-box .top .avatar {
width: 24px;
height: 24px;
width: 30px;
height: 30px;
border-radius: 50%;
display: block;
margin-right: 10px;
@@ -742,6 +756,7 @@
outline: none;
background-color: transparent;
min-height: 40px;
padding-top: 5px;
padding-bottom: 11px;
resize: none;
}
@@ -794,14 +809,14 @@
}
.answer-discuss .input-box .bottom {
height: 52px;
padding: 0 14px;
// height: 52px;
padding: 0 20px;
justify-content: flex-end;
}
.answer-discuss .input-box .bottom .operate .item {
display: inline-flex;
margin-right: 20px;
margin-right: 25px;
position: relative;
z-index: 1;
}
@@ -824,8 +839,8 @@
}
.answer-discuss .input-box .bottom .operate .item .icon {
width: 16px;
height: 16px;
width: 20px;
height: 20px;
cursor: pointer;
}

2
css/edit.css
View File

@@ -173,6 +173,8 @@
padding: 36px 36px 20px;
white-space: break-spaces;
position: relative;
max-height: 80vh;
overflow: auto;
}
#edit .edit-container .content-input.empty:before {
content: "输入正文";

2
css/edit.less
View File

@@ -193,6 +193,8 @@
padding: 36px 36px 20px;
white-space: break-spaces;
position: relative;
max-height: 80vh;
overflow: auto;
&.empty:before {
content: "输入正文";

2
css/homepage-other.css
View File

@@ -94,7 +94,7 @@
color: #555555;
cursor: pointer;
}
#homepage-other .matter .card-user .btn-area .item:not(:last-of-type) {
#homepage-other .matter .card-user .btn-area .item:not(:last-child) {
margin-bottom: 15px;
}
#homepage-other .matter .card-user .btn-area .item.msg {

2
css/homepage-other.less
View File

@@ -105,7 +105,7 @@
color: #555555;
cursor: pointer;
&:not(:last-of-type) {
&:not(:last-child) {
margin-bottom: 15px;
}

14
css/index.css
View File

@@ -73,7 +73,7 @@
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
font-size: 14px;
color: #7f7f7f;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people {
@@ -469,6 +469,9 @@
#appIndex .admission .admission-list .admission-item:not(:nth-last-child(-n + 4)) {
margin-bottom: 14px;
}
#appIndex .matter {
align-items: flex-start;
}
#appIndex .matter .matter-content {
margin-right: 12px;
}
@@ -520,14 +523,19 @@
#appIndex .matter .matter-content .item-box {
margin-bottom: 12px;
}
#appIndex .matter .sidebar .adv {
#appIndex .matter .sidebar.fixed {
position: fixed;
right: calc((100% - 1200px) / 2);
bottom: 10px;
}
#appIndex .matter .sidebar .ad-item {
display: block;
width: 291px;
height: 220px;
margin-bottom: 12px;
cursor: pointer;
}
#appIndex .matter .sidebar .adv .adv-icon {
#appIndex .matter .sidebar .ad-item img {
width: 291px;
height: 220px;
border-radius: 10px;

14
css/index.less
View File

@@ -84,7 +84,7 @@
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
font-size: 14px;
color: #7f7f7f;
}
@@ -561,6 +561,8 @@
}
.matter {
align-items: flex-start;
.matter-content {
margin-right: 12px;
.forum-sections-list {
@@ -622,13 +624,19 @@
}
.sidebar {
.adv {
&.fixed {
position: fixed;
right: calc((100% - 1200px) / 2);
bottom: 10px;
}
.ad-item {
display: block;
width: 291px;
height: 220px;
margin-bottom: 12px;
cursor: pointer;
.adv-icon {
img {
width: 291px;
height: 220px;
border-radius: 10px;

23
css/public.css
View File

@@ -5,6 +5,7 @@
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
word-break: break-word;
}
a {
text-decoration: none;
@@ -167,13 +168,12 @@ body {
width: 100vw;
height: 100vh;
z-index: 2;
background-color: rgba(0, 0, 0, 0.1);
}
.item-box .item-head .operate {
position: absolute;
top: 23px;
right: 0;
width: 100px;
width: 80px;
background-color: #f2f2f2;
border-radius: 8px;
padding: 5px;
@@ -193,16 +193,16 @@ body {
}
.item-box .item-head .operate .item {
text-align: center;
font-size: 18px;
font-size: 14px;
color: #333333;
padding: 14px 0;
cursor: pointer;
}
.item-box .item-head .operate .item:first-of-type {
padding-top: 24px;
padding-top: 14px;
}
.item-box .item-head .operate .item:last-of-type {
padding-bottom: 24px;
padding-top: 14px;
}
.item-box .item-head .operate .item:not(:last-of-type) {
border-bottom: 1px dotted #d7d7d7;
@@ -392,6 +392,7 @@ body {
color: #000000;
line-height: 36px;
margin-bottom: 7px;
display: block;
}
.item-box.item-vote .message {
font-size: 14px;
@@ -671,6 +672,11 @@ body {
height: 100px;
margin-bottom: 4px;
}
.item-box .bottom .bottom-item .share-box .share-item .QRcode-box .QRcode .load {
width: 50px;
height: 50px;
animation: loadingRotate 1s linear infinite;
}
.item-box .bottom .bottom-item .share-box .share-item .QRcode-box .text {
color: #555555;
font-size: 14px;
@@ -1397,6 +1403,12 @@ body {
.offer-side-box.side-box .box {
width: 271px;
}
.thread-side-box.side-box .box,
.offer-side-box.side-box .box,
.interviewexperience-side-box .box,
.vote-side-box.side-box .box {
border-radius: 8px;
}
.head-navigation {
margin-bottom: 20px;
}
@@ -1445,6 +1457,7 @@ body {
outline: none;
height: 100%;
background-color: transparent;
font-size: 14px;
}
.head-top .input-box .icon {
width: 18px;

27
css/public.less
View File

@@ -5,6 +5,7 @@
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
word-break: break-word;
}
a {
@@ -195,14 +196,14 @@ body {
width: 100vw;
height: 100vh;
z-index: 2;
background-color: rgba(0, 0, 0, 0.1);
// background-color: rgba(0, 0, 0, 0.1);
}
.operate {
position: absolute;
top: 23px;
right: 0;
width: 100px;
width: 80px;
background-color: rgba(242, 242, 242, 1);
border-radius: 8px;
padding: 5px;
@@ -223,17 +224,17 @@ body {
.item {
text-align: center;
font-size: 18px;
font-size: 14px;
color: #333333;
padding: 14px 0;
cursor: pointer;
&:first-of-type {
padding-top: 24px;
padding-top: 14px;
}
&:last-of-type {
padding-bottom: 24px;
padding-top: 14px;
}
&:not(:last-of-type) {
@@ -466,6 +467,7 @@ body {
color: #000000;
line-height: 36px;
margin-bottom: 7px;
display: block;
}
.message {
@@ -801,6 +803,12 @@ body {
width: 100px;
height: 100px;
margin-bottom: 4px;
.load {
width: 50px;
height: 50px;
animation: loadingRotate 1s linear infinite;
}
}
.text {
@@ -1668,6 +1676,13 @@ body {
width: 271px;
}
.thread-side-box.side-box .box,
.offer-side-box.side-box .box,
.interviewexperience-side-box .box,
.vote-side-box.side-box .box {
border-radius: 8px;
}
.head-navigation {
margin-bottom: 20px;
.icon {
@@ -1722,6 +1737,7 @@ body {
outline: none;
height: 100%;
background-color: transparent;
font-size: 14px;
}
.icon {
@@ -1998,6 +2014,7 @@ td {
}
}
// 多个调用
@keyframes loadingRotate {
0% {
transform: rotate(0deg);

8
css/search-tag.css
View File

@@ -57,6 +57,9 @@
color: #000000;
margin: 0 10px;
}
#search-tag .matter {
align-items: flex-start;
}
#search-tag .matter .matter-content {
margin-right: 12px;
}
@@ -112,3 +115,8 @@
#search-tag .matter .sidebar-box {
width: 291px;
}
#search-tag .matter .sidebar-box.fixed {
position: fixed;
right: calc((100% - 1200px) / 2);
bottom: 10px;
}

8
css/search-tag.less
View File

@@ -67,6 +67,8 @@
}
.matter {
align-items: flex-start;
.matter-content {
margin-right: 12px;
@@ -133,6 +135,12 @@
.sidebar-box {
width: 291px;
&.fixed {
position: fixed;
right: calc((100% - 1200px) / 2);
bottom: 10px;
}
}
}
}

8
css/search.css
View File

@@ -61,6 +61,9 @@
color: #000000;
margin: 0 10px;
}
#search .matter {
align-items: flex-start;
}
#search .matter .matter-content {
margin-right: 12px;
}
@@ -116,3 +119,8 @@
#search .matter .sidebar-box {
width: 291px;
}
#search .matter .sidebar-box.fixed {
position: fixed;
right: calc((100% - 1200px) / 2);
bottom: 10px;
}

8
css/search.less
View File

@@ -71,6 +71,8 @@
}
.matter {
align-items: flex-start;
.matter-content {
margin-right: 12px;
@@ -137,6 +139,12 @@
.sidebar-box {
width: 291px;
&.fixed {
position: fixed;
right: calc((100% - 1200px) / 2);
bottom: 10px;
}
}
}
}

27
css/section.css
View File

@@ -12,6 +12,11 @@
border-radius: 10px;
margin-right: 15px;
}
#sectionIndex .matter .sidebar.fixed {
position: fixed;
right: calc((100% - 1200px) / 2);
bottom: 10px;
}
#sectionIndex .matter .sidebar .title {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
@@ -188,6 +193,9 @@
height: 16px;
margin-right: 3px;
}
#sectionIndex .matter .matter-content .details-box {
align-items: flex-start;
}
#sectionIndex .matter .matter-content .details-box .content-box {
margin-right: 12px;
}
@@ -284,7 +292,7 @@
line-height: 36px;
font-size: 14px;
color: #333333;
padding: 0 21px;
padding: 0 10px;
margin-right: 10px;
margin-bottom: 14px;
cursor: pointer;
@@ -313,30 +321,35 @@
color: #7f7f7f;
margin-top: 10px;
}
#sectionIndex .matter .matter-content .details-box .adv {
#sectionIndex .matter .matter-content .details-box .sidebar-box.fixed {
position: fixed;
right: calc((100% - 1200px) / 2);
bottom: 10px;
}
#sectionIndex .matter .matter-content .details-box .sidebar-box .adv {
display: block;
width: 291px;
height: 220px;
margin-bottom: 12px;
cursor: pointer;
}
#sectionIndex .matter .matter-content .details-box .adv .adv-icon {
#sectionIndex .matter .matter-content .details-box .sidebar-box .adv .adv-icon {
width: 291px;
height: 220px;
border-radius: 10px;
}
#sectionIndex .matter .matter-content .details-box .side-box {
#sectionIndex .matter .matter-content .details-box .sidebar-box .side-box {
padding: 17px 10px 10px;
margin-bottom: 12px;
width: 291px;
border-radius: 10px;
}
#sectionIndex .matter .matter-content .details-box .side-box.offer-side-box {
#sectionIndex .matter .matter-content .details-box .sidebar-box .side-box.offer-side-box {
background: linear-gradient(154.12772232deg, #c7edf2 1%, #d3f2f5 100%);
}
#sectionIndex .matter .matter-content .details-box .side-box.vote-side-box {
#sectionIndex .matter .matter-content .details-box .sidebar-box .side-box.vote-side-box {
background: linear-gradient(151.77562139deg, #c6f4d9 1%, #d9f7e5 100%);
}
#sectionIndex .matter .matter-content .details-box .side-box.interviewexperience-side-box {
#sectionIndex .matter .matter-content .details-box .sidebar-box .side-box.interviewexperience-side-box {
background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%);
}

76
css/section.less
View File

@@ -11,6 +11,12 @@
border-radius: 10px;
margin-right: 15px;
&.fixed {
position: fixed;
right: calc((100% - 1200px) / 2);
bottom: 10px;
}
.title {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
@@ -115,7 +121,7 @@
margin-bottom: 28px;
width: fit-content;
width: 100%;
.item {
padding: 12px 0;
position: relative;
@@ -214,6 +220,8 @@
}
.details-box {
align-items: flex-start;
.content-box {
margin-right: 12px;
@@ -318,7 +326,7 @@
line-height: 36px;
font-size: 14px;
color: #333333;
padding: 0 21px;
padding: 0 10px;
margin-right: 10px;
margin-bottom: 14px;
cursor: pointer;
@@ -363,39 +371,47 @@
// border-radius: 10px;
// }
.adv {
display: block;
width: 291px;
height: 220px;
margin-bottom: 12px;
cursor: pointer;
.adv-icon {
.sidebar-box {
&.fixed {
position: fixed;
right: calc((100% - 1200px) / 2);
bottom: 10px;
}
.adv {
display: block;
width: 291px;
height: 220px;
margin-bottom: 12px;
cursor: pointer;
.adv-icon {
width: 291px;
height: 220px;
border-radius: 10px;
}
}
// .sidebar {
.side-box {
width: 291px;
padding: 17px 10px 10px;
margin-bottom: 12px;
width: 291px;
border-radius: 10px;
&.offer-side-box {
background: linear-gradient(154.12772232deg, #c7edf2 1%, #d3f2f5 100%);
}
&.vote-side-box {
background: linear-gradient(151.77562139deg, #c6f4d9 1%, #d9f7e5 100%);
}
&.interviewexperience-side-box {
background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%);
}
}
// }
}
// .sidebar {
.side-box {
width: 291px;
padding: 17px 10px 10px;
margin-bottom: 12px;
width: 291px;
border-radius: 10px;
&.offer-side-box {
background: linear-gradient(154.12772232deg, #c7edf2 1%, #d3f2f5 100%);
}
&.vote-side-box {
background: linear-gradient(151.77562139deg, #c6f4d9 1%, #d9f7e5 100%);
}
&.interviewexperience-side-box {
background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%);
}
}
// }
}
}
}