feat(签到组件): 添加签到功能及相关样式和逻辑

- 新增签到组件HTML模板和CSS样式
- 实现签到功能的核心逻辑和交互
- 添加签到日历和用户列表展示
- 支持签到规则查看和签到操作
- 集成API接口获取签到数据和提交签到

component/sign-in/sign-in.txt

@@ -0,0 +1,659 @@
+<style>
+  .flexflex {
+    display: flex;
+  }
+
+  .flexcenter {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .flexjcenter {
+    display: flex;
+    justify-content: center;
+  }
+
+  .flexacenter {
+    display: flex;
+    align-items: center;
+  }
+
+  .flexcolumn {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .flex1 {
+    flex: 1;
+  }
+
+  .signInBox-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 10005;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  .signInBox-mask * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    word-break: break-word;
+  }
+
+  .signInBox-mask a {
+    text-decoration: none;
+    color: unset;
+  }
+
+  .signInBox-mask .signInBox {
+    width: 1060px;
+    background-color: #fff;
+    border-radius: 20px;
+    position: relative;
+    filter: drop-shadow(0 -5px 0 #f7c308);
+  }
+
+  .signInBox-mask .signInBox .signInBox-head {
+    position: relative;
+    height: 64px;
+    border-bottom: 1px dotted #d7d7d7;
+  }
+
+  .signInBox-mask .signInBox .signInBox-head .header-bi {
+    width: 83px;
+    height: 99px;
+    position: absolute;
+    top: -61px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .signInBox-mask .signInBox .signInBox-head .header-halo {
+    width: 160px;
+    height: 154px;
+    position: absolute;
+    top: -89px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .signInBox-mask .signInBox .signInBox-head .header-cross {
+    width: 18px;
+    height: 18px;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    cursor: pointer;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content {
+    align-items: flex-start;
+    height: 595px;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box {
+    width: 538px;
+    padding: 20px 30px 40px;
+    border-right: 1px dotted #d7d7d7;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .content-header {
+    font-size: 15px;
+    color: #555555;
+    line-height: 40px;
+    margin-bottom: 16px;
+    position: relative;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .bi-img {
+    width: 25px;
+    height: 30px;
+    margin-right: 7px;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .bi-value {
+    font-family: Arial-Black, "Arial Black", sans-serif;
+    font-weight: 900;
+    font-style: normal;
+    font-size: 28px;
+    color: #000000;
+    margin-right: 7px;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .bi-text {
+    font-size: 15px;
+    color: #555555;
+    line-height: normal;
+    margin-top: 8px;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .bi-rule {
+    margin-left: auto;
+    cursor: pointer;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring {
+    position: absolute;
+    left: calc(100% + 31px);
+    top: -21px;
+    z-index: 1;
+    width: 522px;
+    height: 594px;
+    background-color: #fdda55;
+    padding: 20px;
+    border-radius: 0 0 20px 0;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring::after {
+    content: "";
+    position: absolute;
+    top: 26px;
+    left: -11px;
+    width: 0;
+    height: 0;
+    transform: translateX(-50%);
+    border: 12px solid #000;
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+    border-left-color: transparent;
+    border-right-color: #fdda55;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box {
+    background-color: #fff;
+    -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.07058824);
+    -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.07058824);
+    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.07058824);
+    border-radius: 20px;
+    height: 100%;
+    flex-direction: column;
+    padding-bottom: 62px;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-header {
+    font-weight: 650;
+    font-size: 24px;
+    color: #ab8705;
+    text-align: center;
+    font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+    padding-top: 37px;
+    position: relative;
+    z-index: 1;
+    margin-bottom: 14px;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-header::after {
+    content: "";
+    display: block;
+    position: absolute;
+    bottom: -4px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 120px;
+    height: 22px;
+    background-color: #fdeeb7;
+    border-radius: 219px;
+    z-index: -1;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list {
+    flex-direction: column;
+    margin: 0 23px;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list .rule-item .rule-item-icon {
+    width: 52px;
+    height: 52px;
+    background-color: #f6f6f6;
+    border: 1px solid #ebebeb;
+    border-radius: 20px;
+    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.11764706);
+    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.11764706);
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.11764706);
+    margin-right: 30px;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list .rule-item .rule-item-img {
+    width: 30px;
+    height: 36px;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list .rule-item .rule-item-text {
+    color: #333;
+    line-height: 28px;
+    font-size: 16px;
+    padding: 40px 0;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list .rule-item:not(:last-of-type) .rule-item-text {
+    border-bottom: 1px dotted #ebebeb;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-close {
+    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 15px;
+    color: #555555;
+    text-decoration: underline;
+    margin: 0 auto;
+    line-height: normal;
+    width: max-content;
+    cursor: pointer;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box {
+    width: 477px;
+    height: 479px;
+    background-color: #fbfbfb;
+    border-radius: 12px;
+    flex-direction: column;
+    padding: 38px 23px 0;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .sign-in-text {
+    color: #555555;
+    line-height: 28px;
+    font-size: 14px;
+    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+    margin-bottom: 21px;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .sign-in-text .sign-in-value {
+    font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+    font-weight: 650;
+    color: #000000;
+    margin: 0 5px;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar {
+    margin: 0 0 14px;
+    flex-wrap: wrap;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-bottom: 10px;
+    font-size: 17px;
+    color: #aaaaaa;
+    position: relative;
+    box-sizing: border-box;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item:not(:nth-child(7n)) {
+    margin-right: 25px;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item.formerly {
+    background-color: #f6f6f6;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item.already {
+    background-color: #fdeeb7;
+    color: #deae07;
+    border: none;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item.already .yellow-tick {
+    width: 14px;
+    height: 14px;
+    display: block;
+    position: absolute;
+    top: -2px;
+    right: -2px;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item .yellow-tick {
+    display: none;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item.today {
+    border: 1px solid #deae07;
+    color: #deae07;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .sign-in-btn {
+    height: 48px;
+    border-radius: 219px;
+    background-color: #f7c308;
+    color: #fff;
+    font-size: 20px;
+    cursor: pointer;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box {
+    margin: 0 15px;
+    border-radius: 20px;
+    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+    font-weight: 400;
+    color: #555555;
+    font-size: 15px;
+    flex-direction: column;
+    height: inherit;
+    overflow: auto;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-header {
+    padding: 24px 30px 9px;
+    font-size: 14px;
+    line-height: 28px;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-header .sign-in-header-value {
+    font-weight: 650;
+    color: #000000;
+    margin: 0 5px;
+    border-bottom: 1px dotted #ebebeb;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item {
+    padding: 11px 0 0 30px;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item:not(:last-of-type) .sign-in-info {
+    border-bottom: 1px dotted #ebebeb;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-index {
+    color: #aaaaaa;
+    font-size: 15px;
+    width: 40px;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-avatar {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    margin-right: 10px;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-info {
+    padding-bottom: 9px;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-info:not(:last-of-type) {
+    border-bottom: 1px dotted #ebebeb;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-info .sign-in-info-left {
+    flex-direction: column;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-info .sign-in-name {
+    color: #555555;
+    font-size: 14px;
+    margin-bottom: 3px;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-info .sign-in-name .sign-in-my {
+    margin-left: 10px;
+    width: 20px;
+    height: 20px;
+    background-color: #f0f2f5;
+    border: 1px solid #d7d7d7;
+    border-radius: 5px;
+    font-size: 12px;
+    color: #7f7f7f;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-info .sign-in-time {
+    color: #aaaaaa;
+    font-size: 13px;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-value {
+    border-radius: 50%;
+    margin-right: 20px;
+    width: 40px;
+    height: 40px;
+    background-color: #fdeeb7;
+    font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 16px;
+    color: #deae07;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-finish {
+    font-size: 13px;
+    color: #d7d7d7;
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-more {
+    color: #333333;
+    font-size: 14px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    cursor: pointer;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-more .sign-in-more-icon {
+    width: 14px;
+    height: 14px;
+    margin-left: 6px;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .discuss-list-no {
+    flex-direction: column;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .discuss-list-no .empty-icon {
+    width: 101px;
+    height: 120px;
+    margin-bottom: 15px;
+  }
+
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .discuss-list-no .discuss-list-no-text {
+    font-size: 12px;
+    color: #555555;
+    line-height: 22px;
+  }
+
+  .signInBox-mask .succeed-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+  }
+
+  .signInBox-mask .succeed-mask .succeed-box {
+    width: 263px;
+    background-color: rgba(0, 0, 0, 0.70588235);
+    border-radius: 43px;
+    padding-bottom: 29px;
+    position: relative;
+    z-index: 1;
+    animation: succeedShow 0.3s, succeedHide 0.3s;
+    animation-delay: 0s, 1.8s;
+  }
+
+  .signInBox-mask .succeed-mask .succeed-box .succeed-icon {
+    width: 100px;
+    height: 100px;
+    background-color: #fbf7e9;
+    border: 1px solid #fdda55;
+    border-radius: 10px;
+    -moz-box-shadow: 3px 3px 5px #fdeeb7;
+    -webkit-box-shadow: 3px 3px 5px #fdeeb7;
+    box-shadow: 3px 3px 5px #fdeeb7;
+    flex-direction: column;
+    position: relative;
+    margin-top: -48px;
+    margin-bottom: 31px;
+  }
+
+  .signInBox-mask .succeed-mask .succeed-box .succeed-icon .succeed-icon-bj {
+    width: 220px;
+    height: 211px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: -1;
+  }
+
+  .signInBox-mask .succeed-mask .succeed-box .succeed-icon .succeed-icon-header-dot {
+    width: 6px;
+    height: 16px;
+    background-color: #f7c308;
+    border-radius: 24px;
+    position: absolute;
+    top: -6px;
+  }
+
+  .signInBox-mask .succeed-mask .succeed-box .succeed-icon .succeed-icon-header-dot-left {
+    left: 20px;
+  }
+
+  .signInBox-mask .succeed-mask .succeed-box .succeed-icon .succeed-icon-header-dot-right {
+    left: 74px;
+  }
+
+  .signInBox-mask .succeed-mask .succeed-box .succeed-icon .succeed-icon-header {
+    height: 24px;
+    background-color: rgba(253, 223, 109, 0.77647059);
+    border-radius: 10px 10px 0 0;
+  }
+
+  .signInBox-mask .succeed-mask .succeed-box .succeed-icon .succeed-icon-dot {
+    flex-wrap: wrap;
+    padding-top: 16px;
+    padding-left: 15px;
+  }
+
+  .signInBox-mask .succeed-mask .succeed-box .succeed-icon .succeed-icon-dot .succeed-icon-dot-item {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: #f7c308;
+    margin-right: 10px;
+    margin-bottom: 10px;
+  }
+
+  .signInBox-mask .succeed-mask .succeed-box .succeed-icon .yellow-tick-box {
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    right: -10px;
+    bottom: -10px;
+    z-index: 1;
+  }
+
+  .signInBox-mask .succeed-mask .succeed-box .succeed-icon .yellow-tick-box .yellow-tick-circle {
+    position: absolute;
+    left: -5px;
+    top: -5px;
+    width: 50px;
+    height: 50px;
+    z-index: -1;
+  }
+
+  .signInBox-mask .succeed-mask .succeed-box .succeed-icon .yellow-tick-box .yellow-tick-faint-yellow {
+    width: 19px;
+    height: 16px;
+  }
+
+  .signInBox-mask .succeed-mask .succeed-box .succeed-award-list {
+    color: #fff;
+    font-size: 16px;
+    line-height: 28px;
+  }
+
+  .signInBox-mask .succeed-mask .succeed-box .succeed-award-list .succeed-award-item:not(:last-of-type) {
+    margin-bottom: 12px;
+  }
+
+  .signInBox-mask .succeed-mask .succeed-box .succeed-award-list .succeed-award-item .succeed-award-name {
+    margin-right: 9px;
+  }
+
+  .signInBox-mask .succeed-mask .succeed-box .succeed-award-list .succeed-award-item .succeed-award-value {
+    height: 22px;
+    padding: 0 13.5px;
+    background-color: #f6f6f6;
+    border-radius: 20px;
+    font-size: 18px;
+    letter-spacing: 1px;
+    font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+    color: #deae07;
+    font-weight: 650;
+  }
+
+  @keyframes succeedShow {
+    0% {
+      transform: scale(0);
+    }
+
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes succeedHide {
+    0% {
+      transform: scale(1);
+    }
+
+    100% {
+      transform: scale(0);
+      display: none;
+    }
+  }
+</style>
+<div class="signInBox-mask flexcenter">
+  <div class="signInBox">
+    <div class="signInBox-head">
+      <img class="header-halo" src="/img/halo-icon.png">
+      <img class="header-bi" src="/img/coin-icon.png">
+      <img class="header-cross" src="/img/cross-icon.png">
+    </div>
+    <div class="signInBox-content flexflex">
+      <div class="left-box">
+        <div class="content-header flexacenter">
+          <img class="bi-img" src="/img/coin-icon.png">
+          <div class="bi-value" data-field="integral">0</div>
+          <div class="bi-text">寄托币</div>
+          <div class="bi-rule">签到规则</div>
+          <div class="outer-ring" hidden>
+            <div class="rule-box flexflex">
+              <div class="rule-header">签到规则</div>
+              <div class="rule-list flexflex" data-list="tips"></div>
+              <div class="flex1"></div>
+              <div class="rule-close">关闭</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="calendar-box flexflex">
+          <div class="sign-in-text">本月已签到 <span class="sign-in-value" data-field="signnum">0</span> 天，共领 <span class="sign-in-value" data-field="signreward">0</span> 寄托币</div>
+          <div class="calendar flexflex" data-list="calendar"></div>
+          <div class="sign-in-btn flexcenter" data-action="sign">立即签到</div>
+        </div>
+      </div>
+
+      <div class="sign-in-box flex1 flexflex">
+        <div class="sign-in-header flexflex">今日已签到 <div class="sign-in-header-value" data-field="todaycount">0</div>人</div>
+        <div class="discuss-list-no flexcenter flex1" hidden>
+          <img class="empty-icon" src="https://app.gter.net/image/miniApp/offer/empty-icon.png">
+          <div class="discuss-list-no-text">暂无数据</div>
+        </div>
+        <div class="sign-in-list" data-list="users"></div>
+        <div class="sign-in-finish flexcenter" hidden>- End -</div>
+        <div class="sign-in-more flexcenter" hidden>更多 <img class="sign-in-more-icon" src="https://app.gter.net/image/miniApp/offer/arrows-circle-black.png"></div>
+      </div>
+    </div>
+  </div>
+</div>

css/signIn.css

@@ -131,6 +131,20 @@ body {
   padding: 20px;
   border-radius: 0 0 20px 0;
 }
+.signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring::after {
+  content: "";
+  position: absolute;
+  top: 26px;
+  left: -11px;
+  width: 0;
+  height: 0;
+  transform: translateX(-50%);
+  border: 12px solid #000;
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  border-right-color: #fdda55;
+}
 .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box {
   background-color: #fff;
   -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.07058824);

css/signIn.less

@@ -149,6 +149,21 @@ body {
                         padding: 20px;
                         border-radius: 0 0 20px 0;
 
+                        &::after {
+                            content: "";
+                            position: absolute;
+                            top: 26px;
+                            left: -11px;
+                            width: 0;
+                            height: 0;
+                            transform: translateX(-50%);
+                            border: 12px solid #000;
+                            border-top-color: transparent;
+                            border-bottom-color: transparent;
+                            border-left-color: transparent;
+                            border-right-color: #fdda55;
+                        }
+
                         .rule-box {
                             background-color: #fff;
                             -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.0705882352941176);

details.html

@@ -17,7 +17,7 @@
 
 <body>
     <div class="container" id="details" v-cloak>
-    <div class="templateValue" ref="uniqidRef">fi88yrHXiDSj</div>
+        <div class="templateValue" ref="uniqidRef">fi88yrHXiDSj</div>
 
         <div class="head-top flexacenter">
             <img class="logo" src="https://oss.gter.net/logo" alt="" />
@@ -483,6 +483,7 @@
         <like v-if="isLikeGif"></like>
     </div>
 
+    <script src="/component/sign-in/sign-in.js"></script>
     <script src="./js/axios.min.js"></script>
     <script src="./js/public.js"></script>
     <script type="module" src="./js/details.js"></script>

js/details.js

@@ -15,6 +15,9 @@ const appSectionIndex = createApp({
     setup() {
         onMounted(() => {
             getUserInfoWin();
+            setTimeout(() => {
+                signInBox._init();
+            }, 3000);
         });
 
         let isLogin = ref(false);
@@ -176,8 +179,8 @@ const appSectionIndex = createApp({
 
             let html = formattedText;
 
-            html = html.replaceAll('<b>', "[b]");
-            html = html.replaceAll('</b>', "[/b]");
+            html = html.replaceAll("<b>", "[b]");
+            html = html.replaceAll("</b>", "[/b]");
 
             // 1. 还原换行符为<br>标签
             html = html.replace(/\n/g, "<br>");

js/save.js

@@ -32,6 +32,9 @@ const watchList = {
     // 监听 item-project.txt，同步到 item-project.js
     "../component/item-project/item-project.txt": "../component/item-project/item-project.js",
 
+    // 监听 sign-in.txt，同步到 sign-in.js
+    "../component/sign-in/sign-in.txt": "../component/sign-in/sign-in.js",
+
     // 监听 bi.txt，同步到 bi.js
     "../component/bi/bi.txt": "../component/bi/bi.js",
     
@@ -61,8 +64,7 @@ function syncContent(txtPath, jsPath) {
 
         // 匹配 template: `...` 结构，替换反引号内的内容
         const templateRegex = /(template:\s*)(`[^`]*`)/;
-        // 匹配 template.innerHTML = `...` 结构
-        const innerHTMLRegex = /(template\.innerHTML\s*=\s*)(`[^`]*`)/;
+        const innerHTMLRegex = /((?:[A-Za-z_\$][\w\$]*Template|template)\.innerHTML\s*=\s*)(`[^`]*`)/;
         
         if (templateRegex.test(jsContent)) {
             jsContent = jsContent.replace(templateRegex, `$1\`${txtContent}\``);