+
+
+ );
+}
diff --git a/apps/web/src/app/main/courses/components/CourseList.tsx b/apps/web/src/app/main/courses/components/CourseList.tsx
new file mode 100644
index 0000000..3d67b1c
--- /dev/null
+++ b/apps/web/src/app/main/courses/components/CourseList.tsx
@@ -0,0 +1,44 @@
+import { Pagination, Empty } from 'antd';
+import { Course } from '../mockData';
+import CourseCard from './CourseCard';
+
+interface CourseListProps {
+ courses: Course[];
+ total: number;
+ pageSize: number;
+ currentPage: number;
+ onPageChange: (page: number) => void;
+}
+
+export default function CourseList({
+ courses,
+ total,
+ pageSize,
+ currentPage,
+ onPageChange,
+}: CourseListProps) {
+ return (
+ + {course.title} +
+{course.instructor}
+
+
+
+
+
+
+
+
+
+ {course.category}
+ {course.level}
+
+
+ {courses.length > 0 ? (
+ <>
+
+ );
+}
\ No newline at end of file
diff --git a/apps/web/src/app/main/courses/components/FilterSection.tsx b/apps/web/src/app/main/courses/components/FilterSection.tsx
new file mode 100644
index 0000000..93e0e6f
--- /dev/null
+++ b/apps/web/src/app/main/courses/components/FilterSection.tsx
@@ -0,0 +1,54 @@
+import { Checkbox, Divider, Radio, Space } from 'antd';
+import { categories, levels } from '../mockData';
+
+interface FilterSectionProps {
+ selectedCategory: string;
+ selectedLevel: string;
+ onCategoryChange: (category: string) => void;
+ onLevelChange: (level: string) => void;
+}
+
+export default function FilterSection({
+ selectedCategory,
+ selectedLevel,
+ onCategoryChange,
+ onLevelChange,
+}: FilterSectionProps) {
+ return (
+
+ {courses.map(course => (
+
+
+
+
+ ) : (
+
+
+ );
+}
\ No newline at end of file
diff --git a/apps/web/src/app/main/courses/mockData.ts b/apps/web/src/app/main/courses/mockData.ts
new file mode 100644
index 0000000..096d174
--- /dev/null
+++ b/apps/web/src/app/main/courses/mockData.ts
@@ -0,0 +1,44 @@
+export interface Course {
+ id: string;
+ title: string;
+ description: string;
+ instructor: string;
+ price: number;
+ originalPrice: number;
+ category: string;
+ level: string;
+ thumbnail: string;
+ rating: number;
+ enrollments: number;
+ duration: string;
+}
+
+export const categories = [
+ "计算机科学",
+ "数据科学",
+ "商业管理",
+ "人工智能",
+ "软件开发",
+ "网络安全",
+ "云计算",
+ "前端开发",
+ "后端开发",
+ "移动开发"
+];
+
+export const levels = ["入门", "初级", "中级", "高级"];
+
+export const mockCourses: Course[] = Array.from({ length: 50 }, (_, i) => ({
+ id: `course-${i + 1}`,
+ title: `${categories[i % categories.length]}课程 ${i + 1}`,
+ description: "本课程将带你深入了解该领域的核心概念和实践应用，通过实战项目提升你的专业技能。",
+ instructor: `讲师 ${i + 1}`,
+ price: Math.floor(Math.random() * 500 + 99),
+ originalPrice: Math.floor(Math.random() * 1000 + 299),
+ category: categories[i % categories.length],
+ level: levels[i % levels.length],
+ thumbnail: `/api/placeholder/280/160`,
+ rating: Number((Math.random() * 2 + 3).toFixed(1)),
+ enrollments: Math.floor(Math.random() * 10000),
+ duration: `${Math.floor(Math.random() * 20 + 10)}小时`
+}));
\ No newline at end of file
diff --git a/apps/web/src/app/main/courses/page.tsx b/apps/web/src/app/main/courses/page.tsx
new file mode 100644
index 0000000..f852e00
--- /dev/null
+++ b/apps/web/src/app/main/courses/page.tsx
@@ -0,0 +1,73 @@
+import { useState, useMemo } from 'react';
+import { mockCourses } from './mockData';
+import FilterSection from './components/FilterSection';
+import CourseList from './components/CourseList';
+
+export default function CoursesPage() {
+ const [currentPage, setCurrentPage] = useState(1);
+ const [selectedCategory, setSelectedCategory] = useState('');
+ const [selectedLevel, setSelectedLevel] = useState('');
+ const pageSize = 12;
+
+ const filteredCourses = useMemo(() => {
+ return mockCourses.filter(course => {
+ const matchCategory = !selectedCategory || course.category === selectedCategory;
+ const matchLevel = !selectedLevel || course.level === selectedLevel;
+ return matchCategory && matchLevel;
+ });
+ }, [selectedCategory, selectedLevel]);
+
+ const paginatedCourses = useMemo(() => {
+ const startIndex = (currentPage - 1) * pageSize;
+ return filteredCourses.slice(startIndex, startIndex + pageSize);
+ }, [filteredCourses, currentPage]);
+
+ const handlePageChange = (page: number) => {
+ setCurrentPage(page);
+ window.scrollTo({ top: 0, behavior: 'smooth' });
+ };
+
+ return (
+
+ onCategoryChange(e.target.value)}
+ className="flex flex-col space-y-3"
+ >
+ 全部课程
+ {categories.map(category => (
+
+ {category}
+
+ ))}
+
+
+
+ 课程分类
+
+ onLevelChange(e.target.value)}
+ className="flex flex-col space-y-3"
+ >
+ 全部难度
+ {levels.map(level => (
+
+ {level}
+
+ ))}
+
+
+ 难度等级
+
+
+ );
+}
\ No newline at end of file
diff --git a/apps/web/src/app/main/home/components/CategorySection.tsx b/apps/web/src/app/main/home/components/CategorySection.tsx
new file mode 100644
index 0000000..638e429
--- /dev/null
+++ b/apps/web/src/app/main/home/components/CategorySection.tsx
@@ -0,0 +1,162 @@
+import React, { useState, useCallback } from 'react';
+import { Typography, Button } from 'antd';
+import { stringToColor } from '@nice/common';
+
+const { Title, Text } = Typography;
+
+interface CourseCategory {
+ name: string;
+ count: number;
+ description: string;
+}
+
+const courseCategories: CourseCategory[] = [
+ {
+ name: '计算机基础',
+ count: 120,
+ description: '计算机组成原理、操作系统、网络等基础知识'
+ },
+ {
+ name: '编程语言',
+ count: 85,
+ description: 'Python、Java、JavaScript等主流编程语言'
+ },
+ {
+ name: '人工智能',
+ count: 65,
+ description: '机器学习、深度学习、自然语言处理等前沿技术'
+ },
+ {
+ name: '数据科学',
+ count: 45,
+ description: '数据分析、数据可视化、商业智能等'
+ },
+ {
+ name: '云计算',
+ count: 38,
+ description: '云服务、容器化、微服务架构等'
+ },
+ {
+ name: '网络安全',
+ count: 42,
+ description: '网络安全基础、渗透测试、安全防护等'
+ }
+];
+
+const CategorySection = () => {
+ const [hoveredIndex, setHoveredIndex] = useState
+
+
+ {/* 左侧筛选区域 */}
+
+
+
+
+ {/* 右侧课程列表区域 */}
+
+ {
+ setSelectedCategory(category);
+ setCurrentPage(1);
+ }}
+ onLevelChange={level => {
+ setSelectedLevel(level);
+ setCurrentPage(1);
+ }}
+ />
+
+
+
+
+
+
+
+ 共找到 {filteredCourses.length} 门课程
+
+
+
+
+
+
+ 探索课程分类
+
+
+ 选择你感兴趣的方向，开启学习之旅
+
+
+
+ {displayedCategories.map((category, index) => {
+ const categoryColor = stringToColor(category.name);
+ const isHovered = hoveredIndex === index;
+
+ return (
+
+ {courseCategories.length > 8 && (
+ handleMouseEnter(index)}
+ onMouseLeave={handleMouseLeave}
+ role="button"
+ tabIndex={0}
+ aria-label={`查看${category.name}课程类别`}
+ >
+
+
+
+
+
+ );
+ })}
+
+
+ {category.description}
+
+
+
+
+ {category.name}
+
+
+ {category.count} 门课程
+
+
+
+ 了解更多
+
+ →
+
+
+
+
+
+ )}
+
+
+
+ {filteredCourses.length >= visibleCourses && (
+
+
+
+
+
+ {title}
+
+
+ {description}
+
+
+
+ {categories.map((category) => (
+ setSelectedCategory(category)}
+ className={`px-4 py-2 text-base cursor-pointer hover:scale-105 transform transition-all duration-300 ${selectedCategory === category
+ ? 'shadow-[0_2px_8px_-4px_rgba(59,130,246,0.5)]'
+ : 'hover:shadow-md'
+ }`}
+ >
+ {category}
+
+ ))}
+
+
+
+ {displayedCourses.map((course) => (
+
+
+
+
+ }
+ >
+
+
+
+ )}
+
+
+ {course.title}
+
+
+
+ ))}
+
+
+ {course.category}
+
+
+ {course.level}
+
+
+
+
+ {course.instructor}
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+ navigate('/courses')}
+ className="cursor-pointer tracking-widest text-gray-500 hover:text-primary font-medium flex items-center gap-2 transition-all duration-300 ease-in-out"
+ >
+ 查看更多
+
+
+
+
+
+ );
+ };
+
+ return (
+
+
+
+ 
+
+
+
+ {teacher.description}
+
+
+
+
+
+ {teacher.name}
+
+
+ {teacher.title}
+
+
+
+
+
+
+ 课程
+
+
+
+
+ 学员
+
+
+
+
+ 评分
+
+
+
+
+
+
+
+ 优秀讲师
+
+
+ 业界专家实战分享，传授独家经验
+
+
+
+
+
+ {featuredTeachers.map((teacher, index) => (
+
+
+
+
+
+
+
+ {carouselItems.map((item, index) => (
+
+
+ {/* Navigation Buttons */}
+
+
+
+
+ {/* Stats Container */}
+
+
+
+
+
+ {/* Content Container */}
+
+ ))}
+
+
+
+
+ {item.title}
+
+
+ {item.desc}
+
+
+
+
+
+
+ {platformStats.map((stat, index) => (
+
+
+
+ ))}
+
+ {stat.icon}
+
+
+ {stat.value}
+
+ {stat.label}
+
- {/*
- );
+const HomePage = () => {
+ const mockCourses = [
+ {
+ id: 1,
+ title: 'Python 零基础入门',
+ instructor: '张教授',
+ students: 12000,
+ rating: 4.8,
+ level: '入门',
+ duration: '36小时',
+ category: '编程语言',
+ progress: 0,
+ thumbnail: '/images/course1.jpg',
+ },
+ {
+ id: 2,
+ title: '数据结构与算法',
+ instructor: '李教授',
+ students: 8500,
+ rating: 4.9,
+ level: '进阶',
+ duration: '48小时',
+ category: '计算机基础',
+ progress: 35,
+ thumbnail: '/images/course2.jpg',
+ },
+ {
+ id: 3,
+ title: '前端开发实战',
+ instructor: '王教授',
+ students: 10000,
+ rating: 4.7,
+ level: '中级',
+ duration: '42小时',
+ category: '前端开发',
+ progress: 68,
+ thumbnail: '/images/course3.jpg',
+ },
+ {
+ id: 4,
+ title: 'Java企业级开发',
+ instructor: '刘教授',
+ students: 9500,
+ rating: 4.6,
+ level: '高级',
+ duration: '56小时',
+ category: '编程语言',
+ progress: 0,
+ thumbnail: '/images/course4.jpg',
+ },
+ {
+ id: 5,
+ title: '人工智能基础',
+ instructor: '陈教授',
+ students: 11000,
+ rating: 4.9,
+ level: '中级',
+ duration: '45小时',
+ category: '人工智能',
+ progress: 20,
+ thumbnail: '/images/course5.jpg',
+ },
+ {
+ id: 6,
+ title: '大数据分析',
+ instructor: '赵教授',
+ students: 8000,
+ rating: 4.8,
+ level: '进阶',
+ duration: '50小时',
+ category: '数据科学',
+ progress: 45,
+ thumbnail: '/images/course6.jpg',
+ },
+ {
+ id: 7,
+ title: '云计算实践',
+ instructor: '孙教授',
+ students: 7500,
+ rating: 4.7,
+ level: '高级',
+ duration: '48小时',
+ category: '云计算',
+ progress: 15,
+ thumbnail: '/images/course7.jpg',
+ },
+ {
+ id: 8,
+ title: '移动应用开发',
+ instructor: '周教授',
+ students: 9000,
+ rating: 4.8,
+ level: '中级',
+ duration: '40小时',
+ category: '移动开发',
+ progress: 0,
+ thumbnail: '/images/course8.jpg',
+ },
+ ];
+
+ return (
+
-
- {/*
-
*/}
- {/*
+
+ );
};
-export default HomePage;
+export default HomePage;
\ No newline at end of file
diff --git a/apps/web/src/app/main/layout/MainFooter.tsx b/apps/web/src/app/main/layout/MainFooter.tsx
new file mode 100644
index 0000000..1356335
--- /dev/null
+++ b/apps/web/src/app/main/layout/MainFooter.tsx
@@ -0,0 +1,68 @@
+import { CloudOutlined, FileSearchOutlined, HomeOutlined, MailOutlined, PhoneOutlined } from '@ant-design/icons';
+import { Layout, Typography } from 'antd';
+export function MainFooter() {
+ return (
+
+ );
+}
diff --git a/apps/web/src/app/main/layout/MainHeader.tsx b/apps/web/src/app/main/layout/MainHeader.tsx
new file mode 100644
index 0000000..d7d089b
--- /dev/null
+++ b/apps/web/src/app/main/layout/MainHeader.tsx
@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { Input, Layout, Avatar, Button, Dropdown } from 'antd';
+import { SearchOutlined, UserOutlined } from '@ant-design/icons';
+import { useAuth } from '@web/src/providers/auth-provider';
+import { useNavigate } from 'react-router-dom';
+import { UserMenu } from './UserMenu';
+import { NavigationMenu } from './NavigationMenu';
+
+const { Header } = Layout;
+
+export function MainHeader() {
+ const [searchValue, setSearchValue] = useState('');
+ const { isAuthenticated, user } = useAuth();
+ const navigate = useNavigate();
+
+ return (
+
+
+
+
+ navigate('/')}
+ className="text-2xl font-bold bg-gradient-to-r from-primary-600 via-primary-500 to-primary-400 bg-clip-text text-transparent hover:scale-105 transition-transform cursor-pointer"
+ >
+ 烽火慕课
+
+
+
+ {(user?.showname || user?.username || '')[0]?.toUpperCase()}
+
+
+ ) : (
+
+ )}
+
+
+ }
+ placeholder="搜索课程"
+ className="w-72 rounded-full"
+ value={searchValue}
+ onChange={(e) => setSearchValue(e.target.value)}
+ />
+
+ {isAuthenticated ? (
+
+ My Course Page
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/app/main/self/profiles/page.tsx b/apps/web/src/app/main/self/profiles/page.tsx
new file mode 100644
index 0000000..70ac75b
--- /dev/null
+++ b/apps/web/src/app/main/self/profiles/page.tsx
@@ -0,0 +1,3 @@
+export default function ProfilesPage() {
+ return <>Profiles
+}
\ No newline at end of file
diff --git a/apps/web/src/components/common/editor/graph/edges/FloatEdge.tsx b/apps/web/src/components/common/editor/graph/edges/FloatEdge.tsx
deleted file mode 100644
index 7224da2..0000000
--- a/apps/web/src/components/common/editor/graph/edges/FloatEdge.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { EdgeProps, getBezierPath, useInternalNode } from '@xyflow/react';
-import { getEdgeParams } from '../utils';
-
-/**
- * FloatingEdge 组件用于渲染图中的浮动边。
- * 该组件通过计算源节点和目标节点的位置，生成贝塞尔曲线路径，并渲染为SVG路径元素。
- * 适用于需要自定义边样式的图结构可视化场景。
- */
-function FloatingEdge({ id, source, target, markerEnd, style }: EdgeProps) {
- // 使用 useInternalNode 钩子获取源节点和目标节点的内部节点信息
- const sourceNode = useInternalNode(source);
- const targetNode = useInternalNode(target);
-
- // 如果源节点或目标节点不存在，则不渲染任何内容
- if (!sourceNode || !targetNode) {
- return null;
- }
-
- // 获取边的参数，包括源节点和目标节点的坐标及位置信息
- const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(
- sourceNode,
- targetNode,
- );
-
- // 使用 getBezierPath 函数生成贝塞尔曲线路径
- const [edgePath] = getBezierPath({
- sourceX: sx,
- sourceY: sy,
- sourcePosition: sourcePos,
- targetPosition: targetPos,
- targetX: tx,
- targetY: ty,
- });
-
- // 返回 SVG 路径元素，表示图中的边
- return (
- {
+ const nodeMap = new Map();
+ nodes.forEach(node => {
+ nodeMap.set(node.id, { ...node, children: [], width: 150, height: 40 });
+ });
+ return nodeMap;
+ }
+
+ protected buildTreeStructure(nodeMap: Map, edges: Edge[]): NodeWithLayout | undefined {
+ edges.forEach(edge => {
+ const source = nodeMap.get(edge.source);
+ const target = nodeMap.get(edge.target);
+ if (source && target) {
+ source.children?.push(target);
+ target.parent = source;
+ }
+ });
+ return Array.from(nodeMap.values()).find(node => !node.parent);
+ }
+
+ abstract layout(options: LayoutOptions): { nodes: Node[], edges: Edge[] };
+}
diff --git a/apps/web/src/components/common/editor/graph/layout/MindMapLayout.ts b/apps/web/src/components/common/editor/graph/layout/MindMapLayout.ts
new file mode 100644
index 0000000..42779ca
--- /dev/null
+++ b/apps/web/src/components/common/editor/graph/layout/MindMapLayout.ts
@@ -0,0 +1,87 @@
+import { Edge,Node } from "@xyflow/react";
+import { BaseLayout } from "./BaseLayout";
+import { LayoutOptions, NodeWithLayout } from "./types";
+
+// 思维导图布局实现
+export class MindMapLayout extends BaseLayout {
+ layout(options: LayoutOptions): { nodes: Node[], edges: Edge[] } {
+ const {
+ nodes,
+ edges,
+ levelSeparation = 200,
+ nodeSeparation = 60
+ } = options;
+
+ const nodeMap = this.buildNodeMap(nodes);
+ const rootNode = this.buildTreeStructure(nodeMap, edges);
+ if (!rootNode) return { nodes, edges };
+
+ this.assignSides(rootNode);
+ this.calculateSubtreeHeight(rootNode, nodeSeparation);
+ this.calculateLayout(rootNode, 0, 0, levelSeparation, nodeSeparation);
+
+ const layoutedNodes = Array.from(nodeMap.values()).map(node => ({
+ ...node,
+ position: node.position,
+ }));
+
+ return { nodes: layoutedNodes, edges };
+ }
+
+ private assignSides(node: NodeWithLayout, isRight: boolean = true): void {
+ if (!node.children?.length) return;
+
+ const len = node.children.length;
+ const midIndex = Math.floor(len / 2);
+
+ if (!node.parent) {
+ for (let i = 0; i < len; i++) {
+ const child = node.children[i];
+ this.assignSides(child, i < midIndex);
+ child.isRight = i < midIndex;
+ }
+ } else {
+ node.children.forEach(child => {
+ this.assignSides(child, isRight);
+ child.isRight = isRight;
+ });
+ }
+ }
+
+ private calculateSubtreeHeight(node: NodeWithLayout, nodeSeparation: number): number {
+ if (!node.children?.length) {
+ node.subtreeHeight = node.height || 40;
+ return node.subtreeHeight;
+ }
+
+ const childrenHeight = node.children.reduce((sum, child) => {
+ return sum + this.calculateSubtreeHeight(child, nodeSeparation);
+ }, 0);
+
+ const totalGaps = (node.children.length - 1) * nodeSeparation;
+ node.subtreeHeight = Math.max(node.height || 40, childrenHeight + totalGaps);
+ return node.subtreeHeight;
+ }
+
+ private calculateLayout(
+ node: NodeWithLayout,
+ x: number,
+ y: number,
+ levelSeparation: number,
+ nodeSeparation: number
+ ): void {
+ node.position = { x, y };
+ if (!node.children?.length) return;
+
+ let currentY = y - (node.subtreeHeight || 0) / 2;
+
+ node.children.forEach(child => {
+ const direction = child.isRight ? 1 : -1;
+ const childX = x + (levelSeparation * direction);
+ const childY = currentY + (child.subtreeHeight || 0) / 2;
+
+ this.calculateLayout(child, childX, childY, levelSeparation, nodeSeparation);
+ currentY += (child.subtreeHeight || 0) + nodeSeparation;
+ });
+ }
+}
\ No newline at end of file
diff --git a/apps/web/src/components/common/editor/graph/layout/SingleMapLayout.ts b/apps/web/src/components/common/editor/graph/layout/SingleMapLayout.ts
new file mode 100644
index 0000000..2d7d68c
--- /dev/null
+++ b/apps/web/src/components/common/editor/graph/layout/SingleMapLayout.ts
@@ -0,0 +1,127 @@
+import { Edge, Node } from "@xyflow/react";
+import { BaseLayout } from "./BaseLayout";
+import { LayoutOptions, NodeWithLayout } from "./types";
+
+/**
+ * SingleMapLayout 类继承自 BaseLayout，用于实现单图布局。
+ * 该类主要负责将节点和边按照一定的规则进行布局，使得节点在视觉上呈现出层次分明、结构清晰的效果。
+ */
+export class SingleMapLayout extends BaseLayout {
+ /**
+ * 布局方法，根据提供的选项对节点和边进行布局。
+ * @param options 布局选项，包含节点、边、层级间距和节点间距等信息。
+ * @returns 返回布局后的节点和边。
+ */
+ layout(options: LayoutOptions): { nodes: Node[], edges: Edge[] } {
+ const { nodes, edges, levelSeparation = 100, nodeSeparation = 30 } = options;
+ const nodeMap = this.buildNodeMap(nodes);
+ const root = this.buildTreeStructure(nodeMap, edges);
+
+ if (!root) {
+ return { nodes: [], edges: [] };
+ }
+
+ // 计算子树的尺寸
+ this.calculateSubtreeDimensions(root);
+
+ // 第一遍：分配垂直位置
+ this.assignInitialVerticalPositions(root, 0);
+
+ // 第二遍：使用平衡布局定位节点
+ this.positionNodes(root, 0, 0, levelSeparation, nodeSeparation, 'right');
+
+ return {
+ nodes: Array.from(nodeMap.values()),
+ edges
+ };
+ }
+
+ /**
+ * 计算子树的尺寸，包括高度和宽度。
+ * @param node 当前节点。
+ */
+ private calculateSubtreeDimensions(node: NodeWithLayout): void {
+
+ node.subtreeHeight = node.height || 40;
+ node.subtreeWidth = node.width || 150;
+
+ if (node.children && node.children.length > 0) {
+ // 首先计算所有子节点的尺寸
+ node.children.forEach(child => this.calculateSubtreeDimensions(child));
+
+ // 计算子节点所需的总高度，包括间距
+ const totalChildrenHeight = this.calculateTotalChildrenHeight(node.children, 30);
+
+ // 更新节点的子树尺寸
+ node.subtreeHeight = Math.max(node.subtreeHeight, totalChildrenHeight);
+ node.subtreeWidth += Math.max(...node.children.map(child => child.subtreeWidth || 0));
+ }
+ }
+
+ /**
+ * 计算子节点的总高度。
+ * @param children 子节点数组。
+ * @param spacing 子节点之间的间距。
+ * @returns 返回子节点的总高度。
+ */
+ private calculateTotalChildrenHeight(children: NodeWithLayout[], spacing: number): number {
+ if (!children.length) return 0;
+ const totalHeight = children.reduce((sum, child) => sum + (child.subtreeHeight || 0), 0);
+ return totalHeight + (spacing * (children.length - 1));
+ }
+
+ /**
+ * 分配初始垂直位置。
+ * @param node 当前节点。
+ * @param level 当前层级。
+ */
+ private assignInitialVerticalPositions(node: NodeWithLayout, level: number): void {
+ if (!node.children?.length) return;
+ const totalHeight = this.calculateTotalChildrenHeight(node.children, 30);
+ let currentY = -(totalHeight / 2);
+ node.children.forEach(child => {
+ const childHeight = child.subtreeHeight || 0;
+ child.verticalLevel = level + 1;
+ child.relativeY = currentY + (childHeight / 2);
+ this.assignInitialVerticalPositions(child, level + 1);
+ currentY += childHeight + 30; // 30 是垂直间距
+ });
+ }
+
+ /**
+ * 定位节点。
+ * @param node 当前节点。
+ * @param x 当前节点的水平位置。
+ * @param y 当前节点的垂直位置。
+ * @param levelSeparation 层级间距。
+ * @param nodeSeparation 节点间距。
+ * @param direction 布局方向，'left' 或 'right'。
+ */
+ private positionNodes(
+ node: NodeWithLayout,
+ x: number,
+ y: number,
+ levelSeparation: number,
+ nodeSeparation: number,
+ direction: 'left' | 'right'
+ ): void {
+ node.position = { x, y };
+ if (!node.children?.length) return;
+ // 计算子节点的水平位置
+ const nextX = direction === 'right'
+ ? x + (node.width || 0) + levelSeparation
+ : x - (node.width || 0) - levelSeparation;
+ // 定位每个子节点
+ node.children.forEach(child => {
+ const childY = y + (child.relativeY || 0);
+ this.positionNodes(
+ child,
+ nextX,
+ childY,
+ levelSeparation,
+ nodeSeparation,
+ direction
+ );
+ });
+ }
+}
\ No newline at end of file
diff --git a/apps/web/src/components/common/editor/graph/layout/TreeLayout.ts b/apps/web/src/components/common/editor/graph/layout/TreeLayout.ts
new file mode 100644
index 0000000..31fe186
--- /dev/null
+++ b/apps/web/src/components/common/editor/graph/layout/TreeLayout.ts
@@ -0,0 +1,68 @@
+import { BaseLayout } from "./BaseLayout";
+import { LayoutOptions, LayoutStrategy, NodeWithLayout } from "./types";
+import { Edge, Node } from "@xyflow/react";
+export class TreeLayout extends BaseLayout {
+ layout(options: LayoutOptions): { nodes: Node[], edges: Edge[] } {
+ const {
+ nodes,
+ edges,
+ levelSeparation = 100, // 层级间垂直距离
+ nodeSeparation = 50 // 节点间水平距离
+ } = options;
+
+ const nodeMap = this.buildNodeMap(nodes);
+ const rootNode = this.buildTreeStructure(nodeMap, edges);
+ if (!rootNode) return { nodes, edges };
+ // 计算每个节点的子树宽度
+ this.calculateSubtreeWidth(rootNode, nodeSeparation);
+ // 计算布局位置
+ this.calculateTreeLayout(rootNode, 0, 0, levelSeparation);
+ const layoutedNodes = Array.from(nodeMap.values()).map(node => ({
+ ...node,
+ position: node.position,
+ }));
+ return { nodes: layoutedNodes, edges };
+ }
+
+ private calculateSubtreeWidth(node: NodeWithLayout, nodeSeparation: number): number {
+ if (!node.children?.length) {
+ node.subtreeWidth = node.width || 150;
+ return node.subtreeWidth;
+ }
+
+ const childrenWidth = node.children.reduce((sum, child) => {
+ return sum + this.calculateSubtreeWidth(child, nodeSeparation);
+ }, 0);
+
+ const totalGaps = (node.children.length - 1) * nodeSeparation;
+ node.subtreeWidth = Math.max(node.width || 150, childrenWidth + totalGaps);
+ return node.subtreeWidth;
+ }
+
+ private calculateTreeLayout(
+ node: NodeWithLayout,
+ x: number,
+ y: number,
+ levelSeparation: number
+ ): void {
+ node.position = { x, y };
+
+ if (!node.children?.length) return;
+
+ const totalChildrenWidth = node.children.reduce((sum, child) =>
+ sum + (child.subtreeWidth || 0), 0);
+ const totalGaps = (node.children.length - 1) * (node.width || 150);
+
+ // 计算最左侧子节点的起始x坐标
+ let startX = x - (totalChildrenWidth + totalGaps) / 2;
+
+ node.children.forEach(child => {
+ const childX = startX + (child.subtreeWidth || 0) / 2;
+ const childY = y + levelSeparation;
+
+ this.calculateTreeLayout(child, childX, childY, levelSeparation);
+
+ startX += (child.subtreeWidth || 0) + (node.width || 150);
+ });
+ }
+}
\ No newline at end of file
diff --git a/apps/web/src/components/common/editor/graph/layout/index.ts b/apps/web/src/components/common/editor/graph/layout/index.ts
index 631dcda..45022e5 100644
--- a/apps/web/src/components/common/editor/graph/layout/index.ts
+++ b/apps/web/src/components/common/editor/graph/layout/index.ts
@@ -1,124 +1,34 @@
import { Node, Edge } from "@xyflow/react";
+import { LayoutOptions, LayoutStrategy } from "./types";
+import { TreeLayout } from "./TreeLayout";
+import { MindMapLayout } from "./MindMapLayout";
+import { SingleMapLayout } from "./SingleMapLayout";
-interface LayoutOptions {
- nodes: Node[];
- edges: Edge[];
- levelSeparation?: number;
- nodeSeparation?: number;
+// 布局工厂类
+class LayoutFactory {
+ static createLayout(type: 'mindmap' | 'tree' | 'force' | 'single'): LayoutStrategy {
+ switch (type) {
+ case 'mindmap':
+ return new MindMapLayout();
+ case 'tree':
+ return new TreeLayout();
+ case 'single':
+ return new SingleMapLayout()
+ case 'force':
+ // return new ForceLayout(); // 待实现
+ default:
+ return new MindMapLayout();
+ }
+ }
}
-interface NodeWithLayout extends Node {
- width?: number;
- height?: number;
- children?: NodeWithLayout[];
- parent?: NodeWithLayout;
- subtreeHeight?: number;
- isRight?: boolean;
+// 导出布局函数
+export function getLayout(type: 'mindmap' | 'tree' | 'force' | 'single', options: LayoutOptions) {
+ const layoutStrategy = LayoutFactory.createLayout(type);
+ return layoutStrategy.layout(options);
}
+// 为了保持向后兼容，保留原有的导出
export function getMindMapLayout(options: LayoutOptions) {
- const {
- nodes,
- edges,
- levelSeparation = 200,
- nodeSeparation = 60
- } = options;
-
- // 构建树形结构
- const nodeMap = new Map();
- nodes.forEach(node => {
- nodeMap.set(node.id, { ...node, children: [], width: 150, height: 40 });
- });
-
- let rootNode: NodeWithLayout | undefined;
- edges.forEach(edge => {
- const source = nodeMap.get(edge.source);
- const target = nodeMap.get(edge.target);
- if (source && target) {
- source.children?.push(target);
- target.parent = source;
- }
- });
-
- // 找到根节点
- rootNode = Array.from(nodeMap.values()).find(node => !node.parent);
- if (!rootNode) return { nodes, edges };
-
- // 分配节点到左右两侧
- function assignSides(node: NodeWithLayout, isRight: boolean = true) {
- if (!node.children?.length) return;
-
- const len = node.children.length;
- const midIndex = Math.floor(len / 2);
-
- // 如果是根节点，将子节点分为左右两部分
- if (!node.parent) {
- for (let i = 0; i < len; i++) {
- const child = node.children[i];
- assignSides(child, i < midIndex);
- child.isRight = i < midIndex;
- }
- }
- // 如果不是根节点，所有子节点继承父节点的方向
- else {
- node.children.forEach(child => {
- assignSides(child, isRight);
- child.isRight = isRight;
- });
- }
- }
-
- // 计算子树高度
- function calculateSubtreeHeight(node: NodeWithLayout): number {
- if (!node.children?.length) {
- node.subtreeHeight = node.height || 40;
- return node.subtreeHeight;
- }
-
- const childrenHeight = node.children.reduce((sum, child) => {
- return sum + calculateSubtreeHeight(child);
- }, 0);
-
- const totalGaps = (node.children.length - 1) * nodeSeparation;
- node.subtreeHeight = Math.max(node.height || 40, childrenHeight + totalGaps);
- return node.subtreeHeight;
- }
-
- // 布局计算
- function calculateLayout(node: NodeWithLayout, x: number, y: number) {
- node.position = { x, y };
- if (!node.children?.length) return;
-
- let currentY = y - (node.subtreeHeight || 0) / 2;
-
- node.children.forEach(child => {
- const direction = child.isRight ? 1 : -1;
- const childX = x + (levelSeparation * direction);
- const childY = currentY + (child.subtreeHeight || 0) / 2;
-
- calculateLayout(child, childX, childY);
- currentY += (child.subtreeHeight || 0) + nodeSeparation;
- });
- }
-
- // 执行布局流程
- if (rootNode) {
- // 1. 分配节点到左右两侧
- assignSides(rootNode);
- // 2. 计算子树高度
- calculateSubtreeHeight(rootNode);
- // 3. 执行布局计算
- calculateLayout(rootNode, 0, 0);
- }
-
- // 转换回原始格式
- const layoutedNodes = Array.from(nodeMap.values()).map(node => ({
- ...node,
- position: node.position,
- }));
-
- return {
- nodes: layoutedNodes,
- edges,
- };
+ return getLayout("single", options);
}
\ No newline at end of file
diff --git a/apps/web/src/components/common/editor/graph/layout/types.ts b/apps/web/src/components/common/editor/graph/layout/types.ts
new file mode 100644
index 0000000..b46b4df
--- /dev/null
+++ b/apps/web/src/components/common/editor/graph/layout/types.ts
@@ -0,0 +1,23 @@
+import { Node, Edge } from "@xyflow/react";
+// 基础接口和类型定义
+export interface LayoutOptions {
+ nodes: Node[];
+ edges: Edge[];
+ levelSeparation?: number;
+ nodeSeparation?: number;
+}
+
+export interface NodeWithLayout extends Node {
+ children?: NodeWithLayout[];
+ parent?: NodeWithLayout;
+ subtreeHeight?: number;
+ subtreeWidth?: number;
+ isRight?: boolean;
+ relativeY?: number
+ verticalLevel?: number
+}
+
+// 布局策略接口
+export interface LayoutStrategy {
+ layout(options: LayoutOptions): { nodes: Node[], edges: Edge[] };
+}
\ No newline at end of file
diff --git a/apps/web/src/components/common/editor/graph/nodes/GraphNode.tsx b/apps/web/src/components/common/editor/graph/nodes/GraphNode.tsx
index b5b8636..d4aec7b 100644
--- a/apps/web/src/components/common/editor/graph/nodes/GraphNode.tsx
+++ b/apps/web/src/components/common/editor/graph/nodes/GraphNode.tsx
@@ -1,8 +1,10 @@
import { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { Handle, Position, NodeProps, Node } from '@xyflow/react';
+import { Handle, Position, NodeProps, Node, useUpdateNodeInternals } from '@xyflow/react';
import useGraphStore from '../store';
import { shallow } from 'zustand/shallow';
import { GraphState } from '../types';
+import { cn } from '@web/src/utils/classname';
+import { LEVEL_STYLES, NODE_BASE_STYLES, TEXTAREA_BASE_STYLES } from './style';
export type GraphNode = Node<{
label: string;
@@ -10,157 +12,166 @@ export type GraphNode = Node<{
level?: number;
}, 'graph-node'>;
-const getLevelStyles = (level: number = 0) => {
+
+
+interface TextMeasurerProps {
+ element: HTMLTextAreaElement;
+ minWidth?: number;
+ maxWidth?: number;
+ padding?: number;
+}
+
+const measureTextWidth = ({
+ element,
+ minWidth = 60,
+ maxWidth = 400,
+ padding = 16,
+}: TextMeasurerProps): number => {
+ const span = document.createElement('span');
const styles = {
- 0: {
- container: 'bg-[#2B4B6F] text-white',
- handle: 'bg-[#2B4B6F]',
- fontSize: 'text-lg'
- },
- 1: {
- container: 'bg-blue-300 text-white',
- handle: 'bg-[#3A5F84]',
- fontSize: 'text-base'
- },
- 2: {
- container: 'bg-gray-100',
- handle: 'bg-[#496F96]',
- fontSize: 'text-base'
- }
- };
- return styles[level as keyof typeof styles]
+ visibility: 'hidden',
+ position: 'absolute',
+ whiteSpace: 'pre',
+ fontSize: window.getComputedStyle(element).fontSize,
+ } as const;
+
+ Object.assign(span.style, styles);
+ span.textContent = element.value || element.placeholder;
+ document.body.appendChild(span);
+
+ const contentWidth = Math.min(Math.max(span.offsetWidth + padding, minWidth), maxWidth);
+ document.body.removeChild(span);
+
+ return contentWidth;
};
-
-const baseTextStyles = `
-text-center
-break-words
-whitespace-pre-wrap
-`;
-const handleStyles = `
- w-2.5 h-2.5
- border-2 border-white/80
- rounded-full
- transition-colors
- duration-200
- opacity-80
- hover:opacity-100
-`;
const selector = (store: GraphState) => ({
updateNode: store.updateNode,
});
-export const GraphNode = memo(({ id, selected, data, isConnectable }: NodeProps) => {
+export const GraphNode = memo(({ id, selected, width, height, data, isConnectable }: NodeProps) => {
const { updateNode } = useGraphStore(selector, shallow);
const [isEditing, setIsEditing] = useState(false);
- const levelStyles = getLevelStyles(data.level);
const [inputValue, setInputValue] = useState(data.label);
const [isComposing, setIsComposing] = useState(false);
- const updateTextareaHeight = useCallback((element: HTMLTextAreaElement) => {
+ const containerRef = useRef(null);
+ const textareaRef = useRef(null);
+ const updateNodeInternals = useUpdateNodeInternals();
+ // const [nodeWidth, setNodeWidth] = useState(width)
+ // const [nodeHeight, setNodeHeight] = useState(height)
+ const updateTextareaSize = useCallback((element: HTMLTextAreaElement) => {
+ const contentWidth = measureTextWidth({ element });
+ element.style.whiteSpace = contentWidth >= 400 ? 'pre-wrap' : 'pre';
+ element.style.width = `${contentWidth}px`;
element.style.height = 'auto';
element.style.height = `${element.scrollHeight}px`;
+
}, []);
+
const handleChange = useCallback((evt: React.ChangeEvent) => {
const newValue = evt.target.value;
setInputValue(newValue);
updateNode(id, { label: newValue });
- updateTextareaHeight(evt.target);
- }, [updateNode, id, updateTextareaHeight]);
+ updateTextareaSize(evt.target);
+ }, [updateNode, id, updateTextareaSize]);
+
+ useEffect(() => {
+ if (textareaRef.current) {
+ updateTextareaSize(textareaRef.current);
+ }
+ }, [isEditing, inputValue, updateTextareaSize]);
+
const handleKeyDown = useCallback((evt: React.KeyboardEvent) => {
- if (!isEditing) {
- if (/^[a-zA-Z0-9]$/.test(evt.key)) {
- setIsEditing(true);
- setInputValue(evt.key); // 将第一个字符添加到现有内容后
- updateNode(id, { label: evt.key });
- }
- if (evt.key === ' ') {
- setIsEditing(true);
- setInputValue(data.label); // 将第一个字符添加到现有内容后
- updateNode(id, { label: data.label });
- }
- evt.preventDefault(); // 阻止默认行为
- evt.stopPropagation(); // 阻止事件冒泡
- } else if (isEditing && evt.key === 'Enter' && !evt.shiftKey && !isComposing) {
- setIsEditing(false);
+ const isAlphanumeric = /^[a-zA-Z0-9]$/.test(evt.key);
+ const isSpaceKey = evt.key === ' ';
+
+ if (!isEditing && (isAlphanumeric || isSpaceKey)) {
evt.preventDefault();
+ evt.stopPropagation();
+
+ const newValue = isAlphanumeric ? evt.key : data.label;
+ setIsEditing(true);
+ setInputValue(newValue);
+ updateNode(id, { label: newValue });
+ return;
+ }
+
+ if (isEditing && evt.key === 'Enter' && !evt.shiftKey && !isComposing) {
+ evt.preventDefault();
+ setIsEditing(false);
}
}, [isEditing, isComposing, data.label, id, updateNode]);
+
const handleDoubleClick = useCallback(() => {
setIsEditing(true);
}, []);
- const handleBlur = useCallback(() => setIsEditing(false), []);
- // 添加 ref 来获取父元素
- const containerRef = useRef(null);
- const textareaRef = useRef(null);
+ const handleBlur = useCallback(() => {
+ setIsEditing(false);
+ }, []);
useEffect(() => {
- if (isEditing && textareaRef.current) {
- updateTextareaHeight(textareaRef.current);
- // 聚焦并将光标移到末尾
- textareaRef.current.focus();
- const length = textareaRef.current.value.length;
- textareaRef.current.setSelectionRange(length, length);
- }
- }, [isEditing, updateTextareaHeight]);
+ const resizeObserver = new ResizeObserver((entries) => {
+ for (const entry of entries) {
+ const { width, height } = entry.contentRect;
+ updateNodeInternals(id);
+ }
+ });
+ if (containerRef.current) {
+ resizeObserver.observe(containerRef.current);
+ }
+
+ return () => {
+ resizeObserver.disconnect();
+ };
+ }, []);
return (
-