From 343b88fc57f045c4af3a26803ec34d5faad2c487 Mon Sep 17 00:00:00 2001
From: JOYCEQL <1449239013@qq.com>
Date: Wed, 4 Dec 2024 19:23:47 +0800
Subject: [PATCH] style: EditorPanel && SidePanel color

---
 .../src/components/editor/EditPanel.tsx       | 69 +++++++++++++------
 .../src/components/editor/EducationPanel.tsx  |  0
 apps/fronted/src/components/editor/Field.tsx  |  1 -
 .../src/components/editor/SidePanel.tsx       | 25 +++----
 4 files changed, 58 insertions(+), 37 deletions(-)
 delete mode 100644 apps/fronted/src/components/editor/EducationPanel.tsx

diff --git a/apps/fronted/src/components/editor/EditPanel.tsx b/apps/fronted/src/components/editor/EditPanel.tsx
index 0bacb1f..c161ba3 100644
--- a/apps/fronted/src/components/editor/EditPanel.tsx
+++ b/apps/fronted/src/components/editor/EditPanel.tsx
@@ -1,6 +1,6 @@
 "use client";
-
 import React from "react";
+import { Pencil } from "lucide-react";
 import { motion } from "framer-motion";
 import { useResumeStore } from "@/store/useResumeStore";
 import { cn } from "@/lib/utils";
@@ -10,6 +10,12 @@ import ProjectPanel from "./project/ProjectPanel";
 import ExperiencePanel from "./experience/ExperiencePanel";
 import CustomPanel from "./custom/CustomPanel";
 import SkillPanel from "./skills/SkillPanel";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "../ui/tooltip";
 
 export function EditPanel() {
   const { activeSection, menuSections, updateMenuSections } = useResumeStore();
@@ -56,26 +62,49 @@ export function EditPanel() {
             <span className="text-lg">
               {menuSections?.find((s) => s.id === activeSection)?.icon}
             </span>
-            <input
-              className={cn(
-                "flex-1 text-base  font-medium hover:border-primary hover:text-primary border-black  bg-transparent outline-none  border-b pb-1 text-gray-700",
-                "dark:text-neutral-200 dark:border-white dark:hover:border-primary dark:hover:text-primary"
-              )}
-              type="text"
-              value={menuSections?.find((s) => s.id === activeSection)?.title}
-              onChange={(e) => {
-                const newMenuSections = menuSections.map((s) => {
-                  if (s.id === activeSection) {
-                    return {
-                      ...s,
-                      title: e.target.value
-                    };
+
+            {/* 如果是基本信息的展示话展示div */}
+            {activeSection === "basic" ? (
+              <div>
+                <span className="text-lg font-semibold text-primary">
+                  {menuSections?.find((s) => s.id === activeSection)?.title}
+                </span>
+              </div>
+            ) : (
+              <>
+                <input
+                  className={cn(
+                    "flex-1 text-lg  font-medium  text-primary border-black  bg-transparent outline-none   pb-1 text-primary"
+                  )}
+                  type="text"
+                  value={
+                    menuSections?.find((s) => s.id === activeSection)?.title
                   }
-                  return s;
-                });
-                updateMenuSections(newMenuSections);
-              }}
-            />
+                  onChange={(e) => {
+                    const newMenuSections = menuSections.map((s) => {
+                      if (s.id === activeSection) {
+                        return {
+                          ...s,
+                          title: e.target.value
+                        };
+                      }
+                      return s;
+                    });
+                    updateMenuSections(newMenuSections);
+                  }}
+                />
+                <TooltipProvider delayDuration={300}>
+                  <Tooltip>
+                    <TooltipTrigger>
+                      <Pencil size={16} className="text-primary" />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>点击文字部分即可聚焦编辑</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </>
+            )}
           </div>
         </motion.div>
 
diff --git a/apps/fronted/src/components/editor/EducationPanel.tsx b/apps/fronted/src/components/editor/EducationPanel.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/apps/fronted/src/components/editor/Field.tsx b/apps/fronted/src/components/editor/Field.tsx
index 85e8cc3..2b400d5 100644
--- a/apps/fronted/src/components/editor/Field.tsx
+++ b/apps/fronted/src/components/editor/Field.tsx
@@ -10,7 +10,6 @@ import {
 } from "@/components/ui/popover";
 import { Calendar } from "@/components/ui/calendar";
 import { Input } from "@/components/ui/input";
-import { useResumeStore } from "@/store/useResumeStore";
 import RichTextEditor from "@/components/shared/rich-editor/RichEditor";
 import { Button } from "../ui/button";
 
diff --git a/apps/fronted/src/components/editor/SidePanel.tsx b/apps/fronted/src/components/editor/SidePanel.tsx
index 478030f..59fe9ea 100644
--- a/apps/fronted/src/components/editor/SidePanel.tsx
+++ b/apps/fronted/src/components/editor/SidePanel.tsx
@@ -84,7 +84,8 @@ export function SidePanel() {
     colorTheme,
     setColorTheme,
     updateMenuSections,
-    addCustomData
+    addCustomData,
+    activeSection
   } = useResumeStore();
 
   const debouncedSetColor = useMemo(
@@ -135,9 +136,10 @@ export function SidePanel() {
               <div
                 key={item.id}
                 className={cn(
-                  "rounded-lg group border mb-2 hover:border-primary",
+                  "rounded-lg group border mb-2  hover:border-primary",
                   "dark:hover:bg-neutral-800 dark:bg-neutral-900/50 dark:border-neutral-800",
-                  "hover:bg-gray-50 bg-white border-gray-100"
+                  "hover:bg-gray-50 bg-white border-gray-100",
+                  activeSection === item.id && "border-primary text-primary"
                 )}
               >
                 <div className="flex items-center p-3 pl-[32px] space-x-3 ">
@@ -151,12 +153,7 @@ export function SidePanel() {
                     {item.icon}
                   </span>
                   <span
-                    className={cn(
-                      "text-sm flex-1 cursor-pointer",
-                      item.enabled
-                        ? "dark:text-neutral-200 text-gray-700"
-                        : "dark:text-neutral-500 text-gray-400"
-                    )}
+                    className={cn("text-sm flex-1 cursor-pointer")}
                     onClick={() => setActiveSection(item.id)}
                   >
                     {item.title}
@@ -180,7 +177,8 @@ export function SidePanel() {
                   className={cn(
                     "rounded-lg cursor-move group border  hover:border-primary",
                     "dark:hover:bg-neutral-800  dark:bg-neutral-900/50 dark:border-neutral-800 dark:hover:border-primary",
-                    "hover:bg-gray-50 bg-white border-gray-100 "
+                    "hover:bg-gray-50 bg-white border-gray-100",
+                    activeSection === item.id && "border-primary text-primary"
                   )}
                   whileHover={{ scale: 1.01 }}
                   whileDrag={{ scale: 1.02 }}
@@ -203,12 +201,7 @@ export function SidePanel() {
                       {item.icon}
                     </span>
                     <span
-                      className={cn(
-                        "text-sm flex-1 cursor-pointer",
-                        item.enabled
-                          ? "dark:text-neutral-200 text-gray-700"
-                          : "dark:text-neutral-500 text-gray-400"
-                      )}
+                      className={cn("text-sm flex-1 cursor-pointer")}
                       onClick={() => setActiveSection(item.id)}
                     >
                       {item.title}