style: 设置界面

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%); /* 动画开始前，确保组件位于视图右侧之外 */
+}

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();

app/settings/page.tsx

@@ -1,4 +1,4 @@
-import SettingsWrapper from "../SettingsWrapper";
+import SettingsWrapper from "@/components/SettingsWrapper";
 
 export default function settings() {
   return (

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">

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>;

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 (

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: [],
-}
+};