feat(header): 新增头部组件功能与样式优化

- 添加默认头像图片资源
- 扩展监听文件同步配置
- 重构头像展示样式，增加背景和尺寸控制
- 完善签到功能逻辑和样式交互
- 新增头部组件HTML模板和JS实现
- 调整搜索框和历史记录显示逻辑
- 优化页面布局和响应式设计

component/head-top-web/head-top-web.js

@@ -0,0 +1,275 @@
+// 1. 创建组件模板和样式（内置到 JS 中，无需外部 HTML/Template）
+const template = document.createElement("template");
+template.innerHTML = `<div class="head-top flexacenter">    <a href="/" class="flexacenter" target="_blank">        <img class="logo" src="https://oss.gter.net/logo" alt="" />    </a>    <div class="flex1"></div>    <div class="input-box flexacenter" :class="{'pitch': searchInputState}">        <div class="placeholder" v-if="!searchInputState && !input">            <div class="placeholder-box" :style="{transform: 'translateY(-' + currentIndex * 36 + 'px)', transition: 'transform .3s ease'}">                <div class="item one-line-display" v-for="(item,index) in hotSearchWords" :key="index">大家都在搜：{{                    item.keyword }}</div>                <div class="item one-line-display" v-for="(item,index) in hotSearchWords.slice(0, 2)" :key="'copy-' + index">大家都在搜：{{ item.keyword }}</div>            </div>        </div>        <input class="input flex1" type="text" @keyup.enter="searchEvent()" v-model="input" @focus="searchInputFocus" @blur="searchInputBlur" maxlength="140" /> <img class="icon" src="/img/search-icon.svg" @click="searchEvent()" />        <div class="search-box-history" v-if="searchHistoryShowState">            <div class="search-box-history-title">历史搜索</div>            <div class="search-box-history-list">                <div class="search-box-history-item one-line-display" v-for="(item,index) in historySearchList " :key="index" @click="searchEvent(item)">{{ item }}</div>            </div>        </div>    </div>    <div class="post-list flexacenter" v-if="page == 'details'"><a href="/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-thread.png" /> </a> <a href="https://offer.gter.net/post" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-offer.png" /> </a> <a href="https://offer.gter.net/post/summary" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-summary.png" /> </a> <a href="https://interviewexperience.gter.net/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-mj.png" /> </a> <a href="https://vote.gter.net/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-vote.png" /> </a> </div>    <template v-else>        <div class="sign-in  flexacenter" :class="{'sign-in-already': state == 1, 'sign-in-no': state == 0}" @click="signIn()" v-cloak>            <div class="sign-in-no-box">                <img class="sign-in-bj" src="/img/sign-in-bj.svg" /> <img class="coin-bj" src="/img/coin-bj.svg" />                <img class="coin-icon" src="/img/coin-icon.png" /> <span class="text flex1">签到领寄托币</span>                <div class="sign-go flexcenter">                    <img class="sign-go-bj" src="/img/sign-go.svg" /> GO                </div>                <img class="petal1" src="/img/petal1.png" />                <img class="petal2" src="/img/petal2.png" />                <img class="petal3" src="/img/petal3.png" />            </div>            <div class="sign-in-already-box">                <img class="sign-icon" src="/img/sign-icon.png" />                <span>已签到，明天再来</span>            </div>        </div>    </template></div> `;
+
+// 2. 定义组件类
+class HeadTopWeb extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    // 监听的属性列表
+    static get observedAttributes() {
+        return ["coins", "token", "pagetpye", "displaytips"];
+    }
+
+    // 属性变化回调
+    attributeChangedCallback(attrName, oldVal, newVal) {
+        this[attrName] = newVal; // 同步属性值到变量
+    }
+
+    init(type) {
+        this.fetchGetData(`https://api.gter.net/v2/api/forum/getCoinConfig`).then((res) => {
+            const data = res.data;
+            const strategy = data.config.strategy.url || 0;
+            const mybalance = data.mybalance || 0;
+            const defaultcoinnum = data.defaultcoinnum || 0;
+
+            // 替换策略链接
+            this.strategyEl.href = "https://bbs.gter.net/account.php?a=credit&op=rule";
+            this.mybalanceEl.textContent = mybalance;
+            this.coinsEl.textContent = this.coins;
+            this.defaultcoinnum = defaultcoinnum;
+
+            this.input.placeholder = `输入投币数,默认${defaultcoinnum}个币`;
+
+            this.coinsAreaEl.style.display = "flex";
+
+            if (type == "unlock") {
+                if (mybalance >= defaultcoinnum) {
+                    this.coinsBoxEl.style.display = "none";
+                    this.coinsNoBi.style.display = "none";
+                    this.coinsUnlock.style.display = "flex";
+                    this.coinsUnlock.querySelector(".coinNum").textContent = defaultcoinnum;
+                    this.coinsUnlock.querySelector(".balance").textContent = mybalance;
+                    this.coinsUnlock.querySelector(".unlock-insertcoins-btn").addEventListener("click", () => this.coinSubmit(type));
+                } else {
+                    this.coinsBoxEl.style.display = "none";
+                    this.coinsUnlock.style.display = "none";
+                    this.coinsNoBi.style.display = "flex";
+                }
+            } else {
+                this.coinsUnlock.style.display = "none";
+                this.coinsNoBi.style.display = "none";
+                this.coinsBoxEl.style.display = "flex";
+            }
+        });
+
+        if (!this.coinListAreaEl.querySelector(".list")) this.getCoinRankList();
+
+        const obj = {
+            offer: "Offer",
+            summary: "总结",
+            mj: "面经",
+            thread: "帖子",
+            vote: "投票",
+        };
+
+        console.log("obj[this.pagetpye]", this.pagetpye);
+
+        this.pagetpyeText.textContent = obj[this.pagetpye];
+    }
+
+    getCoinRankList() {
+        this.fetchGetData(`https://api.gter.net/v2/api/forum/getCoinRankList?token=${this.token}&limit=1000`).then((res) => {
+            const data = res.data;
+            this.coinListAreaEl.innerHTML = "";
+            const coinNubmer = data.nubmer;
+            if (coinNubmer == 0) return;
+            const total = `<div class="coins-total flexacenter">共<div class="sum">${coinNubmer}</div>人参与投币：</div>`;
+
+            const coinList = data.data;
+            let list = coinList
+                .map((item) => {
+                    return `<div class="item flexacenter" =>
+                              <div class="serial">${item.rank}</div>
+                              <a class="user flex1 flexacenter" href="https://f.gter.net/u/${item.user.uniqid}" target="_blank">
+                                  <img class="avatar" src="${item.user.avatar}" alt="" />
+                                  <div class="username one-line-display flex1">${item.user.nickname || "匿名用户"}</div>
+                              </a>
+                              <div class="amount flexacenter">
+                                  ${item.coins}
+                                  <div class="text">币</div>
+                              </div>
+                          </div>`;
+                })
+                .join("");
+            list = `<div class="list flex1">${list}</div>`;
+            const listHTML = total + list;
+            this.coinListAreaEl.innerHTML = listHTML;
+        });
+    }
+
+    coinSubmit() {
+        const num = Number(this.input.value || this.defaultcoinnum) || 0;
+        if (num <= 0) {
+            creationAlertBox("error", "投币数量必须大于0");
+            return;
+        }
+        this.fetchData(`https://api.gter.net/v2/api/forum/postTopicCoin`, {
+            token: this.token,
+            num,
+        }).then((res) => {
+            if (res.code == 200) creationAlertBox("success", res.message);
+            else creationAlertBox("error", res.message);
+
+            if (res.code != 200) return;
+            let data = res.data;
+
+            if (this.displaytips == "coindisplayuser") {
+                setTimeout(() => window.location.reload(), 1000);
+                return;
+            }
+
+            this.mybalanceEl.textContent = Number(this.mybalanceEl.textContent) - num || 0;
+            this.input.value = "";
+            const coins = data.coins;
+            this.coinsEl.textContent = coins || 0;
+
+            if (this.pagetpye == "thread") document.querySelector(".action-bar-item.coins .text").textContent = coins || 0;
+            if (this.pagetpye == "vote") document.querySelector(".coinText").textContent = coins || 0;
+            if (this.pagetpye == "mj") document.querySelector(".coinText").textContent = coins || 0;
+            if (this.pagetpye == "offer") document.querySelector(".broadside-text.cursorpointer.coinText").textContent = (coins || 0) + " 寄托币";
+            if (this.pagetpye == "summary") document.querySelector(".broadside-text.cursorpointer.coinText").textContent = (coins || 0) + " 寄托币";
+            this.getCoinRankList();
+        });
+    }
+
+    closeCoinBox() {
+        this.coinsAreaEl.style.display = "none";
+    }
+
+    // 静态方法，用于在外部调用组件初始化 type normal 展示正常的投币和列表 unlock 解锁插入币弹窗 或者 币不足
+    static initComponent(type = "normal") {
+        if (window.headTopWebComponent) {
+            window.headTopWebComponent.init(type);
+            return true;
+        }
+        console.warn("head-top-web组件尚未加载或挂载");
+        return false;
+    }
+
+    // 生命周期：组件挂载
+    connectedCallback() {
+        if (this._mounted) return;
+        this.innerHTML = "";
+        this.appendChild(template.content.cloneNode(true));
+        this.coins = this.getAttribute("coins") || this.coins || "";
+        this.token = this.getAttribute("token") || this.token || "";
+        this.pagetpye = this.getAttribute("pagetpye") || this.pagetpye || "";
+        this.displaytips = this.getAttribute("displaytips") || this.displaytips || "";
+        this.input = this.querySelector(".input") || this.input;
+        window.headTopWebComponent = this;
+        this._mounted = true;
+    }
+
+    // 生命周期：组件卸载
+    disconnectedCallback() {
+        console.log(`用户卡片 ${this.getAttribute("username")} 已卸载`);
+    }
+
+    fetchData(url, data) {
+        return new Promise((resolve, reject) => {
+            var xhr = new XMLHttpRequest();
+            xhr.responseType = "json";
+            xhr.withCredentials = true;
+
+            xhr.open("POST", url, true);
+            xhr.setRequestHeader("Content-Type", "application/json");
+
+            if (["127.0.0.1", "localhost", "192.168.18.219"].includes(location.hostname)) xhr.setRequestHeader("Authorization", "3b01343c65e3b2fa3ce32ae26feb3a9b");
+
+            xhr.onreadystatechange = function () {
+                if (xhr.readyState === 4 && xhr.status === 200) {
+                    let response = xhr.response;
+                    resolve(response);
+                }
+            };
+
+            xhr.send(JSON.stringify(data));
+        });
+    }
+
+    fetchGetData(url) {
+        return new Promise((resolve, reject) => {
+            const xhr = new XMLHttpRequest();
+            xhr.withCredentials = true;
+
+            xhr.open("GET", url, true);
+            if (["127.0.0.1", "localhost", "192.168.18.219"].includes(location.hostname)) xhr.setRequestHeader("Authorization", "3b01343c65e3b2fa3ce32ae26feb3a9b");
+
+            xhr.onreadystatechange = function () {
+                if (xhr.readyState === 4 && xhr.status === 200) {
+                    let response = xhr.response;
+                    resolve(JSON.parse(response));
+                }
+            };
+
+            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. 注册组件（确保只注册一次） head-top-web
+if (!customElements.get("head-top-web")) customElements.define("head-top-web", HeadTopWeb);
+
+// 4. 导出组件类，以便在外部直接调用
+window.HeadTopWebComponent = HeadTopWeb;

component/head-top-web/head-top-web.txt

@@ -0,0 +1,44 @@
+<div class="head-top flexacenter">
+    <a href="/" class="flexacenter" target="_blank">
+        <img class="logo" src="https://oss.gter.net/logo" alt="" />
+    </a>
+    <div class="flex1"></div>
+    <div class="input-box flexacenter" :class="{'pitch': searchInputState}">
+        <div class="placeholder" v-if="!searchInputState && !input">
+            <div class="placeholder-box" :style="{transform: 'translateY(-' + currentIndex * 36 + 'px)', transition: 'transform .3s ease'}">
+                <div class="item one-line-display" v-for="(item,index) in hotSearchWords" :key="index">大家都在搜：{{
+                    item.keyword }}</div>
+                <div class="item one-line-display" v-for="(item,index) in hotSearchWords.slice(0, 2)" :key="'copy-' + index">大家都在搜：{{ item.keyword }}</div>
+            </div>
+        </div>
+
+        <input class="input flex1" type="text" @keyup.enter="searchEvent()" v-model="input" @focus="searchInputFocus" @blur="searchInputBlur" maxlength="140" /> <img class="icon" src="/img/search-icon.svg" @click="searchEvent()" />
+        <div class="search-box-history" v-if="searchHistoryShowState">
+            <div class="search-box-history-title">历史搜索</div>
+            <div class="search-box-history-list">
+                <div class="search-box-history-item one-line-display" v-for="(item,index) in historySearchList " :key="index" @click="searchEvent(item)">{{ item }}</div>
+            </div>
+        </div>
+    </div>
+    <div class="post-list flexacenter" v-if="page == 'details'"><a href="/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-thread.png" /> </a> <a href="https://offer.gter.net/post" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-offer.png" /> </a> <a href="https://offer.gter.net/post/summary" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-summary.png" /> </a> <a href="https://interviewexperience.gter.net/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-mj.png" /> </a> <a href="https://vote.gter.net/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-vote.png" /> </a> </div>
+    <template v-else>
+        <div class="sign-in  flexacenter" :class="{'sign-in-already': state == 1, 'sign-in-no': state == 0}" @click="signIn()" v-cloak>
+            <div class="sign-in-no-box">
+                <img class="sign-in-bj" src="/img/sign-in-bj.svg" /> <img class="coin-bj" src="/img/coin-bj.svg" />
+                <img class="coin-icon" src="/img/coin-icon.png" /> <span class="text flex1">签到领寄托币</span>
+                <div class="sign-go flexcenter">
+                    <img class="sign-go-bj" src="/img/sign-go.svg" /> GO
+                </div>
+                <img class="petal1" src="/img/petal1.png" />
+                <img class="petal2" src="/img/petal2.png" />
+                <img class="petal3" src="/img/petal3.png" />
+            </div>
+
+            <div class="sign-in-already-box">
+                <img class="sign-icon" src="/img/sign-icon.png" />
+                <span>已签到，明天再来</span>
+            </div>
+
+        </div>
+    </template>
+</div> 

component/head-top/head-top.js

@@ -37,23 +37,12 @@ export const headTop = defineComponent({
             // 设置新的定时器，每秒滚动一次
             carouselTimer.value = setInterval(() => {
                 if (!searchInputState.value && hotSearchWords.value.length > 1) {
-                    // 当滚动到复制的数据部分时，进行无缝切换
                     if (currentIndex.value >= hotSearchWords.value.length - 1) {
-                        // 先滚动到复制的数据
                         currentIndex.value++;
-                        // 在下一帧，当动画完成后，立即切换回对应的数据索引位置，但不带动画
                         setTimeout(() => {
-                            if (!searchInputState.value) {
+                            if (!searchInputState.value) currentIndex.value = 0;
-                                currentIndex.value = 0;
-                                // 强制重新渲染以重置位置
-                                nextTick(() => {
-                                    // 继续正常滚动
-                                });
-                            }
                         }, 2300);
-                    } else {
+                    } else currentIndex.value++;
-                        currentIndex.value++;
-                    }
                 }
             }, 2300);
         };
@@ -68,13 +57,6 @@ export const headTop = defineComponent({
             isPaused.value = false;
         };
 
-        // 组件卸载时清理定时器
-        const onUnmounted = () => {
-            if (carouselTimer.value) {
-                clearInterval(carouselTimer.value);
-            }
-        };
-
         let hotSearchWords = ref([]);
 
         const checkWConfig = () => {
@@ -117,23 +99,13 @@ export const headTop = defineComponent({
 
         const signIn = () => {
             SignInComponent.initComponent();
-            // ajax("/v2/api/forum/sign").then((res) => {
-            //     if (res.code != 200) {
-            //         creationAlertBox("error", res.message);
-            //         return;
-            //     }
-
-            //     let data = res.data;
-            //     state.value = 1;
-            //     creationAlertBox("success", res.message || "签到成功");
-            // });
         };
 
         let pitchState = ref(false);
 
-        let page = ref(...props.page);
+        let page = ref(props.page);
 
-        // console.log("page", page.value);
+        console.log("page", page.value, props.page);
 
         let input = ref("");
 
@@ -175,5 +147,5 @@ export const headTop = defineComponent({
         return { hotSearchWords, historySearchList, searchEvent, searchInputState, searchHistoryShowState, searchInputFocus, searchInputBlur, page, pitchState, state, signIn, input, currentIndex, pauseCarousel, resumeCarousel };
     },
 
-    template: `<div class="head-top flexacenter">    <a href="/" class="flexacenter" target="_blank">        <img class="logo" src="https://oss.gter.net/logo" alt="" />    </a>    <div class="flex1"></div>    <div class="input-box flexacenter" :class="{'pitch': searchInputState}">        <div class="placeholder" v-if="!searchInputState && !input">            <div class="placeholder-box"                :style="{transform: 'translateY(-' + currentIndex * 36 + 'px)', transition: 'transform .3s ease'}">                <div class="item one-line-display" v-for="(item,index) in hotSearchWords" :key="index">大家都在搜：{{                    item.keyword }}</div>                <div class="item one-line-display" v-for="(item,index) in hotSearchWords.slice(0, 2)"                    :key="'copy-' + index">大家都在搜：{{ item.keyword }}</div>            </div>        </div>        <input class="input flex1" type="text" @keyup.enter="searchEvent()" v-model="input" @focus="searchInputFocus"            @blur="searchInputBlur" maxlength="140" /> <img class="icon" src="/img/search-icon.svg"            @click="searchEvent()" />        <div class="search-box-history" v-if="searchHistoryShowState">            <div class="search-box-history-title">历史搜索</div>            <div class="search-box-history-list">                <div class="search-box-history-item one-line-display" v-for="(item,index) in historySearchList "                    :key="index" @click="searchEvent(item)">{{ item }}</div>            </div>        </div>    </div>    <div class="post-list flexacenter" v-if="page == 'details'"> <a href="/publish" target="_blank"            style="margin-right: 10px"> <img class="post-item" src="/img/post-thread.png" /> </a> <a            href="https://offer.gter.net/post" target="_blank" style="margin-right: 10px"> <img class="post-item"                src="/img/post-offer.png" /> </a> <a href="https://offer.gter.net/post/summary" target="_blank"            style="margin-right: 10px"> <img class="post-item" src="/img/post-summary.png" /> </a> <a            href="https://interviewexperience.gter.net/publish" target="_blank" style="margin-right: 10px"> <img                class="post-item" src="/img/post-mj.png" /> </a> <a href="https://vote.gter.net/publish" target="_blank"            style="margin-right: 10px"> <img class="post-item" src="/img/post-vote.png" /> </a> </div> <template v-else>        <div class="sign-in sign-in-no flexacenter" v-if="state == 0" @click="signIn()" v-cloak> <img class="sign-in-bj"                src="/img/sign-in-bj.svg" /> <img class="coin-bj" src="/img/coin-bj.svg" /> <img class="coin-icon"                src="/img/coin-icon.png" /> <span class="text flex1">签到领寄托币</span>            <div class="sign-go flexcenter">                <img class="sign-go-bj" src="/img/sign-go.svg" /> GO            </div>            <img class="petal1" src="/img/petal1.png" />            <img class="petal2" src="/img/petal2.png" />            <img class="petal3" src="/img/petal3.png" />        </div>        <div class="sign-in sign-in-already flexcenter" v-else @click="signIn()">            <img class="sign-icon" src="/img/sign-icon.png" />            <span>已签到，明天再来</span>        </div>    </template></div>`,
+    template: `<div class="head-top flexacenter">    <a href="/" class="flexacenter" target="_blank">        <img class="logo" src="https://oss.gter.net/logo" alt="" />    </a>    <div class="flex1"></div>    <div class="input-box flexacenter" :class="{'pitch': searchInputState}">        <div class="placeholder" v-if="!searchInputState && !input">            <div class="placeholder-box" :style="{transform: 'translateY(-' + currentIndex * 36 + 'px)', transition: 'transform .3s ease'}">                <div class="item one-line-display" v-for="(item,index) in hotSearchWords" :key="index">大家都在搜：{{                    item.keyword }}</div>                <div class="item one-line-display" v-for="(item,index) in hotSearchWords.slice(0, 2)" :key="'copy-' + index">大家都在搜：{{ item.keyword }}</div>            </div>        </div>        <input class="input flex1" type="text" @keyup.enter="searchEvent()" v-model="input" @focus="searchInputFocus" @blur="searchInputBlur" maxlength="140" /> <img class="icon" src="/img/search-icon.svg" @click="searchEvent()" />        <div class="search-box-history" v-if="searchHistoryShowState">            <div class="search-box-history-title">历史搜索</div>            <div class="search-box-history-list">                <div class="search-box-history-item one-line-display" v-for="(item,index) in historySearchList " :key="index" @click="searchEvent(item)">{{ item }}</div>            </div>        </div>    </div>    <div class="post-list flexacenter" v-if="page == 'details'"><a href="/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-thread.png" /> </a> <a href="https://offer.gter.net/post" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-offer.png" /> </a> <a href="https://offer.gter.net/post/summary" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-summary.png" /> </a> <a href="https://interviewexperience.gter.net/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-mj.png" /> </a> <a href="https://vote.gter.net/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-vote.png" /> </a> </div>    <template v-else>        <div class="sign-in  flexacenter" :class="{'sign-in-already': state == 1, 'sign-in-no': state == 0}" @click="signIn()" v-cloak>            <div class="sign-in-no-box">                <img class="sign-in-bj" src="/img/sign-in-bj.svg" /> <img class="coin-bj" src="/img/coin-bj.svg" />                <img class="coin-icon" src="/img/coin-icon.png" /> <span class="text flex1">签到领寄托币</span>                <div class="sign-go flexcenter">                    <img class="sign-go-bj" src="/img/sign-go.svg" /> GO                </div>                <img class="petal1" src="/img/petal1.png" />                <img class="petal2" src="/img/petal2.png" />                <img class="petal3" src="/img/petal3.png" />            </div>            <div class="sign-in-already-box">                <img class="sign-icon" src="/img/sign-icon.png" />                <span>已签到，明天再来</span>            </div>        </div>    </template></div>`,
 });

component/head-top/head-top.txt

@@ -5,47 +5,40 @@
     <div class="flex1"></div>
     <div class="input-box flexacenter" :class="{'pitch': searchInputState}">
         <div class="placeholder" v-if="!searchInputState && !input">
-            <div class="placeholder-box"
+            <div class="placeholder-box" :style="{transform: 'translateY(-' + currentIndex * 36 + 'px)', transition: 'transform .3s ease'}">
-                :style="{transform: 'translateY(-' + currentIndex * 36 + 'px)', transition: 'transform .3s ease'}">
                 <div class="item one-line-display" v-for="(item,index) in hotSearchWords" :key="index">大家都在搜：{{
                     item.keyword }}</div>
-                <div class="item one-line-display" v-for="(item,index) in hotSearchWords.slice(0, 2)"
+                <div class="item one-line-display" v-for="(item,index) in hotSearchWords.slice(0, 2)" :key="'copy-' + index">大家都在搜：{{ item.keyword }}</div>
-                    :key="'copy-' + index">大家都在搜：{{ item.keyword }}</div>
             </div>
         </div>
 
-        <input class="input flex1" type="text" @keyup.enter="searchEvent()" v-model="input" @focus="searchInputFocus"
+        <input class="input flex1" type="text" @keyup.enter="searchEvent()" v-model="input" @focus="searchInputFocus" @blur="searchInputBlur" maxlength="140" /> <img class="icon" src="/img/search-icon.svg" @click="searchEvent()" />
-            @blur="searchInputBlur" maxlength="140" /> <img class="icon" src="/img/search-icon.svg"
-            @click="searchEvent()" />
         <div class="search-box-history" v-if="searchHistoryShowState">
             <div class="search-box-history-title">历史搜索</div>
             <div class="search-box-history-list">
-                <div class="search-box-history-item one-line-display" v-for="(item,index) in historySearchList "
+                <div class="search-box-history-item one-line-display" v-for="(item,index) in historySearchList " :key="index" @click="searchEvent(item)">{{ item }}</div>
-                    :key="index" @click="searchEvent(item)">{{ item }}</div>
             </div>
         </div>
     </div>
-    <div class="post-list flexacenter" v-if="page == 'details'"> <a href="/publish" target="_blank"
+    <div class="post-list flexacenter" v-if="page == 'details'"><a href="/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-thread.png" /> </a> <a href="https://offer.gter.net/post" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-offer.png" /> </a> <a href="https://offer.gter.net/post/summary" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-summary.png" /> </a> <a href="https://interviewexperience.gter.net/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-mj.png" /> </a> <a href="https://vote.gter.net/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-vote.png" /> </a> </div>
-            style="margin-right: 10px"> <img class="post-item" src="/img/post-thread.png" /> </a> <a
+    <template v-else>
-            href="https://offer.gter.net/post" target="_blank" style="margin-right: 10px"> <img class="post-item"
+        <div class="sign-in  flexacenter" :class="{'sign-in-already': state == 1, 'sign-in-no': state == 0}" @click="signIn()" v-cloak>
-                src="/img/post-offer.png" /> </a> <a href="https://offer.gter.net/post/summary" target="_blank"
+            <div class="sign-in-no-box">
-            style="margin-right: 10px"> <img class="post-item" src="/img/post-summary.png" /> </a> <a
+                <img class="sign-in-bj" src="/img/sign-in-bj.svg" /> <img class="coin-bj" src="/img/coin-bj.svg" />
-            href="https://interviewexperience.gter.net/publish" target="_blank" style="margin-right: 10px"> <img
+                <img class="coin-icon" src="/img/coin-icon.png" /> <span class="text flex1">签到领寄托币</span>
-                class="post-item" src="/img/post-mj.png" /> </a> <a href="https://vote.gter.net/publish" target="_blank"
+                <div class="sign-go flexcenter">
-            style="margin-right: 10px"> <img class="post-item" src="/img/post-vote.png" /> </a> </div> <template v-else>
+                    <img class="sign-go-bj" src="/img/sign-go.svg" /> GO
-        <div class="sign-in sign-in-no flexacenter" v-if="state == 0" @click="signIn()" v-cloak> <img class="sign-in-bj"
+                </div>
-                src="/img/sign-in-bj.svg" /> <img class="coin-bj" src="/img/coin-bj.svg" /> <img class="coin-icon"
+                <img class="petal1" src="/img/petal1.png" />
-                src="/img/coin-icon.png" /> <span class="text flex1">签到领寄托币</span>
+                <img class="petal2" src="/img/petal2.png" />
-            <div class="sign-go flexcenter">
+                <img class="petal3" src="/img/petal3.png" />
-                <img class="sign-go-bj" src="/img/sign-go.svg" /> GO
             </div>
-            <img class="petal1" src="/img/petal1.png" />
+
-            <img class="petal2" src="/img/petal2.png" />
+            <div class="sign-in-already-box">
-            <img class="petal3" src="/img/petal3.png" />
+                <img class="sign-icon" src="/img/sign-icon.png" />
-        </div>
+                <span>已签到，明天再来</span>
-        <div class="sign-in sign-in-already flexcenter" v-else @click="signIn()">
+            </div>
-            <img class="sign-icon" src="/img/sign-icon.png" />
+
-            <span>已签到，明天再来</span>
         </div>
     </template>
 </div>

component/sign-in/sign-in.js

@@ -213,6 +213,7 @@ class SignInBox extends HTMLElement {
     }
 
     postSign() {
+        console.log('document.querySelector(".sign-in")', document.querySelector(".sign-in"));
         if (this.issign == 1) {
             creationAlertBox("error", "今天已签到，明天记得来哦~");
             return;
@@ -230,11 +231,7 @@ class SignInBox extends HTMLElement {
                 creationAlertBox("error", res.message);
                 return;
             }
-            // res.data = {
+
-            //     extra_reward: 0,
-            //     reward: 28,
-            //     rank: 500,
-            // };
             const data = res.data || {};
             const rewardT = data.extra_reward * 1 + data.reward * 1 || 0;
             this.setField("integral", (Number(this.shadowRoot.querySelector('[data-field="integral"]').textContent) || 0) + rewardT);
@@ -255,6 +252,10 @@ class SignInBox extends HTMLElement {
             const signBtn = this.shadowRoot.querySelector('[data-action="sign"]');
             signBtn.textContent = "今天已签到，明天记得来哦~";
             signBtn.classList.add("already");
+
+            const sign = document.querySelector(".sign-in");
+            sign.classList.add("sign-in-already");
+            sign.classList.remove("sign-in-no");
         });
     }
 

css/details.css

@@ -187,7 +187,8 @@
   height: 300px;
   display: block;
 }
-#details .matter .matter-left .html h1 {
+#details .matter .matter-left .html h1,
+#details .matter .matter-left .html section {
   font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
   font-weight: 650;
   color: #000000 !important;
@@ -389,6 +390,20 @@
   height: 120px;
   margin-bottom: 18px;
 }
+#details .matter .sidebar-box .sidebar-item .sidebar-content .sidebar-QRCode img {
+  width: 100%;
+  height: 100%;
+}
+#details .matter .sidebar-box .sidebar-item .sidebar-content .QRcode {
+  width: 100px;
+  height: 100px;
+  margin-bottom: 4px;
+}
+#details .matter .sidebar-box .sidebar-item .sidebar-content .QRcode .load {
+  width: 50px;
+  height: 50px;
+  animation: loadingRotate 1s linear infinite;
+}
 #details .matter .sidebar-box .sidebar-item .sidebar-content .hint {
   font-size: 14px;
   color: #555555;

css/details.less

@@ -198,7 +198,6 @@
 
                     * {
                         color: #04b0d5 !important;
-
                     }
                 }
 
