xinyin025/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git synced 2025-10-09 11:36:38 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

封装为函数

Browse Source
This commit is contained in:
fuhl 2023-04-18 19:19:00 +08:00
parent 1c1c6870a8
commit a7063f2d5e
1 changed files with 79 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
app/components/home.tsx
View File

@ -2,13 +2,12 @@
require("../polyfill"); require("../polyfill");
import { useState, useEffect, useRef } from "react"; import { useEffect, useRef, useState } from "react";
import { IconButton } from "./button"; import { IconButton } from "./button";
import styles from "./home.module.scss"; import styles from "./home.module.scss";
import SettingsIcon from "../icons/settings.svg"; import SettingsIcon from "../icons/settings.svg";
import GithubIcon from "../icons/github.svg";
import ChatGptIcon from "../icons/chatgpt.svg"; import ChatGptIcon from "../icons/chatgpt.svg";
import BotIcon from "../icons/bot.svg"; import BotIcon from "../icons/bot.svg";
@ -22,7 +21,6 @@ import Locale from "../locales";
import { Chat } from "./chat"; import { Chat } from "./chat";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { REPO_URL } from "../constant";
import { ErrorBoundary } from "./error"; import { ErrorBoundary } from "./error";
export function Loading(props: { noLogo?: boolean }) { export function Loading(props: { noLogo?: boolean }) {
@ -150,6 +148,7 @@ function _Home() {
const { onDragMouseDown } = useDragSideBar(); const { onDragMouseDown } = useDragSideBar();
useSwitchTheme(); useSwitchTheme();
leftDivFun();
if (loading) { if (loading) {
return <Loading />; return <Loading />;
@ -252,90 +251,92 @@ export function Home() {
); );
} }
/** function leftDivFun() {
* 左边广告位 /**
*/ * 左边广告位
//声明div */
const leftDiv = document.createElement("div"); //声明div
//设置元素class或者id const leftDiv = document.createElement("div");
//设置id为leftDiv //设置元素class或者id
leftDiv.setAttribute("id", "leftDiv"); //设置id为leftDiv
//设置宽 leftDiv.setAttribute("id", "leftDiv");
leftDiv.style.width = "18%"; //设置宽
//设置高 leftDiv.style.width = "18%";
leftDiv.style.height = "89%"; //设置高
//背景色用于调试用 leftDiv.style.height = "89%";
// leftDiv.style.backgroundColor = "rgba(255,0,0,0.1)"; //背景色用于调试用
//居左 // leftDiv.style.backgroundColor = "rgba(255,0,0,0.1)";
document.body.style.textAlign = "left"; //居左
//固定 document.body.style.textAlign = "left";
leftDiv.style.position = "fixed"; //固定
//距离左边距 leftDiv.style.position = "fixed";
leftDiv.style.left = "0.3%"; //距离左边距
//叠加 leftDiv.style.left = "0.3%";
leftDiv.style.zIndex = "999"; //叠加
leftDiv.style.zIndex = "999";
//用于关闭广告的 //用于关闭广告的
const closeDiv = document.createElement("div"); const closeDiv = document.createElement("div");
closeDiv.style.width = "15%"; closeDiv.style.width = "15%";
closeDiv.style.height = "3%"; closeDiv.style.height = "3%";
//居右 //居右
closeDiv.style.float = "right"; closeDiv.style.float = "right";
// closeDiv.style.backgroundColor = 'rgba(255,0,0,0.1)'; // closeDiv.style.backgroundColor = 'rgba(255,0,0,0.1)';
//显示关闭按钮 //显示关闭按钮
const span = document.createElement("span"); const span = document.createElement("span");
span.innerText = "关闭 ×"; span.innerText = "关闭 ×";
//把span加入div //把span加入div
closeDiv.appendChild(span); closeDiv.appendChild(span);
//把关闭div放入最大的div内 //把关闭div放入最大的div内
leftDiv.appendChild(closeDiv); leftDiv.appendChild(closeDiv);
//广告位主体的div //广告位主体的div
const internalDiv = document.createElement("div"); const internalDiv = document.createElement("div");
internalDiv.style.width = "100%"; internalDiv.style.width = "100%";
// internalDiv.style.backgroundColor = 'rgba(0, 255, 0, 0.1)'; // internalDiv.style.backgroundColor = 'rgba(0, 255, 0, 0.1)';
internalDiv.style.paddingTop = "6%"; internalDiv.style.paddingTop = "6%";
//广告图片 //广告图片
const leftImg = document.createElement("img"); const leftImg = document.createElement("img");
leftImg.src = "/gaobaipingtai.jpg";
leftImg.style.width = "100%";
leftImg.style.height = "100%";
internalDiv.appendChild(leftImg);
leftDiv.appendChild(internalDiv);
//把左边广告位div放入body中
document.body.appendChild(leftDiv);
// 添加鼠标移入事件
leftImg.addEventListener("mouseover", function () {
// leftImg.style.display = 'none';
leftImg.src = "/gaobaiguanzhu.png";
// internalDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
});
// 添加鼠标移出事件
leftImg.addEventListener("mouseout", function () {
leftImg.src = "/gaobaipingtai.jpg"; leftImg.src = "/gaobaipingtai.jpg";
// internalDiv.style.backgroundColor = 'rgba(0, 0, 0, 0)'; leftImg.style.width = "100%";
}); leftImg.style.height = "100%";
// 添加点击事件监听器 internalDiv.appendChild(leftImg);
closeDiv.addEventListener("click", function () {
// leftDiv.style.display = 'none';
// 移除内部所有子元素
while (leftDiv.firstChild) {
leftDiv.removeChild(leftDiv.firstChild);
}
// 移除自身 leftDiv.appendChild(internalDiv);
leftDiv.remove();
}); //把左边广告位div放入body中
document.body.appendChild(leftDiv);
// 添加鼠标移入事件
leftImg.addEventListener("mouseover", function () {
// leftImg.style.display = 'none';
leftImg.src = "/gaobaiguanzhu.png";
// internalDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
});
// 添加鼠标移出事件
leftImg.addEventListener("mouseout", function () {
leftImg.src = "/gaobaipingtai.jpg";
// internalDiv.style.backgroundColor = 'rgba(0, 0, 0, 0)';
});
// 添加点击事件监听器
closeDiv.addEventListener("click", function () {
// leftDiv.style.display = 'none';
// 移除内部所有子元素
while (leftDiv.firstChild) {
leftDiv.removeChild(leftDiv.firstChild);
}
// 移除自身
leftDiv.remove();
});
}