ai-space/magic-resume
3
0
Fork 0
mirror of https://github.com/JOYCEQL/magic-resume.git synced 2026-07-03 14:07:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

style: EditorPanel && SidePanel color

Browse Source
This commit is contained in:
JOYCEQL
2024-12-04 19:23:47 +08:00
committed by qingchen
parent fd6e67bb78
commit 343b88fc57
4 changed files with 58 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/fronted/src/components/editor/EditPanel.tsx
+49 -20
View File
@@ -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>
apps/fronted/src/components/editor/EducationPanel.tsx
View File
apps/fronted/src/components/editor/Field.tsx
-1
View File
@@ -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";
apps/fronted/src/components/editor/SidePanel.tsx
+9 -16
View File
@@ -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}