@@ -221,15 +220,14 @@
                     display: block;
                 }
 
-                h1 {
+                h1,
+                section {
                     font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
                     font-weight: 650;
                     color: #000000 !important;
                     font-size: 18px;
                     line-height: 30px;
                 }
-
-
             }
 
             .last-time {
@@ -467,6 +465,23 @@
                         width: 120px;
                         height: 120px;
                         margin-bottom: 18px;
+
+                        img {
+                            width: 100%;
+                            height: 100%;
+                        }
+                    }
+
+                    .QRcode {
+                        width: 100px;
+                        height: 100px;
+                        margin-bottom: 4px;
+
+                        .load {
+                            width: 50px;
+                            height: 50px;
+                            animation: loadingRotate 1s linear infinite;
+                        }
                     }
 
                     .hint {
@@ -904,7 +919,8 @@
     cursor: pointer;
 }
 
-.answer-discuss .input-box .bottom .operate .item {}
+.answer-discuss .input-box .bottom .operate .item {
+}
 
 .answer-discuss .input-box .bottom .operate .item .emoji-box {
     width: 582px;
@@ -1647,7 +1663,6 @@
             .comments-box {
                 .comments-item {
                     .comments-header {
-
                         .comment-icon,
                         .like-box {
                             margin-left: 15px;
@@ -1657,4 +1672,4 @@
             }
         }
     }
-}
+}

