refactor(components): 使用defineAsyncComponent优化异步组件加载

fix(public.js): 添加getScriptParameter函数并处理请求参数
style(index.html): 移除多余空行和注释
perf(bi.js): 移除冗余ajax方法并优化请求参数处理
docs(sign-in.txt): 调整样式和响应式布局

component/bi/bi.js

@@ -194,8 +194,18 @@ class BiCard extends HTMLElement {
         console.log(`用户卡片 ${this.getAttribute("username")} 已卸载`);
     }
 
+    getScriptParameter(paramName) {
+        const currentScript = document.currentScript;
+        if (currentScript && currentScript.src) {
+            const url = new URL(currentScript.src, window.location.origin);
+            return url.searchParams.get(paramName);
+        }
+        return null;
+    }
+
     fetchData(url, data) {
         return new Promise((resolve, reject) => {
+            if (data) data["v"] = this.getScriptParameter("v") || "v2";
             var xhr = new XMLHttpRequest();
             xhr.responseType = "json";
             xhr.withCredentials = true;
@@ -218,6 +228,9 @@ class BiCard extends HTMLElement {
 
     fetchGetData(url) {
         return new Promise((resolve, reject) => {
+            const paramSymbol = url.includes("?") ? "&" : "?";
+            url = `${url}${paramSymbol}v=${this.getScriptParameter("v") || "v2"}`;
+
             const xhr = new XMLHttpRequest();
             xhr.withCredentials = true;
 
@@ -234,64 +247,6 @@ class BiCard extends HTMLElement {
             xhr.send();
         });
     }
-
-    $ajax(url) {
-        var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-        return new Promise(function (resolve, reject) {
-            axios
-                .post(url, data, {
-                    emulateJSON: true,
-                    withCredentials: true,
-                })
-                .then(function (res) {
-                    var data = typeof res.data == "string" ? JSON.parse(res.data) : res.data;
-
-                    if (data.code == 401) {
-                        // 需要登录
-                        showWindow("login", "https://passport.gter.net/login/ajax", "get", -1, {
-                            cover: true,
-                        });
-                        reject();
-                    }
-                    resolve(data);
-                })
-                .catch((err) => {
-                    if (err.response.status == 401)
-                        showWindow("login", "https://passport.gter.net/login/ajax", "get", -1, {
-                            cover: true,
-                        });
-                });
-        });
-    }
-
-    $ajaxget(url) {
-        var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-        return new Promise(function (resolve, reject) {
-            axios
-                .get(
-                    url,
-                    {},
-                    {
-                        emulateJSON: true,
-                        withCredentials: true,
-                    }
-                )
-                .then(function (res) {
-                    var data = typeof res.data == "string" ? JSON.parse(res.data) : res.data;
-                    if (data.code == 401) {
-                        // 需要登录
-                        showWindow("login", "https://passport.gter.net/login/ajax", "get", -1, {
-                            cover: true,
-                        });
-                        reject();
-                    }
-                    resolve(data);
-                })
-                .catch((error) => {
-                    reject(error);
-                });
-        });
-    }
 }
 
 // 3. 注册组件（确保只注册一次）

component/head-top/head-top.js

@@ -19,6 +19,7 @@ export const headTop = defineComponent({
         let isPaused = ref(false); // 是否暂停轮播
 
         onMounted(() => {
+            console.log("getScriptParameter", getScriptParameter("v"));
             getHistorySearch();
             // 写一个函数 ，判断本地缓存有没有 wConfig 并判断 是否过一天 如果过了一天 则更新 wConfig
             checkWConfig();

component/item-bottom/item-bottom.js

@@ -1,8 +1,8 @@
 // my-component.js
 // 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
-const { defineComponent, ref, inject } = Vue;
+const { defineComponent, ref, inject, defineAsyncComponent } = Vue;
 
-const { like } = await import(withVer("../like/like.js"));
+const like = defineAsyncComponent(() => import(withVer("../like/like.js")).then(m => m.like));
 
 // 定义组件（直接使用模板）
 export const itemBottom = defineComponent({
@@ -122,7 +122,7 @@ export const itemBottom = defineComponent({
                 const token = item.value.token || "";
                 ajax(`/v2/api/forum/postTopicShare`, { token });
 
-            if (!shareBoxRef.value) return
+                if (!shareBoxRef.value) return;
 
                 // 1. 获取元素相对于可视窗口的位置信息
                 const rect = shareBoxRef.value.getBoundingClientRect();
@@ -132,7 +132,7 @@ export const itemBottom = defineComponent({
 
                 // 3. 计算距离：可视窗口宽度 - 元素右边缘到左边缘的距离
                 const distance = clientWidth - rect.right;
-            console.log('distance', distance);
+                console.log("distance", distance);
 
                 if (distance < 140) isright.value = true;
                 else isright.value = false;

component/item-forum/item-forum.js

@@ -1,9 +1,11 @@
 // my-component.js
 // 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
-const { defineComponent, ref } = Vue;
+const { defineComponent, ref, defineAsyncComponent } = Vue;
+const itemBottom = defineAsyncComponent(() => import(withVer("../item-bottom/item-bottom.js")).then((m) => m.itemBottom));
+const itemHead = defineAsyncComponent(() => import(withVer("../item-head/item-head.js")).then((m) => m.itemHead));
 
-const { itemBottom } = await import(withVer("../item-bottom/item-bottom.js"));
+// const { itemBottom } = await import(withVer("../item-bottom/item-bottom.js"));
-const { itemHead } = await import(withVer("../item-head/item-head.js"));
+// const { itemHead } = await import(withVer("../item-head/item-head.js"));
 
 // 定义组件（直接使用模板）
 export const itemForum = defineComponent({
@@ -27,7 +29,7 @@ export const itemForum = defineComponent({
 
         let item = ref({ ...res });
 
-        item.value['url'] = '/details/' + item.value.uniqid;
+        item.value["url"] = "/details/" + item.value.uniqid;
 
         return { item };
     },

component/item-head/item-head.js

@@ -1,8 +1,9 @@
 // my-component.js
 // 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
-const { defineComponent, ref, provide, onMounted, inject } = Vue;
+const { defineComponent, ref, provide, onMounted, inject, defineAsyncComponent } = Vue;
 
-const { report } = await import(withVer("../report/report.js"));
+// const { report } = await import(withVer("../report/report.js"));
+const report = defineAsyncComponent(() => import(withVer("../report/report.js")).then((m) => m.report));
 
 // 定义组件（直接使用模板）
 export const itemHead = defineComponent({

component/item-mj/item-mj.js

@@ -1,9 +1,11 @@
 // my-component.js
 // 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
-const { defineComponent, ref } = Vue;
+const { defineComponent, ref, defineAsyncComponent } = Vue;
 
-const { itemBottom } = await import(withVer("../item-bottom/item-bottom.js"));
+// const { itemBottom } = await import(withVer("../item-bottom/item-bottom.js"));
-const { itemHead } = await import(withVer("../item-head/item-head.js"));
+// const { itemHead } = await import(withVer("../item-head/item-head.js"));
+const itemHead = defineAsyncComponent(() => import(withVer("../item-head/item-head.js")).then((m) => m.itemHead));
+const itemBottom = defineAsyncComponent(() => import(withVer("../item-bottom/item-bottom.js")).then((m) => m.itemHead));
 
 // 定义组件（直接使用模板）
 export const itemMj = defineComponent({
@@ -21,7 +23,7 @@ export const itemMj = defineComponent({
 
     setup(props) {
         let item = ref({ ...props.itemdata });
-        item.value['url'] = '/details/' + item.value.uniqid;
+        item.value["url"] = "/details/" + item.value.uniqid;
         return { item };
     },
 

component/item-offer/item-offer.js

@@ -1,9 +1,9 @@
 // my-component.js
 // 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
-const { defineComponent, ref, provide } = Vue;
+const { defineComponent, ref, provide, defineAsyncComponent } = Vue;
 
-const { itemBottom } = await import(withVer("../item-bottom/item-bottom.js"));
+const itemBottom = defineAsyncComponent(() => import(withVer("../item-bottom/item-bottom.js")).then((m) => m.itemBottom));
-const { itemHead } = await import(withVer("../item-head/item-head.js"));
+const itemHead = defineAsyncComponent(() => import(withVer("../item-head/item-head.js")).then((m) => m.itemHead));
 
 // 定义组件（直接使用模板）
 export const itemOffer = defineComponent({

component/item-summary/item-summary.js

@@ -1,9 +1,9 @@
 // my-component.js
 // 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
-const { defineComponent, ref } = Vue;
+const { defineComponent, ref, defineAsyncComponent } = Vue;
 
-const { itemBottom } = await import(withVer("../item-bottom/item-bottom.js"));
+const itemBottom = defineAsyncComponent(() => import(withVer("../item-bottom/item-bottom.js")).then((m) => m.itemBottom));
-const { itemHead } = await import(withVer("../item-head/item-head.js"));
+const itemHead = defineAsyncComponent(() => import(withVer("../item-head/item-head.js")).then((m) => m.itemHead));
 
 // 定义组件（直接使用模板）
 export const itemSummary = defineComponent({

component/item-tenement/item-tenement.js

@@ -1,9 +1,9 @@
 // my-component.js
 // 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
-const { defineComponent, ref } = Vue;
+const { defineComponent, ref, defineAsyncComponent } = Vue;
 
-const { itemBottom } = await import(withVer("../item-bottom/item-bottom.js"));
+const itemBottom = defineAsyncComponent(() => import(withVer("../item-bottom/item-bottom.js")).then((m) => m.itemBottom));
-const { itemHead } = await import(withVer("../item-head/item-head.js"));
+const itemHead = defineAsyncComponent(() => import(withVer("../item-head/item-head.js")).then((m) => m.itemHead));
 
 // 定义组件（直接使用模板）
 export const itemTenement = defineComponent({

component/item-vote/item-vote.js

@@ -1,9 +1,9 @@
 // my-component.js
 // 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
-const { defineComponent, ref } = Vue;
+const { defineComponent, ref, defineAsyncComponent } = Vue;
 
-const { itemBottom } = await import(withVer("../item-bottom/item-bottom.js"));
+const itemBottom = defineAsyncComponent(() => import(withVer("../item-bottom/item-bottom.js")).then((m) => m.itemBottom));
-const { itemHead } = await import(withVer("../item-head/item-head.js"));
+const itemHead = defineAsyncComponent(() => import(withVer("../item-head/item-head.js")).then((m) => m.itemHead));
 
 // 定义组件（直接使用模板）
 export const itemVote = defineComponent({

component/latest-list/latest-list.js

@@ -2,9 +2,6 @@
 // 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
 const { defineComponent, ref, onMounted, nextTick } = Vue;
 
-const { itemBottom } = await import(withVer("../item-bottom/item-bottom.js"));
-const { itemHead } = await import(withVer("../item-head/item-head.js"));
-
 // 定义组件（直接使用模板）
 export const latestList = defineComponent({
     name: "latestList",
@@ -85,8 +82,6 @@ export const latestList = defineComponent({
     },
 
     components: {
-        itemBottom,
-        itemHead,
     },
 
     template: `<div class="posts-box box-newest " :class="['boxtype-' + boxtype]">    <div v-if="boxtype == 'newest'" class="box-newest-head flexacenter">        <img class="icon" src="/img/newest-icon.png" alt="" />        最新    </div>    <div v-else-if="boxtype == 'essence'" class="box-newest-head flexacenter">        <img class="icon" src="/img/essence.png" alt="" />        精华阅读    </div>    <div v-else class="slideshow-box">        <div class="tab-list flexacenter">            <div class="tab-item newest" :class="{'pitch': postsTab == 'newest'}" @click="tabPostsItem('newest')">最新            </div>            <div class="tab-item essence" :class="{'pitch': postsTab == 'essence'}" @click="tabPostsItem('essence')">精华            </div>        </div>    </div>    <div class="slideshow-content flexflex">        <!-- newest 最新 -->        <div class="newest-side-box side-box">            <img class="bounding" src="/img/bounding-circle-green.svg" alt="" />            <div class="box">                <template v-for="(item, index) in latestList" :key="index">                    <a v-if="item.title || item.content" class="item flexacenter vuehide"                        :href="'/details/' + item.uniqid" target="_blank">                        <div class="dot dot-green"></div>                        <div class="text one-line-display">{{ item.title || item.content }}</div>                    </a>                </template>            </div>        </div>        <!-- essence 精选 -->        <div class="essence-side-box side-box">            <img class="bounding" src="/img/bounding-circle-blue.svg" alt="" />            <div class="box">                <template v-for="(item, index) in topList" :key="index">                    <a v-if="item.title || item.content" class="item flexacenter vuehide"                        :href="'/details/' + item.uniqid" target="_blank">                        <div class="dot"></div>                        <div class="text one-line-display">{{ item.title || item.content }}</div>                    </a>                </template>            </div>        </div>    </div></div>`,

component/sign-in/sign-in.txt

@@ -55,7 +55,7 @@
   }
 
   .signInBox-mask .signInBox {
-    width: min(1060px, 95vw);
+    width: 1060px;
     background-color: #fff;
     border-radius: 20px;
     position: relative;
@@ -97,19 +97,21 @@
 
   .signInBox-mask .signInBox .signInBox-content {
     align-items: flex-start;
-    height: auto;
+    height: 595px;
-    gap: 16px;
-    flex-wrap: wrap;
   }
 
   .signInBox-mask .signInBox .signInBox-content .left-box {
-    flex: 1 1 520px;
+    width: 50%;
-    max-width: 560px;
+    max-width: 538px;
     padding: 20px 30px 40px;
     border-right: 1px dotted #d7d7d7;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
   }
 
   .signInBox-mask .signInBox .signInBox-content .left-box .content-header {
+    width: 100%;
     font-size: 15px;
     color: #555555;
     line-height: 40px;
@@ -144,19 +146,19 @@
     cursor: pointer;
   }
 
-  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring {
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring {
     position: absolute;
-    left: calc(100% + 31px);
+    left: 0;
-    top: -21px;
+    top: 0;
     z-index: 1;
-    width: 522px;
+    width: 100%;
-    height: 596px;
+    height: 100%;
     background-color: #fdda55;
     padding: 20px;
-    border-radius: 0 0 20px 0;
+    border-radius: 20px;
   }
 
-  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring::after {
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring::after {
     content: "";
     position: absolute;
     top: 26px;
@@ -171,7 +173,7 @@
     border-right-color: #fdda55;
   }
 
-  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box {
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .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);
@@ -182,7 +184,7 @@
     padding-bottom: 62px;
   }
 
-  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-header {
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-header {
     font-weight: 650;
     font-size: 24px;
     color: #ab8705;
@@ -194,7 +196,7 @@
     margin-bottom: 14px;
   }
 
-  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-header::after {
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-header::after {
     content: "";
     display: block;
     position: absolute;
@@ -208,12 +210,12 @@
     z-index: -1;
   }
 
-  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list {
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .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 {
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-list .rule-item .rule-item-icon {
     width: 52px;
     height: 52px;
     background-color: #f6f6f6;
@@ -225,23 +227,23 @@
     margin-right: 30px;
   }
 
-  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list .rule-item .rule-item-img {
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .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 {
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .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 {
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .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 {
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-close {
     font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
     font-weight: 400;
     font-style: normal;
@@ -256,7 +258,9 @@
 
   .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box {
     width: 100%;
-    height: auto;
+    max-width: 477px;
+    min-width: min-content;
+    height: 479px;
     background-color: #fbfbfb;
     border-radius: 12px;
     flex-direction: column;
@@ -281,15 +285,17 @@
   .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar {
     margin: 0 0 14px;
     display: grid;
-    grid-template-columns: repeat(7, minmax(32px, 1fr));
+    grid-template-columns: repeat(7, minmax(40px, 1fr));
-    column-gap: 12px;
+    justify-items: center;
-    row-gap: 10px;
+    gap: 10px;
+    width: 100%;
   }
 
   .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item {
-    width: 100%;
+    width: 40px;
-    aspect-ratio: 1 / 1;
+    height: 40px;
     border-radius: 50%;
+    margin-bottom: 10px;
     font-size: 17px;
     color: #aaaaaa;
     position: relative;
@@ -329,7 +335,7 @@
   }
 
   .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .sign-in-btn {
-    min-height: 48px;
+    height: 48px;
     border-radius: 219px;
     background-color: #f7c308;
     color: #fff;
@@ -351,29 +357,16 @@
     color: #555555;
     font-size: 15px;
     flex-direction: column;
-    flex: 1 1 420px;
+    height: inherit;
-    min-height: 320px;
+    position: relative;
-    height: auto;
+    overflow: hidden;
-    overflow: auto;
   }
   
-  @media (max-width: 768px) {
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-scroll-wrapper {
-    .signInBox-mask .signInBox {
+      overflow: auto;
-      width: 95vw;
+      flex: 1;
-    }
+      display: flex;
-    .signInBox-mask .signInBox .signInBox-content {
       flex-direction: column;
-      gap: 12px;
-    }
-    .signInBox-mask .signInBox .signInBox-content .left-box {
-      max-width: 100%;
-      border-right: none;
-      border-bottom: 1px dotted #d7d7d7;
-    }
-    .signInBox-mask .signInBox .signInBox-content .sign-in-box {
-      margin: 0;
-      border-radius: 12px;
-    }
   }
 
   .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-header {
@@ -657,6 +650,333 @@
       display: none;
     }
   }
+  @media screen and (max-width: 1200px) {
+    .signInBox-mask .signInBox {
+      width: 95%;
+      max-width: 1060px;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    .signInBox-mask {
+        align-items: flex-end; /* Align box to bottom */
+    }
+
+    .signInBox-mask .signInBox {
+      width: 100%; /* Full width */
+      max-width: none; /* Remove max width */
+      height: 90vh;
+      border-radius: 20px 20px 0 0; /* Rounded top corners only */
+      margin: 0; /* No margins */
+      display: flex;
+      flex-direction: column;
+      /* overflow-y: hidden; */ /* Container fixed, inner scrolls */
+    }
+    
+    .signInBox-mask .signInBox .signInBox-head {
+        flex-shrink: 0;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content {
+      flex-direction: column;
+      height: 0; /* Allow growing */
+      flex: 1;
+      align-items: stretch;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box {
+      width: 100%;
+      height: auto; /* Let it grow */
+      flex: 0 0 auto; /* Don't shrink below content */
+      border-right: none;
+      border-bottom: 1px dotted #d7d7d7;
+      padding: 15px 20px; /* Restore comfortable padding */
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      overflow: visible; /* Default overflow */
+      max-width: inherit;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box .content-header {
+      width: 100%;
+      justify-content: center;
+      flex-shrink: 0;
+      margin-bottom: 16px; /* Restore margin */
+      transform: none; /* Restore size */
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring {
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 90%;
+      height: auto;
+      max-height: 80vh;
+      border-radius: 20px;
+      background-color: rgba(253, 218, 85, 0.95);
+      position: fixed;
+      z-index: 10010;
+      overflow: hidden;
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring::after {
+        display: none;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box {
+      padding-bottom: 30px;
+      height: auto;
+      max-height: 100%;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list {
+      overflow-y: auto;
+      flex: 1;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-header {
+      font-size: 20px;
+      padding-top: 25px;
+      margin-bottom: 10px;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-header::after {
+      width: 100px;
+      height: 18px;
+      bottom: -2px;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list .rule-item .rule-item-icon {
+      width: 42px;
+      height: 42px;
+      margin-right: 15px;
+      border-radius: 12px;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list .rule-item .rule-item-img {
+      width: 24px;
+      height: 28px;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list .rule-item .rule-item-text {
+      font-size: 14px;
+      line-height: 24px;
+      padding: 20px 0;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box {
+      max-width: 100%;
+      height: auto;
+      padding: 0; /* Remove all padding */
+      padding: 10px 0; /* Add vertical margin */
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .sign-in-text {
+        margin-bottom: 15px; /* Restore margin */
+        font-size: 14px; /* Restore font size */
+        line-height: 28px;
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr); /* Force 7 columns */
+        gap: 1.5%; /* Relative gap */
+        width: 100%; /* Full width */
+        max-width: none; /* Remove limit */
+        justify-items: center; /* Center items in their cells */
+        margin-bottom: 15px; /* Restore margin */
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item {
+      width: 100%; /* Fill grid cell */
+      max-width: 40px; /* Limit max size to original desktop size */
+      aspect-ratio: 1; /* Keep square */
+      height: auto; /* Auto height based on width */
+      line-height: normal; /* Reset line-height */
+      display: flex; /* Use flex for centering content */
+      align-items: center;
+      justify-content: center;
+      font-size: min(14px, 3vw); /* Fluid font size */
+      margin: 0; /* Grid handles spacing */
+      border-width: 1px; /* Default border width */
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .sign-in-btn {
+        height: 40px; /* Reduced height */
+        font-size: 16px; /* Adjusted font size */
+        width: auto; /* Restore width */
+        min-width: auto;
+        padding: 0 30px; /* Add padding for auto width */
+    }
+    
+    /* Adjust border width for 'today' item to be relative if possible, but px is usually safer for borders. 
+       We can use thin/medium or keep 1px as it's already quite thin. 
+       Let's keep 1px but ensure box-sizing handles it well. */
+    
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item.today {
+        border-width: 1px; 
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item.already .yellow-tick {
+        width: 30%; /* Relative tick size */
+        height: 30%;
+        top: -5%;
+        right: -5%;
+    }
+
+    /* Remove previous margin overrides as grid handles it */
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item:not(:nth-child(7n)) {
+      margin-right: 0;
+    }
+    
+    /* List Styling Adjustments */
+    .signInBox-mask .signInBox .signInBox-content .sign-in-box {
+      width: 100%;
+      height: auto; /* Auto height */
+      flex: 1; /* Take remaining height */
+      margin: 0;
+      padding: 0 20px;
+      display: flex;
+      flex-direction: column;
+      /* overflow: hidden; */
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-header {
+        padding: 15px 10px; /* Compact header */
+        font-size: 13px;
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item {
+        padding: 8px 0 0 10px; /* Compact item padding */
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-index {
+        font-size: 13px;
+        width: 30px;
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-value {
+        width: 32px;
+        height: 32px;
+        font-size: 14px;
+        margin-right: 10px;
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-info .sign-in-name {
+        font-size: 13px;
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-info .sign-in-time {
+        font-size: 12px;
+    }
+  }
+
+  @media screen and (max-width: 480px) {
+    .signInBox-mask .signInBox .signInBox-head .header-bi {
+      width: 60px;
+      height: 72px;
+      top: -45px;
+    }
+
+    .signInBox-mask .signInBox .signInBox-head .header-halo {
+      width: 120px;
+      height: 115px;
+      top: -65px;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box {
+        padding: 15px;
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .left-box .content-header .bi-value {
+        font-size: 24px;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box {
+      padding: 20px 5px; /* Very tight padding for mobile */
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: 1.5%; /* Relative gap */
+        justify-items: center;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item {
+      width: 100%;
+      max-width: none; /* Fully fluid */
+      aspect-ratio: 1;
+      height: auto;
+      font-size: 4vw; /* Large relative font for mobile */
+      margin: 0;
+      /* display: none;  Remove hide default */
+      border-width: 1px;
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item.already .yellow-tick {
+        width: 35%; /* Larger relative tick for mobile */
+        height: 35%;
+    }
+
+    /* .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item.show-mobile {
+        display: flex; 
+    } Remove show logic */
+
+    /* Override any previous margin settings */
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item:not(:nth-child(7n)) {
+      margin-right: 0;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .sign-in-btn {
+      height: 36px;
+      font-size: 15px;
+      margin-top: 10px;
+    }
+    
+    /* Adjust Success Modal for mobile */
+    .signInBox-mask .succeed-mask .succeed-box {
+        transform: scale(0.9);
+    }
+    
+    /* Further compact list for mobile */
+    .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-value {
+        width: 28px;
+        height: 28px;
+        font-size: 13px;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-header {
+      font-size: 18px;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-list .rule-item .rule-item-icon {
+      width: 36px;
+      height: 36px;
+      margin-right: 10px;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-list .rule-item .rule-item-img {
+      width: 20px;
+      height: 24px;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-list .rule-item .rule-item-text {
+      font-size: 13px;
+      padding: 15px 0;
+    }
+  }
 </style>
 <div class="signInBox-mask flexcenter">
   <div class="signInBox">
@@ -672,14 +992,6 @@
           <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">
@@ -694,6 +1006,7 @@
       </div>
 
       <div class="sign-in-box flex1 flexflex">
+        <div class="sign-in-scroll-wrapper flex1 flexcolumn">
             <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">
@@ -705,6 +1018,16 @@
             <div class="sign-in-more flexcenter">更多 <img class="sign-in-more-icon"
                 src="https://app.gter.net/image/gter/commonCom/sign-in/img/arrows-circle-black.png"></div>
         </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>
   </div>
 

css/public.css

@@ -2093,124 +2093,6 @@ td {
   margin: 0 auto;
   box-sizing: content-box;
 }
-@media (max-width: 1200px) {
-  .head-pop .head-more-pop {
-    width: 80vw;
-  }
-  .head-pop .head-more-pop .head-more-userinfo {
-    margin-left: 20px;
-    padding-right: 20px;
-  }
-  .head-pop .head-more-pop .tab-list {
-    padding-right: 20px;
-    margin-left: 20px;
-  }
-  .head-pop .head-more-pop .tab-list .tab-item {
-    height: 50px;
-    padding-left: 20px;
-    font-size: 14px;
-  }
-  .head-pop .head-more-pop .head-more-post {
-    margin: 40px 0 90px;
-  }
-  .head-pop .head-more-pop .cross-icon {
-    left: calc(50% + 40px);
-  }
-}
-@media (max-width: 768px) {
-  .head-pop .head-more-pop {
-    width: 100vw;
-    height: 100vh;
-  }
-  .head-pop .head-more-pop .head-more-userinfo {
-    margin-left: 16px;
-    padding-right: 16px;
-  }
-  .head-pop .head-more-pop .head-more-userinfo .head-more-right {
-    width: auto;
-    height: auto;
-  }
-  .head-pop .head-more-pop .tab-list {
-    padding-right: 16px;
-    margin-left: 16px;
-  }
-  .head-pop .head-more-pop .tab-list .tab-item {
-    height: 46px;
-    padding-left: 16px;
-    font-size: 13px;
-  }
-  .head-pop .head-more-pop .head-more-post {
-    margin: 36px 0 80px;
-    font-size: 16px;
-  }
-  .head-pop .head-more-pop .head-more-post .head-more-post-icon {
-    width: 18px;
-    height: 18px;
-    margin-right: 6px;
-  }
-  .head-pop .head-more-pop .cross-icon {
-    left: 50%;
-    transform: translateX(-50%);
-    bottom: 15px;
-  }
-}
-@media (max-width: 480px) {
-  .head-pop .head-more-pop .head-more-userinfo {
-    margin-left: 12px;
-    padding-right: 12px;
-  }
-  .head-pop .head-more-pop .head-more-userinfo .head-more-left .head-more-userinfo-avatar {
-    width: 36px;
-    height: 36px;
-    margin-right: 8px;
-  }
-  .head-pop .head-more-pop .head-more-userinfo .head-more-left .head-more-userinfo-username {
-    font-size: 12px;
-  }
-  .head-pop .head-more-pop .head-more-userinfo .head-more-right .information-box {
-    width: 14px;
-    height: 14px;
-  }
-  .head-pop .head-more-pop .head-more-userinfo .head-more-right .information-box .information-icon {
-    width: 14px;
-    height: 14px;
-  }
-  .head-pop .head-more-pop .head-more-userinfo .head-more-right .loginBtn {
-    width: 72px;
-    height: 28px;
-    font-size: 12px;
-  }
-  .head-pop .head-more-pop .tab-list {
-    padding-right: 12px;
-    margin-left: 12px;
-  }
-  .head-pop .head-more-pop .tab-list .tab-item {
-    height: 42px;
-    padding-left: 14px;
-    font-size: 12px;
-  }
-  .head-pop .head-more-pop .head-more-post {
-    margin: 24px 0 60px;
-    font-size: 14px;
-  }
-  .head-pop .head-more-pop .head-more-post .head-more-post-icon {
-    width: 16px;
-    height: 16px;
-    margin-right: 6px;
-  }
-  .head-pop .head-more-pop .head-more-post .head-more-post-icon .head-more-post-img {
-    width: 8px;
-    height: 8px;
-  }
-  .head-pop .head-more-pop .cross-icon {
-    width: 10px;
-    height: 10px;
-    padding: 12px;
-    bottom: 12px;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-}
 @media screen and (max-width: 1200px) {
   header.page-header {
     min-width: auto !important;

css/public.less

@@ -2508,128 +2508,6 @@ td {
             margin: 0 auto;
             box-sizing: content-box;
         }
-
-        // 响应式断点：1200 / 768 / 480
-        @media (max-width: 1200px) {
-            width: 80vw;
-            .head-more-userinfo {
-                margin-left: 20px;
-                padding-right: 20px;
-            }
-            .tab-list {
-                padding-right: 20px;
-                margin-left: 20px;
-                .tab-item {
-                    height: 50px;
-                    padding-left: 20px;
-                    font-size: 14px;
-                }
-            }
-            .head-more-post {
-                margin: 40px 0 90px;
-            }
-            .cross-icon {
-                left: calc(50% + 40px);
-            }
-        }
-
-        @media (max-width: 768px) {
-            width: 100vw;
-            height: 100vh;
-            .head-more-userinfo {
-                margin-left: 16px;
-                padding-right: 16px;
-                .head-more-right {
-                    width: auto;
-                    height: auto;
-                }
-            }
-            .tab-list {
-                padding-right: 16px;
-                margin-left: 16px;
-                .tab-item {
-                    height: 46px;
-                    padding-left: 16px;
-                    font-size: 13px;
-                }
-            }
-            .head-more-post {
-                margin: 36px 0 80px;
-                font-size: 16px;
-                .head-more-post-icon {
-                    width: 18px;
-                    height: 18px;
-                    margin-right: 6px;
-                }
-            }
-            .cross-icon {
-                left: 50%;
-                transform: translateX(-50%);
-                bottom: 15px;
-            }
-        }
-
-        @media (max-width: 480px) {
-            .head-more-userinfo {
-                margin-left: 12px;
-                padding-right: 12px;
-                .head-more-left {
-                    .head-more-userinfo-avatar {
-                        width: 36px;
-                        height: 36px;
-                        margin-right: 8px;
-                    }
-                    .head-more-userinfo-username {
-                        font-size: 12px;
-                    }
-                }
-                .head-more-right {
-                    .information-box {
-                        width: 14px;
-                        height: 14px;
-                        .information-icon {
-                            width: 14px;
-                            height: 14px;
-                        }
-                    }
-                    .loginBtn {
-                        width: 72px;
-                        height: 28px;
-                        font-size: 12px;
-                    }
-                }
-            }
-            .tab-list {
-                padding-right: 12px;
-                margin-left: 12px;
-                .tab-item {
-                    height: 42px;
-                    padding-left: 14px;
-                    font-size: 12px;
-                }
-            }
-            .head-more-post {
-                margin: 24px 0 60px;
-                font-size: 14px;
-                .head-more-post-icon {
-                    width: 16px;
-                    height: 16px;
-                    margin-right: 6px;
-                    .head-more-post-img {
-                        width: 8px;
-                        height: 8px;
-                    }
-                }
-            }
-            .cross-icon {
-                width: 10px;
-                height: 10px;
-                padding: 12px;
-                bottom: 12px;
-                left: 50%;
-                transform: translateX(-50%);
-            }
-        }
     }
 }
 

details.html

@@ -29,6 +29,7 @@
 
     <script>
         setTimeout(() => {
+            return
             if (window["userInfoWin"]?.uin > 0 || window["userInfoWin"]?.uid > 0) {
                 // 登录
                 const headMoreLeft = document.querySelector(".head-pop .head-more-left")
@@ -64,7 +65,7 @@
     </div>
     <sign-in-box></sign-in-box>
     <div class="container" id="details" v-cloak>
-        <div class="templateValue" ref="uniqidRef">WObXKrbm1CSn</div>
+        <div class="templateValue" ref="uniqidRef">Wq5LnDubWjyr</div>
 
         <div class="head-top flexacenter">
             <img class="logo" src="https://oss.gter.net/logo" alt="" />
@@ -228,7 +229,7 @@
                     <div class="input-box">
                         <div class="top flexflex">
                             <img class="avatar" v-if="userInfoWin.avatar" :src="userInfoWin.avatar" />
-                            <textarea ref="input-textarea" class="input-textarea flex1" maxlength="500" @focus="judgeLogin" v-model="inputTextarea" @input="autoResize" @paste="handleInputPaste" placeholder="说说你的看法…"></textarea>
+                            <textarea ref="inputTextareaRef" class="input-textarea flex1" maxlength="500" @focus="judgeLogin" v-model="inputTextarea" @input="autoResize" @paste="handleInputPaste" placeholder="说说你的看法…"></textarea>
                         </div>
                         <div class="picture-box flexacenter" v-if="picture.length != 0">
                             <div class="picture" v-for="(item, index) in picture" :key="index">
@@ -299,7 +300,7 @@
                                 <div class="input-box" v-if="item['childState']">
                                     <img class="cross" @click="closeAnswerCommentsChild(index)" src="./img/cross-icon.png" />
                                     <div class="top flexflex">
-                                        <textarea class="input-textarea flex1" maxlength="500" placeholder="说说你的看法…" @focus="judgeLogin" v-model="item['commentInput']" @input="autoResize" @paste="handleInputPaste($event, index)"></textarea>
+                                        <textarea class="input-textarea flex1" :class="[`input-textarea-${item.id}`]" maxlength="500" placeholder="说说你的看法…" @focus="judgeLogin" v-model="item['commentInput']" @input="autoResize" @paste="handleInputPaste($event, index)"></textarea>
                                     </div>
                                     <div class="picture-box flexacenter" v-if="item?.picture?.length != 0">
                                         <div class="picture" v-for="it in item.picture" :key="it.url">
@@ -370,7 +371,7 @@
                                         <div class="input-box" v-if="ite['childState']">
                                             <img class="cross" @click="closeAnswerCommentsChild(index)" src="./img/cross-icon.png" />
                                             <div class="top flexflex">
-                                                <textarea class="input-textarea flex1" maxlength="500" v-model="ite['commentInput']" @focus="judgeLogin" :placeholder="'回复“' + (ite.nickname || ite.user['nickname'] || '匿名用户') + '”：'" @input="autoResize" @paste="handleInputPaste($event, index, i)"></textarea>
+                                                <textarea class="input-textarea flex1" maxlength="500" :class="[`input-textarea-${ite.id}`]" v-model="ite['commentInput']" @focus="judgeLogin" :placeholder="'回复“' + (ite.nickname || ite.user['nickname'] || '匿名用户') + '”：'" @input="autoResize" @paste="handleInputPaste($event, index, i)"></textarea>
                                             </div>
                                             <div class="picture-box flexacenter" v-if="ite.picture?.length != 0">
                                                 <div class="picture" v-for="it in ite.picture" :key="it.url">

index.html

@@ -493,11 +493,8 @@
 
         startCarousel();
 
-
-
     </script>
     <script src="./component/sign-in/sign-in.js"></script>
-
 </body>
 
 </html>

js/details.js

@@ -1,13 +1,39 @@
-const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch, provide } = Vue;
+const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch, provide, defineAsyncComponent } = Vue;
-
+(async function () {
     const { itemForum } = await import(withVer("../component/item-forum/item-forum.js"));
     const { itemOffer } = await import(withVer("../component/item-offer/item-offer.js"));
     const { itemSummary } = await import(withVer("../component/item-summary/item-summary.js"));
     const { itemVote } = await import(withVer("../component/item-vote/item-vote.js"));
     const { itemMj } = await import(withVer("../component/item-mj/item-mj.js"));
     const { itemTenement } = await import(withVer("../component/item-tenement/item-tenement.js"));
-const { latestList } = await import(withVer("../component/latest-list/latest-list.js"));
+
-const { slideshowBox } = await import(withVer("../component/slideshow-box/slideshow-box.js"));
+    // const itemForum = defineAsyncComponent(() => import(withVer("../component/item-forum/item-forum.js")).then(m => m.itemForum));
+    // const itemOffer = defineAsyncComponent(() => import(withVer("../component/item-offer/item-offer.js")).then(m => m.itemOffer));
+    // const itemSummary = defineAsyncComponent(() => import(withVer("../component/item-summary/item-summary.js")).then(m => m.itemSummary));
+    // const itemVote = defineAsyncComponent(() => import(withVer("../component/item-vote/item-vote.js")).then(m => m.itemVote));
+    // const itemMj = defineAsyncComponent(() => import(withVer("../component/item-mj/item-mj.js")).then(m => m.itemMj));
+    // const itemTenement = defineAsyncComponent(() => import(withVer("../component/item-tenement/item-tenement.js")).then(m => m.itemTenement));
+    // const latestList = defineAsyncComponent(() => import(withVer("../component/latest-list/latest-list.js")).then(m => m.latestList));
+    // const slideshowBox = defineAsyncComponent(() => import(withVer("../component/slideshow-box/slideshow-box.js")).then(m => m.slideshowBox));
+    // const like = defineAsyncComponent(() => import(withVer("../component/like/like.js")).then(m => m.like));
+    // const report = defineAsyncComponent(() => import(withVer("../component/report/report.js")).then(m => m.report));
+    // const headTop = defineAsyncComponent(() => import(withVer("../component/head-top/head-top.js")).then(m => m.headTop));
+
+    // 判断 ismobile 为 true 是 不加载 latestList 和 slideshowBox
+    // if (!window.isMobile) {
+    //     const { latestList } = await import(withVer("../component/latest-list/latest-list.js"));
+    //     const { slideshowBox } = await import(withVer("../component/slideshow-box/slideshow-box.js"));
+    // }
+    let latestList, slideshowBox;
+    if (!window.isMobile) {
+        ({ latestList } = await import(withVer("../component/latest-list/latest-list.js")));
+        ({ slideshowBox } = await import(withVer("../component/slideshow-box/slideshow-box.js")));
+    } else {
+        latestList = { name: "latestList", template: "<div></div>" };
+        slideshowBox = { name: "slideshowBox", template: "<div></div>" };
+    }
+    // const { latestList } = await import(withVer("../component/latest-list/latest-list.js"));
+    // const { slideshowBox } = await import(withVer("../component/slideshow-box/slideshow-box.js"));
     const { like } = await import(withVer("../component/like/like.js"));
     const { report } = await import(withVer("../component/report/report.js"));
     const { headTop } = await import(withVer("../component/head-top/head-top.js"));
@@ -16,6 +42,12 @@ const appSectionIndex = createApp({
         setup() {
             onMounted(() => {
                 getUserInfoWin();
+
+                const preLoader = document.getElementById("pre-loader");
+                if (preLoader) preLoader.style.display = "none";
+                document.querySelectorAll(".vuehide").forEach((item) => {
+                    item.style.display = "none";
+                });
             });
 
             let isLogin = ref(false);
@@ -79,9 +111,6 @@ const appSectionIndex = createApp({
             let uniqidRef = ref(null);
 
             onMounted(() => {
-            const preLoader = document.getElementById("pre-loader");
-            if (preLoader) preLoader.style.display = "none";
-
                 uniqid = uniqidRef.value.innerText;
 
                 init();
@@ -172,9 +201,17 @@ const appSectionIndex = createApp({
             };
 
             const restoreHtml = (formattedText, attachments, type) => {
-            const imageList = attachments?.images || [];
+                let imageList = attachments?.images || [];
-            const filesList = attachments?.files || [];
+                if (imageList && typeof imageList === "object" && !Array.isArray(imageList)) imageList = Object.values(imageList);
-            const videosList = attachments?.videos || [];
+
+                let filesList = attachments?.files || [];
+                if (filesList && typeof filesList === "object" && !Array.isArray(filesList)) filesList = Object.values(filesList);
+
+                let videosList = attachments?.videos || [];
+                if (videosList && typeof videosList === "object" && !Array.isArray(videosList)) videosList = Object.values(videosList);
+
+                // const filesList = attachments?.files || [];
+                // const videosList = attachments?.videos || [];
 
                 let html = formattedText;
 
@@ -599,6 +636,7 @@ const appSectionIndex = createApp({
             let emojiState = ref(false);
             let emojiMaskState = ref(false);
             let inputTextarea = ref("");
+            const inputTextareaRef = ref(null);
 
             // 打开 Emoji
             const openEmoji = (event, index, i) => {
@@ -671,11 +709,59 @@ const appSectionIndex = createApp({
                 closeEmoji();
                 if (i != undefined) {
                     if (!commentList.value[index]["child"][i]["commentInput"]) commentList.value[index]["child"][i]["commentInput"] = "";
-                commentList.value[index]["child"][i]["commentInput"] += key;
+
+                    const id = commentList.value[index]["child"][i]?.id;
+                    const textarea = document.querySelector(`.input-textarea-${id}`);
+
+                    if (textarea) {
+                        const currentValue = textarea.value;
+                        const startPos = textarea.selectionStart || 0;
+                        const endPos = textarea.selectionEnd || 0;
+                        const newValue = currentValue.substring(0, startPos) + key + currentValue.substring(endPos);
+
+                        commentList.value[index]["child"][i]["commentInput"] = newValue;
+
+                        nextTick(() => {
+                            textarea.focus();
+                            textarea.selectionStart = textarea.selectionEnd = startPos + key.length;
+                        });
+                    } else commentList.value[index]["child"][i]["commentInput"] += key;
                 } else if (index != undefined) {
                     if (!commentList.value[index]["commentInput"]) commentList.value[index]["commentInput"] = "";
-                commentList.value[index]["commentInput"] += key;
+
-            } else inputTextarea.value += key;
+                    const id = commentList.value[index]?.id;
+                    const textarea = document.querySelector(`.input-textarea-${id}`);
+
+                    if (textarea) {
+                        const currentValue = textarea.value;
+                        const startPos = textarea.selectionStart || 0;
+                        const endPos = textarea.selectionEnd || 0;
+                        const newValue = currentValue.substring(0, startPos) + key + currentValue.substring(endPos);
+
+                        commentList.value[index]["commentInput"] = newValue;
+
+                        nextTick(() => {
+                            textarea.focus();
+                            textarea.selectionStart = textarea.selectionEnd = startPos + key.length;
+                        });
+                    } else commentList.value[index]["commentInput"] += key;
+                } else {
+                    const textarea = inputTextareaRef.value;
+                    if (!textarea) return;
+
+                    const currentValue = textarea.value;
+                    const startPos = textarea.selectionStart || 0;
+                    const endPos = textarea.selectionEnd || 0;
+
+                    const newValue = currentValue.substring(0, startPos) + key + currentValue.substring(endPos);
+
+                    inputTextarea.value = newValue;
+
+                    nextTick(() => {
+                        textarea.focus();
+                        textarea.selectionStart = textarea.selectionEnd = startPos + key.length;
+                    });
+                }
             };
 
             const judgeLogin = () => {
@@ -925,6 +1011,12 @@ const appSectionIndex = createApp({
                 editPicture.value = target.attachments?.images || [];
 
                 editCommentState.value = true;
+
+                nextTick(() => {
+                    console.log('editInputRef.value',editInputRef.value);
+                    editInputRef.value.style.height = "auto"; // 重置高度
+                    editInputRef.value.style.height = `${editInputRef.value.scrollHeight}px`; // 设置为内容高度
+                });
             };
 
             const closeEdit = () => {
@@ -1235,7 +1327,7 @@ const appSectionIndex = createApp({
                 ajax(`/v2/api/forum/postTopicShare`, { token });
             };
 
-        return { uniqidRef, share, reportToken, isReplyBoxShow, matterHeight, sidebarHeight, deleteItem, maxPicture, sidebarFixed, matterRef, sidebarRef, pitchInputState, ismyself, edit, searchInput, defaultSearchText, goSearch, goPersonalHomepage, QRcode, alsoCommentsData, copyLinkClick, reportState, tokentoken, essence, recommend, hide, report, cutShow, ismanager, show, openDiscuss, commentDelete, handleInputPaste, autoResize, editCommentState, selectEditEmoji, closeEditEmoji, openEditEmoji, closeEdit, openEdit, closeEditFileUpload, postEditComment, submitAnswerComments, closePictureUpload, closeFileUpload, picture, editToken, editPicture, editInput, editEmojiState, handleFileUpload, inputTextarea, judgeLogin, handleEditFile, selectEmoji, emojiData, emojiMaskState, emojiState, closeEmoji, openEmoji, closeAnswerCommentsChild, openAnswerCommentsChild, handleAnswerText, sendMessage, TAHomePage, operateAnswerCommentsLike, closeUserInfo, openUserInfo, permissions, commentList, commentPage, commentTotalCount, picture, userInfoWin, relatedList, relatedTime, coinNubmer, coinList, coinAmount, coinSubmit, strategy, mybalance, coinsState, openCoinBox, closeCoinBox, isLikeGif, likeClick, collectClick, islike, iscollect, recentlyList, medal, count, sectionn, tags, authorInfo, info, timestamp, updatedTime };
+            return { inputTextareaRef, uniqidRef, share, reportToken, isReplyBoxShow, matterHeight, sidebarHeight, deleteItem, maxPicture, sidebarFixed, matterRef, sidebarRef, pitchInputState, ismyself, edit, searchInput, defaultSearchText, goSearch, goPersonalHomepage, QRcode, alsoCommentsData, copyLinkClick, reportState, tokentoken, essence, recommend, hide, report, cutShow, ismanager, show, openDiscuss, commentDelete, handleInputPaste, autoResize, editCommentState, selectEditEmoji, closeEditEmoji, openEditEmoji, closeEdit, openEdit, closeEditFileUpload, postEditComment, submitAnswerComments, closePictureUpload, closeFileUpload, picture, editToken, editPicture, editInput, editEmojiState, handleFileUpload, inputTextarea, judgeLogin, handleEditFile, selectEmoji, emojiData, emojiMaskState, emojiState, closeEmoji, openEmoji, closeAnswerCommentsChild, openAnswerCommentsChild, handleAnswerText, sendMessage, TAHomePage, operateAnswerCommentsLike, closeUserInfo, openUserInfo, permissions, commentList, commentPage, commentTotalCount, picture, userInfoWin, relatedList, relatedTime, coinNubmer, coinList, coinAmount, coinSubmit, strategy, mybalance, coinsState, openCoinBox, closeCoinBox, isLikeGif, likeClick, collectClick, islike, iscollect, recentlyList, medal, count, sectionn, tags, authorInfo, info, timestamp, updatedTime };
         },
     });
 
@@ -1252,3 +1344,4 @@ appSectionIndex.component("report", report);
     appSectionIndex.component("headTop", headTop);
 
     appSectionIndex.mount("#details");
+})();

js/public.js

@@ -4,12 +4,22 @@ axios.defaults.emulateJSON = true;
 
 const withVer = (p) => `${p}?v=${window.__ASSET_VERSION__}`;
 
+const getScriptParameter = (paramName) => {
+    const currentScript = document.currentScript;
+    if (currentScript && currentScript.src) {
+        const url = new URL(currentScript.src, window.location.origin);
+        return url.searchParams.get(paramName);
+    }
+    return null;
+};
+
 // 导出ajax函数
 const ajax = (url, data) => {
     axios.defaults.withCredentials = true;
     axios.defaults.emulateJSON = true;
 
     url = url.indexOf("https://") > -1 ? url : forumBaseURL + url;
+    if (data) data["v"] = getScriptParameter("v") || "v2";
     return new Promise(function (resolve, reject) {
         if (location.hostname == "127.0.0.1") axios.defaults.headers.common["Authorization"] = "n1pstcsmw6m6bcx49z705xhvduqviw29";
 
@@ -41,6 +51,7 @@ const ajaxdelete = (url, data) => {
 
     url = url.indexOf("https://") > -1 ? url : forumBaseURL + url;
     return new Promise(function (resolve, reject) {
+        if (data) data["v"] = getScriptParameter("v") || "v2";
         axios
             .delete(url, {
                 emulateJSON: true,
@@ -70,6 +81,10 @@ const ajaxGet = (url) => {
     axios.defaults.emulateJSON = true;
 
     url = url.indexOf("https://") > -1 ? url : forumBaseURL + url;
+
+    const paramSymbol = url.includes("?") ? "&" : "?";
+    url = `${url}${paramSymbol}v=${getScriptParameter("v") || "v2" }`;
+
     return new Promise(function (resolve, reject) {
         if (location.hostname == "127.0.0.1") axios.defaults.headers.common["Authorization"] = "n1pstcsmw6m6bcx49z705xhvduqviw29";