From 41e3e7c86f816770cf90e750c38214fee99c6db8 Mon Sep 17 00:00:00 2001
From: liuweiqing <liuweiqing147@gmail.com>
Date: Sat, 3 Feb 2024 23:07:02 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=AE=BE=E7=BD=AE=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/globals.css                         | 18 ++++++++++++++++
 app/page.tsx                            |  3 ++-
 app/settings/page.tsx                   |  2 +-
 components/Settings.tsx                 |  2 +-
 components/SettingsLink.tsx             | 28 +++++++++++++++++++++++++
 {app => components}/SettingsWrapper.tsx |  2 +-
 tailwind.config.js                      | 17 ++++++++-------
 7 files changed, 61 insertions(+), 11 deletions(-)
 rename {app => components}/SettingsWrapper.tsx (80%)

diff --git a/app/globals.css b/app/globals.css
index 50bd9fc..eebd9a7 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -40,3 +40,21 @@
     transform: translateY(0);
   }
 }
+
+.animate-slide-in-right {
+  animation: slideInFromRight 0.5s ease-out forwards;
+}
+
+@keyframes slideInFromRight {
+  0% {
+    transform: translateX(100%); /* 从右侧外开始 */
+  }
+  100% {
+    transform: translateX(0); /* 完全进入视图 */
+  }
+}
+
+.component-container {
+  @apply fixed top-1/4 right-0;
+  transform: translateX(100%); /* 动画开始前，确保组件位于视图右侧之外 */
+}
diff --git a/app/page.tsx b/app/page.tsx
index 0623bae..9e9d5f8 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -5,12 +5,13 @@ import ConnectSupabaseSteps from "@/components/ConnectSupabaseSteps";
 import SignUpUserSteps from "@/components/SignUpUserSteps";
 import Header from "@/components/Header";
 import { cookies } from "next/headers";
-import QEditor from "@/components/QuillEditor";
 import QuillWrapper from "./QuillWrapper";
 // import TinyEditor from "../components/TinyEditor";
 // import SEditor from "../components/SlateEditor";
 import SettingsLink from "@/components/SettingsLink";
 import { ErrorBoundary } from "next/dist/client/components/error-boundary";
+// import React, { useState, useEffect, useRef } from "react";
+
 // import Error from "@/app/global-error";
 export default async function Index() {
   const cookieStore = cookies();
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index 62819e6..601518a 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -1,4 +1,4 @@
-import SettingsWrapper from "../SettingsWrapper";
+import SettingsWrapper from "@/components/SettingsWrapper";
 
 export default function settings() {
   return (
diff --git a/components/Settings.tsx b/components/Settings.tsx
index 0646986..46be81f 100644
--- a/components/Settings.tsx
+++ b/components/Settings.tsx
@@ -18,7 +18,7 @@ const Settings = () => {
   const systemPrompt = useAppSelector((state) => state.auth.systemPrompt);
 
   return (
-    <div className="max-w-md mx-auto p-4">
+    <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>
       <br />
       <div className="flex justify-end mt-4 mr-4">
diff --git a/components/SettingsLink.tsx b/components/SettingsLink.tsx
index ff3bd03..8a79b78 100644
--- a/components/SettingsLink.tsx
+++ b/components/SettingsLink.tsx
@@ -1,10 +1,34 @@
 "use client";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCog } from "@fortawesome/free-solid-svg-icons";
+import React, { useState } from "react";
+
 import Link from "next/link";
+import SettingsWrapper from "@/components/SettingsWrapper";
 
 const SettingsLink = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  // 提取的处理函数
+  const toggleVisibility = () => {
+    setIsVisible((prevIsVisible) => !prevIsVisible);
+    console.log("isVisible", isVisible);
+  };
+
   return (
+    // <>
+    //   {/* 使用FontAwesomeIcon图标作为按钮 */}
+    //   <FontAwesomeIcon icon={faCog} size="2x" onClick={toggleVisibility} />
+
+    //   {/* 根据isVisible状态展示或隐藏组件 */}
+    //   <div
+    //     className={`component-container ${
+    //       isVisible ? "animate-slide-in-right" : ""
+    //     }`}
+    //   >
+
+    //     <SettingsWrapper />
+    //   </div>
+    // </>
     <Link href="/settings" aria-label="Settings">
       <FontAwesomeIcon icon={faCog} size="2x" />
     </Link>
@@ -12,3 +36,7 @@ const SettingsLink = () => {
 };
 
 export default SettingsLink;
+
+//  <Link href="/settings" aria-label="Settings">
+//    <FontAwesomeIcon icon={faCog} size="2x" />
+//  </Link>;
diff --git a/app/SettingsWrapper.tsx b/components/SettingsWrapper.tsx
similarity index 80%
rename from app/SettingsWrapper.tsx
rename to components/SettingsWrapper.tsx
index b621c98..a6aabd7 100644
--- a/app/SettingsWrapper.tsx
+++ b/components/SettingsWrapper.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import ReduxProvider from "@/app/store/ReduxProvider";
-import Settings from "../components/Settings";
+import Settings from "@/components/Settings";
 
 export default function SettingsWrapper() {
   return (
diff --git a/tailwind.config.js b/tailwind.config.js
index feb74cc..97b4613 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,20 +1,23 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
       colors: {
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
         btn: {
-          background: 'hsl(var(--btn-background))',
-          'background-hover': 'hsl(var(--btn-background-hover))',
+          background: "hsl(var(--btn-background))",
+          "background-hover": "hsl(var(--btn-background-hover))",
+        },
+        "blue-gray": {
+          100: "#F0F4F8", // 这里使用你选择的颜色值
         },
       },
     },
   },
   plugins: [],
-}
+};