css/public.css

@@ -1571,8 +1571,6 @@ body {
   text-decoration: underline;
 }
 .head-top {
-  margin-top: 20px;
-  margin-bottom: 30px;
   position: relative;
   z-index: 4;
 }
@@ -1627,6 +1625,7 @@ body {
   cursor: pointer;
 }
 .head-top .input-box .search-box-history {
+  display: none;
   width: 460px;
   /* height: 267px; */
   background-color: #ffffff;
@@ -1657,22 +1656,43 @@ body {
   height: 40px;
   border-radius: 83px;
   cursor: pointer;
+  display: none;
+}
+.head-top .sign-in .sign-in-already-box {
+  display: none;
 }
 .head-top .sign-in.sign-in-already {
   background-color: #ffffff;
   font-size: 14px;
   color: #333;
 }
+.head-top .sign-in.sign-in-already .sign-in-already-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 192px;
+  height: 40px;
+}
 .head-top .sign-in.sign-in-already .sign-icon {
   width: 20px;
   height: 20px;
   margin-right: 10px;
 }
+.head-top .sign-in.sign-in-already .sign-in-no-box {
+  display: none;
+}
 .head-top .sign-in.sign-in-no {
   position: relative;
   z-index: 1;
   padding-right: 8px;
 }
+.head-top .sign-in.sign-in-no .sign-in-no-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 192px;
+  height: 40px;
+}
 .head-top .sign-in.sign-in-no .sign-in-bj {
   position: absolute;
   top: 0;
@@ -1741,6 +1761,9 @@ body {
   top: 25px;
   left: 136px;
 }
+.head-top .post-list {
+  display: none;
+}
 .head-top .post-list .post-item {
   width: 84px;
   height: 34px;

css/public.less

@@ -1896,10 +1896,10 @@ body {
 }
 
 .head-top {
-    margin-top: 20px;
-    margin-bottom: 30px;
     position: relative;
     z-index: 4;
+    // max-width: 1200px;
+    // margin: 20px auto 30px;
 
     .logo {
         height: 52px;
@@ -1961,6 +1961,7 @@ body {
         }
 
         .search-box-history {
+            display: none;
             width: 460px;
             /* height: 267px; */
             background-color: rgba(255, 255, 255, 1);
@@ -1996,17 +1997,33 @@ body {
         height: 40px;
         border-radius: 83px;
         cursor: pointer;
+        display: none;
+
+        .sign-in-already-box {
+            display: none;
+        }
 
         &.sign-in-already {
             background-color: #ffffff;
             font-size: 14px;
             color: #333;
+            .sign-in-already-box {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 192px;
+                height: 40px;
+            }
 
             .sign-icon {
                 width: 20px;
                 height: 20px;
                 margin-right: 10px;
             }
+
+            .sign-in-no-box {
+                display: none;
+            }
         }
 
         &.sign-in-no {
@@ -2014,6 +2031,15 @@ body {
             z-index: 1;
             padding-right: 8px;
 
+            .sign-in-no-box {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                width: 192px;
+                height: 40px;
+            }
+
             .sign-in-bj {
                 position: absolute;
                 top: 0;
@@ -2095,6 +2121,7 @@ body {
     }
 
     .post-list {
+        display: none;
         .post-item {
             width: 84px;
             height: 34px;

css/section.css

@@ -90,11 +90,17 @@
   position: relative;
   z-index: 3;
 }
-#sectionIndex .matter .matter-content .info-box .img {
+#sectionIndex .matter .matter-content .info-box .img-box {
   width: 80px;
   height: 80px;
   border-radius: 10px;
   margin-right: 20px;
+  background: #dddddd;
+}
+#sectionIndex .matter .matter-content .info-box .img-box .img {
+  border-radius: 10px;
+  width: 100%;
+  height: 100%;
 }
 #sectionIndex .matter .matter-content .info-box .right .title {
   font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;

css/section.less

@@ -97,11 +97,17 @@
                 position: relative;
                 z-index: 3;
 
-                .img {
+                .img-box {
                     width: 80px;
                     height: 80px;
                     border-radius: 10px;
                     margin-right: 20px;
+                    background: #dddddd;
+                    .img {
+                        border-radius: 10px;
+                        width: 100%;
+                        height: 100%;
+                    }
                 }
 
                 .right {

index.html

@@ -10,6 +10,7 @@
 
     <script src="./js/vue.global.js"></script>
     <script src="./component/bi/bi.js"></script>
+    <!-- <script src="./component/head-top-web/head-top-web.js"></script> -->
     <style>
         [v-cloak] {
             display: none;
@@ -18,10 +19,52 @@
 </head>
 
 <body>
-    <div class="container" id="appIndex" v-cloak>
+    <div class="container" id="appIndex">
-        <head-top></head-top>
+        <!-- <head-top></head-top> -->
+        <div class="head-top flexacenter">
+            <a href="/" class="flexacenter" target="_blank">
+                <img class="logo" src="https://oss.gter.net/logo" alt="" />
+            </a>
+            <div class="flex1"></div>
+            <div class="input-box flexacenter">
+                <!-- <div class="placeholder" v-if="!searchInputState && !input"> -->
+                <div class="placeholder">
+                    <div class="placeholder-box" :style="{transform: 'translateY(-' + currentIndex * 36 + 'px)', transition: 'transform .3s ease'}">
+                        <!-- <div class="item one-line-display" v-for="(item,index) in hotSearchWords" :key="index">大家都在搜：{{ item.keyword }}</div>
+                        <div class="item one-line-display" v-for="(item,index) in hotSearchWords.slice(0, 2)" :key="'copy-' + index">大家都在搜：{{ item.keyword }}</div> -->
+                    </div>
+                </div>
+
+                <input class="input flex1" type="text" maxlength="140" /> <img class="icon" onclick="searchEvent()" src="/img/search-icon.svg" />
+                <div class="search-box-history">
+                    <div class="search-box-history-title">历史搜索</div>
+                    <div class="search-box-history-list">
+                    </div>
+                </div>
+            </div>
+
+            <div class="post-list flexacenter"><a href="/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-thread.png" /> </a> <a href="https://offer.gter.net/post" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-offer.png" /> </a> <a href="https://offer.gter.net/post/summary" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-summary.png" /> </a> <a href="https://interviewexperience.gter.net/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-mj.png" /> </a> <a href="https://vote.gter.net/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-vote.png" /> </a> </div>
+            <div class="sign-in sign-in-no flexacenter">
+                <div class="sign-in-no-box" onclick="headSignIn()">
+                    <img class="sign-in-bj" src="/img/sign-in-bj.svg" /><img class="coin-bj" src="/img/coin-bj.svg" />
+                    <img class="coin-icon" src="/img/coin-icon.png" /><span class="text flex1">签到领寄托币</span>
+                    <div class="sign-go flexcenter">
+                        <img class="sign-go-bj" src="/img/sign-go.svg" /> GO
+                    </div>
+                    <img class="petal1" src="/img/petal1.png" />
+                    <img class="petal2" src="/img/petal2.png" />
+                    <img class="petal3" src="/img/petal3.png" />
+                </div>
+                <div class="sign-in-already-box">
+                    <img class="sign-icon" src="/img/sign-icon.png" />
+                    <span>已签到，明天再来</span>
+                </div>
+            </div>
+
+        </div>
+
+        <!-- <head-top-web></head-top-web> -->
 
-        <div class="" @click="clickbtn()">按钮</div>
         <bi-card coins="20" token="_TXzU0MGGjdPFL8RR-Qmja2gGEbUCNPUddwAdczWPJctueas3yXWMkYCvr96dc95-Wu_WCMXYd1kHBCRMdIeydneWA5hsg4_a8hkH5tGKdrxdc_OPQtzsCPybE62xK9rPRFsdPwzQI9pqQYthZYqcANTqof0CpHcMS3yUP1NIvFnJ602njRjNTY~"></bi-card>
 
         <div class="header-content-box flexflex">
@@ -278,6 +321,170 @@
     <script src="./js/public.js"></script>
     <script src="./js/scrolltext.js"></script>
     <script type="module" src="./js/index.js"></script>
+
+    <script>
+        if (location.href.indexOf('details') != -1) {
+            const postList = document.querySelector('.head-top .post-list')
+            postList.style.display = 'flex'
+        } else {
+            const signIn = document.querySelector('.head-top .sign-in')
+            signIn.style.display = 'flex'
+
+
+            let userInfoWinTimerCount = 0;
+            const userInfoWinTimer = setInterval(() => {
+                if (location.host == "127.0.0.1:5501") return;
+
+                if (todaysignedState) {
+                    clearInterval(userInfoWinTimer);
+
+                    if (todaysigned == 1) {
+                        signIn.classList.add('sign-in-already')
+                        signIn.classList.remove("sign-in-no");
+                    }
+                }
+                userInfoWinTimerCount++;
+                if (userInfoWinTimerCount >= 3000) clearInterval(userInfoWinTimer);
+            }, 50);
+
+        }
+
+        function headSignIn() {
+            SignInComponent.initComponent();
+        }
+
+        const searchInput = document.querySelector('.head-top .input')
+
+        // 绑定 blur 和 focus 事件
+        if (searchInput) {
+            searchInput.addEventListener('blur', function () {
+                console.log('blur');
+                const historyBox = document.querySelector('.head-top .search-box-history')
+                if (historyBox) historyBox.style.display = 'none'
+
+                const inputBox = document.querySelector('.head-top .input-box')
+                if (inputBox) inputBox.classList.remove('pitch')
+            })
+            searchInput.addEventListener('focus', () => {
+                console.log('focus');
+                const historyBox = document.querySelector('.head-top .search-box-history')
+                if (historyBox) historyBox.style.display = 'block'
+
+                const inputBox = document.querySelector('.head-top .input-box')
+                if (inputBox) inputBox.classList.add('pitch')
+            })
+            // 绑定回车事件
+            searchInput.addEventListener('keydown', (e) => {
+                if (e.key == 'Enter') searchEvent()
+
+            })
+        }
+
+
+        let historySearchList = []
+        // 获取历史搜索
+        const getHistorySearch = () => {
+            const data = JSON.parse(localStorage.getItem("history-search")) || [];
+            console.log('历史搜索', data);
+            historySearchList = data;
+
+            let itemAll = ``
+            data.forEach((item, index) => {
+                itemAll += `<div class="search-box-history-item one-line-display" onclick="searchEvent('${item}')">${item}</div>` // 绑定事件 searchEvent 点击搜索
+            })
+
+            const historyList = document.querySelector('.search-box-history-list')
+            historyList.innerHTML = itemAll
+        };
+
+        getHistorySearch();
+
+
+        const searchEvent = (value) => {
+            const kw = value || searchInput.value || hotSearchWords[currentIndex]?.keyword || "";;
+            if (!kw) return;
+            historySearchList.unshift(kw);
+            historySearchList = [...new Set(historySearchList)];
+            if (historySearchList.length > 10) historySearchList = historySearchList.splice(0, 10);
+            localStorage.setItem("history-search", JSON.stringify(historySearchList));
+            redirectToExternalWebsite("/search/" + kw);
+        }
+
+        let hotSearchWords = [];
+
+        const renderingPlaceholder = () => {
+            console.log('hotSearchWords', hotSearchWords);
+            let itemAll = ``
+            hotSearchWords.forEach(item => {
+                itemAll += `<div class="item one-line-display" >大家都在搜：${item.keyword}</div>`
+            })
+
+            const sliceHotSearchWords = hotSearchWords.slice(0, 2)
+            sliceHotSearchWords.forEach(item => {
+                itemAll += `<div class="item one-line-display" >大家都在搜：${item.keyword}</div>`
+            })
+
+            const placeholderBox = document.querySelector('.placeholder .placeholder-box')
+            placeholderBox.innerHTML = itemAll
+
+        }
+
+        const checkWConfig = () => {
+            const wConfig = JSON.parse(localStorage.getItem("wConfig")) || {};
+            if (wConfig.time) {
+                const time = new Date(wConfig.time);
+                const now = new Date();
+                if (now - time > 24 * 60 * 60 * 1000) getWConfig();
+                else {
+                    hotSearchWords = wConfig.hotSearchWords || [];
+                    renderingPlaceholder()
+                }
+            } else getWConfig();
+        };
+        checkWConfig()
+
+        const getWConfig = () => {
+            ajaxGet("/v2/api/config/website").then((res) => {
+                if (res.code == 200) {
+                    let data = res["data"] || {};
+                    hotSearchWords = data.hotSearchWords || [];
+                    renderingPlaceholder()
+                    data.time = new Date().toISOString();
+                    localStorage.setItem("wConfig", JSON.stringify(data));
+                }
+            });
+        };
+
+        const renderCurrentIndex = () => {
+            const placeholderBox = document.querySelector('.placeholder .placeholder-box')
+            if (placeholderBox) placeholderBox.style.transform = `translateY(${-currentIndex * 36}px)`
+        }
+
+        let currentIndex = 0; // 当前显示的关键词索引
+        let carouselTimer = null; // 轮播定时器
+
+        // 启动轮播函数
+        const startCarousel = () => {
+            // 清除已有的定时器
+            if (carouselTimer) clearInterval(carouselTimer);
+            // 设置新的定时器，每秒滚动一次
+            carouselTimer = setInterval(() => {
+                if (hotSearchWords.length > 1) {
+                    if (currentIndex >= hotSearchWords.length - 1) {
+                        currentIndex++;
+                        setTimeout(() => {
+                            currentIndex = 0;
+                        }, 2300);
+                    } else currentIndex++;
+                }
+                renderCurrentIndex()
+                console.log('currentIndex', currentIndex);
+            }, 2300);
+        };
+
+        startCarousel();
+
+    </script>
 </body>
 
 </html>

js/save.js

@@ -34,6 +34,9 @@ const watchList = {
 
     // 监听 sign-in.txt，同步到 sign-in.js
     "../component/sign-in/sign-in.txt": "../component/sign-in/sign-in.js",
+    
+    // 监听 head-top-web.txt，同步到 head-top-web.js
+    "../component/head-top-web/head-top-web.txt": "../component/head-top-web/head-top-web.js",
 
     // 监听 bi.txt，同步到 bi.js
     "../component/bi/bi.txt": "../component/bi/bi.js",