feat: project visible control

apps/fronted/src/app/workbench/page.tsx

@@ -111,7 +111,7 @@ export default function Home() {
             </div>
           </ResizablePanel>
           <CustomHandle />
-          <ResizablePanel defaultSize={defaultLayout[2]}>
+          <ResizablePanel defaultSize={defaultLayout[2]} minSize={50}>
             <div className="h-full overflow-y-auto">
               <PreviewPanel />
             </div>

apps/fronted/src/components/editor/EditPanel.tsx

@@ -21,7 +21,6 @@ import { Button } from "@/components/ui/button";
 import Field from "./Field";
 import ProjectItem from "./project/ProjectItem";
 
-// ProjectEditor 组件用于编辑单个项目
 interface Project {
   id: string;
   name: string;
@@ -31,6 +30,7 @@ interface Project {
   technologies: string;
   responsibilities: string;
   achievements: string;
+  visible: boolean;
 }
 
 // 主面板组件
@@ -56,7 +56,8 @@ export function EditPanel() {
       description: "",
       technologies: "",
       responsibilities: "",
-      achievements: ""
+      achievements: "",
+      visible: true
     };
     setEditingId(newProject.id);
     updateProjects(newProject);

apps/fronted/src/components/editor/PreviewPanel.tsx

@@ -108,185 +108,187 @@ export function PreviewPanel() {
         项目经历
       </h3>
       <AnimatePresence mode="popLayout" initial={false}>
-        {projects.map((project) => (
-          <motion.div
-            key={project.id}
-            data-project-id={project.id}
-            layout
-            initial={{ opacity: 0, y: 20 }}
-            animate={{
-              opacity: 1,
-              y: 0,
-              scale: draggingProjectId === project.id ? 1.01 : 1
-            }}
-            exit={{ opacity: 0, y: -20 }}
-            transition={{
-              type: "spring",
-              stiffness: 500,
-              damping: 50,
-              mass: 1
-            }}
-            className={cn(
-              "space-y-2 relative rounded-lg p-4",
-              draggingProjectId === project.id && "z-10"
-            )}
-            style={{
-              marginTop: `${globalSettings?.paragraphSpacing || 1.5}em`
-            }}
-          >
-            {/* 拖拽高亮效果 */}
-            {draggingProjectId === project.id && (
-              <motion.div
-                layoutId="project-highlight"
-                className="absolute inset-0 rounded-lg pointer-events-none"
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-              >
-                <div
-                  className={cn(
-                    "absolute inset-0 rounded-lg",
-                    "bg-gradient-to-r from-indigo-500/5 via-purple-500/5 to-indigo-500/5 border-2 border-indigo-500/10"
-                  )}
+        {projects
+          .filter((project) => project.visible) // 只显示 visible 为 true 的项目
+          .map((project) => (
+            <motion.div
+              key={project.id}
+              data-project-id={project.id}
+              layout
+              initial={{ opacity: 0, y: 20 }}
+              animate={{
+                opacity: 1,
+                y: 0,
+                scale: draggingProjectId === project.id ? 1.01 : 1
+              }}
+              exit={{ opacity: 0, y: -20 }}
+              transition={{
+                type: "spring",
+                stiffness: 500,
+                damping: 50,
+                mass: 1
+              }}
+              className={cn(
+                "space-y-2 relative rounded-lg p-4",
+                draggingProjectId === project.id && "z-10"
+              )}
+              style={{
+                marginTop: `${globalSettings?.paragraphSpacing || 1.5}em`
+              }}
+            >
+              {/* 拖拽高亮效果 */}
+              {draggingProjectId === project.id && (
+                <motion.div
+                  layoutId="project-highlight"
+                  className="absolute inset-0 rounded-lg pointer-events-none"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
                 >
                   <div
                     className={cn(
-                      "absolute inset-0 animate-pulse",
-                      "bg-black/5",
-                      "rounded-lg"
+                      "absolute inset-0 rounded-lg",
+                      "bg-gradient-to-r from-indigo-500/5 via-purple-500/5 to-indigo-500/5 border-2 border-indigo-500/10"
                     )}
-                  />
-                </div>
-              </motion.div>
-            )}
+                  >
+                    <div
+                      className={cn(
+                        "absolute inset-0 animate-pulse",
+                        "bg-black/5",
+                        "rounded-lg"
+                      )}
+                    />
+                  </div>
+                </motion.div>
+              )}
 
-            <motion.div
-              layout
-              className="flex justify-between items-start relative z-10"
-            >
-              <motion.div layout>
-                <motion.h4
-                  layout
-                  className={cn("font-medium", "text-gray-800")}
-                  style={{
-                    fontSize: `${globalSettings?.subheaderSize || 16}px`
-                  }}
-                >
-                  {project.name || "未命名项目"}
-                </motion.h4>
-                <motion.div
+              <motion.div
+                layout
+                className="flex justify-between items-start relative z-10"
+              >
+                <motion.div layout>
+                  <motion.h4
+                    layout
+                    className={cn("font-medium", "text-gray-800")}
+                    style={{
+                      fontSize: `${globalSettings?.subheaderSize || 16}px`
+                    }}
+                  >
+                    {project.name || "未命名项目"}
+                  </motion.h4>
+                  <motion.div
+                    layout
+                    className={cn("text-gray-600")}
+                    style={{
+                      fontSize: `${globalSettings?.contentFontSize || 14}px`
+                    }}
+                  >
+                    {project.role}
+                  </motion.div>
+                </motion.div>
+                <motion.span
                   layout
                   className={cn("text-gray-600")}
                   style={{
                     fontSize: `${globalSettings?.contentFontSize || 14}px`
                   }}
                 >
-                  {project.role}
-                </motion.div>
+                  {project.date}
+                </motion.span>
               </motion.div>
-              <motion.span
-                layout
-                className={cn("text-gray-600")}
-                style={{
-                  fontSize: `${globalSettings?.contentFontSize || 14}px`
-                }}
-              >
-                {project.date}
-              </motion.span>
+
+              {/* 项目详情 */}
+              {project.description && (
+                <motion.div
+                  layout
+                  className={cn("whitespace-pre-wrap", "text-gray-600")}
+                  style={{
+                    fontSize: `${globalSettings?.contentFontSize || 14}px`,
+                    lineHeight: globalSettings?.lineHeight || 1.6
+                  }}
+                >
+                  <div
+                    dangerouslySetInnerHTML={{ __html: project.description }}
+                  />
+                </motion.div>
+              )}
+
+              {/* 技术栈 */}
+              {project.technologies && (
+                <motion.div layout>
+                  <motion.div
+                    layout
+                    className={cn("font-medium", "text-gray-800")}
+                    style={{
+                      fontSize: `${globalSettings?.contentFontSize || 14}px`
+                    }}
+                  >
+                    技术栈：
+                  </motion.div>
+                  <motion.div
+                    layout
+                    className={cn("whitespace-pre-wrap", "text-gray-600")}
+                    style={{
+                      fontSize: `${globalSettings?.contentFontSize || 14}px`,
+                      lineHeight: globalSettings?.lineHeight || 1.6
+                    }}
+                  >
+                    {project.technologies}
+                  </motion.div>
+                </motion.div>
+              )}
+
+              {/* 主要职责 */}
+              {project.responsibilities && (
+                <motion.div layout>
+                  <motion.div
+                    layout
+                    className={cn("font-medium", "text-gray-800")}
+                    style={{
+                      fontSize: `${globalSettings?.contentFontSize || 14}px`
+                    }}
+                  >
+                    主要职责：
+                  </motion.div>
+                  <motion.div
+                    layout
+                    className={cn("whitespace-pre-wrap", "text-gray-600")}
+                    style={{
+                      fontSize: `${globalSettings?.contentFontSize || 14}px`,
+                      lineHeight: globalSettings?.lineHeight || 1.6
+                    }}
+                  >
+                    {project.responsibilities}
+                  </motion.div>
+                </motion.div>
+              )}
+
+              {/* 项目成就 */}
+              {project.achievements && (
+                <motion.div layout>
+                  <motion.div
+                    layout
+                    className={cn("font-medium", "text-gray-800")}
+                    style={{
+                      fontSize: `${globalSettings?.contentFontSize || 14}px`
+                    }}
+                  >
+                    项目成就：
+                  </motion.div>
+                  <motion.div
+                    layout
+                    className={cn("whitespace-pre-wrap", "text-gray-600")}
+                    style={{
+                      fontSize: `${globalSettings?.contentFontSize || 14}px`,
+                      lineHeight: globalSettings?.lineHeight || 1.6
+                    }}
+                  >
+                    {project.achievements}
+                  </motion.div>
+                </motion.div>
+              )}
             </motion.div>
-
-            {/* 项目详情 */}
-            {project.description && (
-              <motion.div
-                layout
-                className={cn("whitespace-pre-wrap", "text-gray-600")}
-                style={{
-                  fontSize: `${globalSettings?.contentFontSize || 14}px`,
-                  lineHeight: globalSettings?.lineHeight || 1.6
-                }}
-              >
-                <div
-                  dangerouslySetInnerHTML={{ __html: project.description }}
-                />
-              </motion.div>
-            )}
-
-            {/* 技术栈 */}
-            {project.technologies && (
-              <motion.div layout>
-                <motion.div
-                  layout
-                  className={cn("font-medium", "text-gray-800")}
-                  style={{
-                    fontSize: `${globalSettings?.contentFontSize || 14}px`
-                  }}
-                >
-                  技术栈：
-                </motion.div>
-                <motion.div
-                  layout
-                  className={cn("whitespace-pre-wrap", "text-gray-600")}
-                  style={{
-                    fontSize: `${globalSettings?.contentFontSize || 14}px`,
-                    lineHeight: globalSettings?.lineHeight || 1.6
-                  }}
-                >
-                  {project.technologies}
-                </motion.div>
-              </motion.div>
-            )}
-
-            {/* 主要职责 */}
-            {project.responsibilities && (
-              <motion.div layout>
-                <motion.div
-                  layout
-                  className={cn("font-medium", "text-gray-800")}
-                  style={{
-                    fontSize: `${globalSettings?.contentFontSize || 14}px`
-                  }}
-                >
-                  主要职责：
-                </motion.div>
-                <motion.div
-                  layout
-                  className={cn("whitespace-pre-wrap", "text-gray-600")}
-                  style={{
-                    fontSize: `${globalSettings?.contentFontSize || 14}px`,
-                    lineHeight: globalSettings?.lineHeight || 1.6
-                  }}
-                >
-                  {project.responsibilities}
-                </motion.div>
-              </motion.div>
-            )}
-
-            {/* 项目成就 */}
-            {project.achievements && (
-              <motion.div layout>
-                <motion.div
-                  layout
-                  className={cn("font-medium", "text-gray-800")}
-                  style={{
-                    fontSize: `${globalSettings?.contentFontSize || 14}px`
-                  }}
-                >
-                  项目成就：
-                </motion.div>
-                <motion.div
-                  layout
-                  className={cn("whitespace-pre-wrap", "text-gray-600")}
-                  style={{
-                    fontSize: `${globalSettings?.contentFontSize || 14}px`,
-                    lineHeight: globalSettings?.lineHeight || 1.6
-                  }}
-                >
-                  {project.achievements}
-                </motion.div>
-              </motion.div>
-            )}
-          </motion.div>
-        ))}
+          ))}
       </AnimatePresence>
     </motion.div>
   );

apps/fronted/src/components/editor/project/ProjectItem.tsx

@@ -7,8 +7,8 @@ import {
   Reorder,
   useDragControls
 } from "framer-motion";
-import { ChevronDown, GripVertical, Trash2 } from "lucide-react";
-import { useState } from "react";
+import { ChevronDown, Eye, EyeOff, GripVertical, Trash2 } from "lucide-react";
+import { useCallback, useState } from "react";
 import Field from "../Field";
 import {
   AlertDialog,
@@ -31,6 +31,7 @@ interface Project {
   technologies: string;
   responsibilities: string;
   achievements: string;
+  visible: boolean;
 }
 
 interface ProjectEditorProps {
@@ -72,7 +73,7 @@ const DeleteConfirmDialog: React.FC<DeleteConfirmDialogProps> = ({
         className={cn(
           theme === "dark" ? "bg-neutral-900 border-neutral-800" : "bg-white"
         )}
-        onClick={(e) => e.stopPropagation()} // 添加这行
+        onClick={(e) => e.stopPropagation()}
       >
         <AlertDialogHeader>
           <AlertDialogTitle
@@ -192,6 +193,26 @@ const ProjectItem = ({ project }: { project: Project }) => {
   const [expandedId, setExpandedId] = useState<string | null>(null);
   const { theme, updateProjects, deleteProject } = useResumeStore();
 
+  const [isUpdating, setIsUpdating] = useState(false);
+
+  const handleVisibilityToggle = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+
+      if (isUpdating) return;
+
+      setIsUpdating(true);
+      setTimeout(() => {
+        updateProjects({
+          ...project,
+          visible: !project.visible
+        });
+        setIsUpdating(false);
+      }, 10);
+    },
+    [project, updateProjects, isUpdating]
+  );
+
   return (
     <Reorder.Item
       id={project.id}
@@ -267,6 +288,28 @@ const ProjectItem = ({ project }: { project: Project }) => {
             </h3>
           </div>
           <div className="flex items-center gap-2 ml-4 shrink-0">
+            <Button
+              variant="ghost"
+              size="sm"
+              disabled={isUpdating}
+              className={cn(
+                "text-sm",
+                theme === "dark"
+                  ? project.visible
+                    ? "hover:bg-neutral-800 text-neutral-400"
+                    : "hover:bg-neutral-800 text-neutral-600"
+                  : project.visible
+                    ? "hover:bg-gray-100 text-gray-500"
+                    : "hover:bg-gray-100 text-gray-400"
+              )}
+              onClick={handleVisibilityToggle}
+            >
+              {project.visible ? (
+                <Eye className="w-4 h-4" />
+              ) : (
+                <EyeOff className="w-4 h-4" />
+              )}
+            </Button>
             <DeleteConfirmDialog
               projectName={project.name}
               onDelete={() => {

apps/fronted/src/store/useResumeStore.ts

@@ -105,7 +105,8 @@ const initialState = {
       technologies: "React, TypeScript, TailwindCSS, shadcn/ui",
       responsibilities:
         "负责整体技术方案设计和团队管理，把控项目进度和代码质量",
-      achievements: "系统整体性能提升 50%，代码重用率提高到 80%"
+      achievements: "系统整体性能提升 50%，代码重用率提高到 80%",
+      visible: true
     },
     {
       id: "p2",
@@ -117,7 +118,8 @@ const initialState = {
       technologies: "React, TypeScript, TailwindCSS, shadcn/ui",
       responsibilities:
         "负责整体技术方案设计和团队管理，把控项目进度和代码质量",
-      achievements: "系统整体性能提升 50%，代码重用率提高到 80%"
+      achievements: "系统整体性能提升 50%，代码重用率提高到 80%",
+      visible: true
     }
   ]
 };

apps/fronted/src/types/resume.ts

@@ -39,6 +39,7 @@ export interface Project {
   technologies: string;
   responsibilities: string;
   achievements: string;
+  visible: boolean;
 }
 
 export interface ResumeSection {