From f8335cb03b17f7ec2f541b5937f50b4bef47f8a0 Mon Sep 17 00:00:00 2001
From: liuweiqing <liuweiqing147@gmail.com>
Date: Sun, 25 Feb 2024 14:21:32 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E9=80=9A=E5=91=8A=E5=92=8C=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/LoadingIndicator.tsx | 13 ++++++++++++
 components/QuillEditor.tsx      | 35 +++++++++++++++++++++++++++++++--
 components/QuillWrapper.tsx     |  2 ++
 components/Settings.tsx         | 18 ++++++++++++++++-
 tailwind.config.js              |  9 +++++++++
 5 files changed, 74 insertions(+), 3 deletions(-)
 create mode 100644 components/LoadingIndicator.tsx

diff --git a/components/LoadingIndicator.tsx b/components/LoadingIndicator.tsx
new file mode 100644
index 0000000..e172902
--- /dev/null
+++ b/components/LoadingIndicator.tsx
@@ -0,0 +1,13 @@
+// @/components/LoadingIndicator.tsx
+import React from "react";
+
+function LoadingIndicator() {
+  return (
+    <div className="flex justify-center items-center p-5">
+      <div className="spinner animate-spin rounded-full h-8 w-8 border-4 border-blue-500 border-t-transparent"></div>
+      <p className="text-lg">Loading editor...</p>
+    </div>
+  );
+}
+
+export default LoadingIndicator;
diff --git a/components/QuillEditor.tsx b/components/QuillEditor.tsx
index d316c02..023d5a5 100644
--- a/components/QuillEditor.tsx
+++ b/components/QuillEditor.tsx
@@ -4,7 +4,6 @@ import React, { useState, useEffect, useRef } from "react";
 import Quill from "quill";
 import "quill/dist/quill.snow.css";
 import { useLocalStorage } from "react-use";
-import Link from "next/link";
 
 // 一些工具函数导入
 import getArxivPapers from "./GetArxiv";
@@ -118,6 +117,10 @@ const QEditor = ({ lng }) => {
   const [timeRange, setTimeRange] = useLocalStorage("时间范围", "2019");
   const [generateNumber, setGenerateNumber] = useState(0); //当前任务的进行数
   const [openProgressBar, setOpenProgressBar] = useState(false);
+  const [showAnnouncement, setShowAnnouncement] = useLocalStorage(
+    "显示公告",
+    true
+  ); // 是否显示公告
 
   //redux
   const dispatch = useAppDispatch();
@@ -212,7 +215,35 @@ const QEditor = ({ lng }) => {
       console.log("No editor.current to update in useEffect.");
     }
   }, [editorContent, contentUpdatedFromNetwork]);
-
+  //日常通知可以放在这里
+  useEffect(() => {
+    if (showAnnouncement) {
+      toast(
+        "📢 如果遇到模型无法响应的情况，建议右上角切换为deepseek模型（强于3.5，弱于4），同时这里也要选择deepseek",
+        {
+          position: "top-center",
+          autoClose: false, // 设置为 false，使得公告需要用户手动关闭，确保用户看到公告信息
+          closeOnClick: false, // 防止用户意外点击关闭公告
+          pauseOnHover: true, // 鼠标悬停时暂停自动关闭，因为 autoClose 已设为 false，此设置可保留或去除
+          draggable: true, // 允许用户拖动公告
+          progress: undefined,
+          closeButton: true, // 显示关闭按钮，让用户可以在阅读完毕后关闭公告
+          hideProgressBar: true, // 隐藏进度条，因为公告不会自动关闭
+          style: {
+            // 自定义样式，使公告更加显眼
+            backgroundColor: "#fffae6", // 浅黄色背景
+            color: "#333333", // 文字颜色
+            fontWeight: "bold",
+            fontSize: "16px",
+            border: "1px solid #ffd700", // 边框颜色
+            boxShadow: "0px 0px 10px #ffd700", // 添加阴影，增加显眼度
+          },
+          // 当公告被关闭时，设置 localStorage，以防再次显示
+          onClose: () => setShowAnnouncement(false),
+        }
+      );
+    }
+  }, []);
   const handleTextChange = debounce(async function (delta, oldDelta, source) {
     if (source === "user") {
       // 获取编辑器内容
diff --git a/components/QuillWrapper.tsx b/components/QuillWrapper.tsx
index da9b8d2..4b2d0f9 100644
--- a/components/QuillWrapper.tsx
+++ b/components/QuillWrapper.tsx
@@ -1,11 +1,13 @@
 "use client";
 import dynamic from "next/dynamic";
 import ReduxProvider from "@/app/store/ReduxProvider";
+import LoadingIndicator from "@/components/LoadingIndicator"; // 确保路径正确
 // import QEditor from "@/components/QuillEditor";
 
 // 动态导入 QuillEditor 组件，禁用 SSR
 const QEditor = dynamic(() => import("@/components/QuillEditor"), {
   ssr: false,
+  loading: () => <LoadingIndicator />,
 });
 export default function QuillWrapper({ lng }) {
   return (
diff --git a/components/Settings.tsx b/components/Settings.tsx
index 8b2e70f..04eb1ea 100644
--- a/components/Settings.tsx
+++ b/components/Settings.tsx
@@ -16,6 +16,10 @@ import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
 import { useLocalStorage } from "react-use";
 import { useTranslation } from "@/app/i18n/client";
+import { useEffect } from "react";
+//公告
+// import { ToastContainer, toast } from "react-toastify";
+// import "react-toastify/dist/ReactToastify.css";
 
 const Settings = ({ lng }: { lng: string }) => {
   //i18n
@@ -36,7 +40,6 @@ const Settings = ({ lng }: { lng: string }) => {
       apiKey: "sk-pg92xYjZA208m6gnD56118E299B5448eB71f892cF68351D9",
       upstreamUrl: "https://one.caifree.com",
     },
-
     {
       name: t("configurations.vv佬"),
       apiKey: "nk-23118",
@@ -69,6 +72,18 @@ const Settings = ({ lng }: { lng: string }) => {
   const toggleSwitch = (currentState: any, setState: any) => {
     setState(!currentState);
   };
+
+  // useEffect(() => {
+  //   toast("这是一个公告消息!", {
+  //     position: "top-center",
+  //     autoClose: 5000, // 持续时间
+  //     hideProgressBar: false,
+  //     closeOnClick: true,
+  //     pauseOnHover: true,
+  //     draggable: true,
+  //     progress: undefined,
+  //   });
+  // }, []);
   return (
     <div className="max-w-md rounded overflow-hidden shadow-lg bg-blue-gray-100 z-1000  mx-auto ">
       <h1 className="font-bold text-3xl">settings</h1>
@@ -194,6 +209,7 @@ const Settings = ({ lng }: { lng: string }) => {
         ></span>
         {t("是否检查文献与主题相关性(如果不相关则不会传给AI引用)")}
       </label>
+      {/* <ToastContainer /> */}
     </div>
   );
 };
diff --git a/tailwind.config.js b/tailwind.config.js
index d687c88..c62c179 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -18,6 +18,15 @@ module.exports = {
         },
         gold: "#FFD700",
       },
+      animation: {
+        spin: "spin 1s linear infinite",
+      },
+      keyframes: {
+        spin: {
+          "0%": { transform: "rotate(0deg)" },
+          "100%": { transform: "rotate(360deg)" },
+        },
+      },
     },
   },
   plugins: [],