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

121
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,84 +251,85 @@ export function Home() {
); );
} }
/** function leftDivFun() {
/**
* 左边广告位 * 左边广告位
*/ */
//声明div //声明div
const leftDiv = document.createElement("div"); const leftDiv = document.createElement("div");
//设置元素class或者id //设置元素class或者id
//设置id为leftDiv //设置id为leftDiv
leftDiv.setAttribute("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.src = "/gaobaipingtai.jpg";
leftImg.style.width = "100%"; leftImg.style.width = "100%";
leftImg.style.height = "100%"; leftImg.style.height = "100%";
internalDiv.appendChild(leftImg); internalDiv.appendChild(leftImg);
leftDiv.appendChild(internalDiv); leftDiv.appendChild(internalDiv);
//把左边广告位div放入body中 //把左边广告位div放入body中
document.body.appendChild(leftDiv); document.body.appendChild(leftDiv);
// 添加鼠标移入事件 // 添加鼠标移入事件
leftImg.addEventListener("mouseover", function () { leftImg.addEventListener("mouseover", function () {
// leftImg.style.display = 'none'; // leftImg.style.display = 'none';
leftImg.src = "/gaobaiguanzhu.png"; leftImg.src = "/gaobaiguanzhu.png";
// internalDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.1)'; // internalDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
}); });
// 添加鼠标移出事件 // 添加鼠标移出事件
leftImg.addEventListener("mouseout", function () { leftImg.addEventListener("mouseout", function () {
leftImg.src = "/gaobaipingtai.jpg"; leftImg.src = "/gaobaipingtai.jpg";
// internalDiv.style.backgroundColor = 'rgba(0, 0, 0, 0)'; // internalDiv.style.backgroundColor = 'rgba(0, 0, 0, 0)';
}); });
// 添加点击事件监听器 // 添加点击事件监听器
closeDiv.addEventListener("click", function () { closeDiv.addEventListener("click", function () {
// leftDiv.style.display = 'none'; // leftDiv.style.display = 'none';
// 移除内部所有子元素 // 移除内部所有子元素
while (leftDiv.firstChild) { while (leftDiv.firstChild) {
@ -338,4 +338,5 @@ closeDiv.addEventListener("click", function () {
// 移除自身 // 移除自身
leftDiv.remove(); leftDiv.remove();
}); });
}