diff --git a/apps/fronted/src/app/page.tsx b/apps/fronted/src/app/page.tsx index 7e4af69..6c3a533 100644 --- a/apps/fronted/src/app/page.tsx +++ b/apps/fronted/src/app/page.tsx @@ -309,7 +309,7 @@ export default function LandingPage() { )} - + 开始制作 @@ -331,7 +331,7 @@ export default function LandingPage() {

- + 开始定制 diff --git a/apps/fronted/src/app/workbench/page.tsx b/apps/fronted/src/app/workbench/page.tsx index e1591a8..66119c9 100644 --- a/apps/fronted/src/app/workbench/page.tsx +++ b/apps/fronted/src/app/workbench/page.tsx @@ -78,8 +78,20 @@ export default function Home() { setPanelSizes(newSizes); setLayoutKey((prev) => prev + 1); }; + useEffect(() => { - document.documentElement.classList.remove("dark"); + const savedTheme = window?.localStorage?.getItem("theme"); + const prefersDark = window?.matchMedia?.( + "(prefers-color-scheme: dark)" + ).matches; + + const theme = savedTheme ? savedTheme === "dark" : prefersDark; + + if (theme) { + document.documentElement.classList.add("dark"); + } else { + document.documentElement.classList.remove("dark"); + } }, []); useEffect(() => { @@ -276,7 +288,7 @@ export default function Home() { className={cn( "w-full h-screen overflow-hidden", theme === "dark" - ? "dark bg-neutral-900 text-neutral-200" + ? "bg-neutral-900 text-neutral-200" : "bg-white text-gray-900" )} > diff --git a/apps/fronted/src/components/editor/EditPanel.tsx b/apps/fronted/src/components/editor/EditPanel.tsx index 952e719..26bc415 100644 --- a/apps/fronted/src/components/editor/EditPanel.tsx +++ b/apps/fronted/src/components/editor/EditPanel.tsx @@ -61,8 +61,8 @@ export function EditPanel() { s.id === activeSection)?.title} diff --git a/apps/fronted/src/components/editor/Field.tsx b/apps/fronted/src/components/editor/Field.tsx index 7fb6053..1db9858 100644 --- a/apps/fronted/src/components/editor/Field.tsx +++ b/apps/fronted/src/components/editor/Field.tsx @@ -1,12 +1,18 @@ "use client"; +import { CalendarIcon } from "lucide-react"; +import { format } from "date-fns"; import { cn } from "@/lib/utils"; import { motion } from "framer-motion"; -import { format } from "date-fns"; -import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"; -import { Calendar } from "../ui/calendar"; -import { CalendarIcon } from "lucide-react"; +import { + Popover, + PopoverContent, + PopoverTrigger +} 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"; type FieldProps = { label?: string; @@ -44,25 +50,7 @@ const Field: React.FC = ({ const inputStyles = cn( "mt-1.5 block w-full transition-all duration-200", "rounded-lg px-4 py-2.5", - "border", - theme === "dark" - ? [ - "bg-neutral-900/30 border-neutral-800", - "text-neutral-100", - "focus:bg-neutral-900/50", - "placeholder:text-neutral-500" - ] - : [ - "bg-white border-gray-100", - "text-gray-900", - "hover:border-gray-200", - "placeholder:text-gray-400" - ], - "focus:ring-1 focus:ring-offset-1", - theme === "dark" - ? "focus:ring-indigo-500/20 focus:ring-offset-neutral-900" - : "focus:ring-indigo-500/20 focus:ring-offset-white", - "focus:border-indigo-500" + "border" ); if (type === "date") { @@ -70,62 +58,27 @@ const Field: React.FC = ({ return ( ); diff --git a/apps/fronted/src/components/editor/SidePanel.tsx b/apps/fronted/src/components/editor/SidePanel.tsx index 3dcc2c3..b254cdc 100644 --- a/apps/fronted/src/components/editor/SidePanel.tsx +++ b/apps/fronted/src/components/editor/SidePanel.tsx @@ -147,7 +147,7 @@ export function SidePanel() {
{item.enabled ? ( - + ) : ( )} @@ -284,7 +284,7 @@ export function SidePanel() { whileHover={{ scale: 1.01 }} whileTap={{ scale: 0.9 }} onClick={handleCreateSection} - className="flex justify-center w-full rounded-lg items-center gap-2 py-2 px-3 text-sm font-medium text-indigo-600 bg-indigo-50" + className="flex justify-center w-full rounded-lg items-center gap-2 py-2 px-3 text-sm font-medium text-primary bg-indigo-50" > 添加自定义模块 diff --git a/apps/fronted/src/components/editor/basic/BasicPanel.tsx b/apps/fronted/src/components/editor/basic/BasicPanel.tsx index 3314a7b..5433e25 100644 --- a/apps/fronted/src/components/editor/basic/BasicPanel.tsx +++ b/apps/fronted/src/components/editor/basic/BasicPanel.tsx @@ -108,7 +108,7 @@ const CustomField: React.FC = ({ {field.visible ? ( onUpdate({ ...field, visible: !field.visible })} /> ) : ( @@ -297,7 +297,7 @@ const BasicPanel: React.FC = () => { onClick={() => toggleFieldVisibility(field.id, !field.visible)} > {field.visible ? ( - + ) : ( )} diff --git a/apps/fronted/src/components/editor/custom/CustomItem.tsx b/apps/fronted/src/components/editor/custom/CustomItem.tsx index 18f451a..f32998d 100644 --- a/apps/fronted/src/components/editor/custom/CustomItem.tsx +++ b/apps/fronted/src/components/editor/custom/CustomItem.tsx @@ -162,10 +162,10 @@ const CustomItem = ({ dragControls={dragControls} className={cn( "rounded-lg border overflow-hidden flex group", - "bg-white hover:border-indigo-600", + "bg-white hover:border-primary", "dark:bg-neutral-900/30", "border-gray-100 dark:border-neutral-800", - "dark:hover:border-indigo-600" + "dark:hover:border-primary" )} >
{item.visible ? ( - + ) : ( )} diff --git a/apps/fronted/src/components/editor/education/EducationItem.tsx b/apps/fronted/src/components/editor/education/EducationItem.tsx index b237f01..93b897d 100644 --- a/apps/fronted/src/components/editor/education/EducationItem.tsx +++ b/apps/fronted/src/components/editor/education/EducationItem.tsx @@ -228,10 +228,10 @@ const EducationItem = ({ education }: { education: Education }) => { dragControls={dragControls} className={cn( "rounded-lg border overflow-hidden flex group", - "bg-white hover:border-indigo-600", + "bg-white hover:border-primary", "dark:bg-neutral-900/30", "border-gray-100 dark:border-neutral-800", - "dark:hover:border-indigo-600" + "dark:hover:border-primary" )} >
{ onClick={handleVisibilityToggle} > {education.visible ? ( - + ) : ( )} diff --git a/apps/fronted/src/components/editor/experience/ExperienceItem.tsx b/apps/fronted/src/components/editor/experience/ExperienceItem.tsx index 45bf67a..7c603d0 100644 --- a/apps/fronted/src/components/editor/experience/ExperienceItem.tsx +++ b/apps/fronted/src/components/editor/experience/ExperienceItem.tsx @@ -194,10 +194,10 @@ const ExperienceItem = ({ experience }: { experience: Experience }) => { }} className={cn( "rounded-lg border overflow-hidden flex group", - "bg-white hover:border-indigo-600", + "bg-white hover:border-primary", "dark:bg-neutral-900/30", "border-gray-100 dark:border-neutral-800", - "dark:hover:border-indigo-600" + "dark:hover:border-primary" )} >
{ onClick={handleVisibilityToggle} > {experience.visible ? ( - + ) : ( )} diff --git a/apps/fronted/src/components/editor/project/ProjectItem.tsx b/apps/fronted/src/components/editor/project/ProjectItem.tsx index 69a171f..62b2d63 100644 --- a/apps/fronted/src/components/editor/project/ProjectItem.tsx +++ b/apps/fronted/src/components/editor/project/ProjectItem.tsx @@ -200,10 +200,10 @@ const ProjectItem = ({ project }: { project: Project }) => { }} className={cn( "rounded-lg border overflow-hidden flex group", - "bg-white hover:border-indigo-600", + "bg-white hover:border-primary", "dark:bg-neutral-900/30", "border-gray-100 dark:border-neutral-800", - "dark:hover:border-indigo-600" + "dark:hover:border-primary" )} >
{ onClick={handleVisibilityToggle} > {project.visible ? ( - + ) : ( )} diff --git a/apps/fronted/src/components/shared/PhotoConfigDrawer.tsx b/apps/fronted/src/components/shared/PhotoConfigDrawer.tsx index 6248a7c..8b75c31 100644 --- a/apps/fronted/src/components/shared/PhotoConfigDrawer.tsx +++ b/apps/fronted/src/components/shared/PhotoConfigDrawer.tsx @@ -372,7 +372,7 @@ const PhotoConfigDrawer: React.FC = ({ "h-9", config.aspectRatio === ratio ? theme === "dark" - ? "bg-indigo-600 text-white" + ? "bg-primary text-white" : "bg-neutral-900 text-white" : theme === "dark" ? "bg-[#262626] text-white border-none" @@ -409,7 +409,7 @@ const PhotoConfigDrawer: React.FC = ({ "h-9", config.borderRadius === radius ? theme === "dark" - ? "bg-indigo-600 text-white" + ? "bg-primary text-white" : "bg-neutral-900 text-white" : theme === "dark" ? "bg-[#262626] text-white" diff --git a/apps/fronted/src/store/useResumeStore.ts b/apps/fronted/src/store/useResumeStore.ts index 4a02937..5cf4add 100644 --- a/apps/fronted/src/store/useResumeStore.ts +++ b/apps/fronted/src/store/useResumeStore.ts @@ -318,10 +318,19 @@ export const useResumeStore = create()( experience: state.experience.filter((p) => p.id !== id) })), - toggleTheme: () => - set((state) => ({ - theme: state.theme === "light" ? "dark" : "light" - })), + toggleTheme: () => { + set((state) => { + const newTheme = state.theme === "light" ? "dark" : "light"; + document.documentElement.classList.toggle( + "dark", + newTheme === "dark" + ); + // 本地存储也调整 + window?.localStorage?.setItem("theme", newTheme); + + return { theme: newTheme }; + }); + }, updateGlobalSettings: (settings) => set((state) => { const newSettings = { diff --git a/apps/fronted/src/theme/themeConfig.ts b/apps/fronted/src/theme/themeConfig.ts index af1bd7b..154f8a9 100644 --- a/apps/fronted/src/theme/themeConfig.ts +++ b/apps/fronted/src/theme/themeConfig.ts @@ -8,7 +8,7 @@ export const getThemeConfig = (isDark: boolean) => ({ hover: isDark ? "hover:bg-zinc-800" : "hover:bg-gray-100", input: isDark ? "bg-zinc-800/50 border-zinc-700" : "bg-white border-gray-200", button: isDark ? "bg-zinc-800" : "bg-white", - buttonPrimary: isDark ? "bg-indigo-500" : "bg-indigo-600", + buttonPrimary: isDark ? "bg-indigo-500" : "bg-primary", preview: isDark ? "bg-zinc-900" : "bg-white" }); diff --git a/apps/fronted/tailwind.config.ts b/apps/fronted/tailwind.config.ts index be0fa69..fb8f6bd 100644 --- a/apps/fronted/tailwind.config.ts +++ b/apps/fronted/tailwind.config.ts @@ -1,7 +1,6 @@ import type { Config } from "tailwindcss"; const config = { - important: true, darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", @@ -101,6 +100,9 @@ const config = { } } }, + colors: { + primary: "262.1 83.3% 57.8%" + }, plugins: [require("tailwindcss-animate")] } satisfies Config;