= observer((props) => {
},
}),
dropTargetForElements({
- element,
- canDrop: ({ source }) => getCanDrop(source, widget),
+ element, // 当前行的元素ref
+ canDrop: ({ source }) => getCanDrop(source, widget), //控制能否在此投放
onDragStart: () => {
setIsDragging(true);
},
diff --git a/apps/web/core/components/project/card-list.tsx b/apps/web/core/components/project/card-list.tsx
index ba8f7a6bb58..1d4ab9abb3f 100644
--- a/apps/web/core/components/project/card-list.tsx
+++ b/apps/web/core/components/project/card-list.tsx
@@ -28,7 +28,7 @@ export const ProjectCardList = observer((props: TProjectCardListProps) => {
// plane hooks
const { t } = useTranslation();
// store hooks
- const { toggleCreateProjectModal } = useCommandPalette();
+ const { toggleCreateProjectModal } = useCommandPalette(); // 控制是否打开添加项目的dialog
const {
loader,
fetchStatus,
@@ -92,6 +92,8 @@ export const ProjectCardList = observer((props: TProjectCardListProps) => {
src={searchQuery.trim() === "" ? resolvedFiltersImage : resolvedNameFilterImage}
className="mx-auto h-36 w-36 sm:h-48 sm:w-48"
alt="No matching projects"
+ width={192}
+ height={192}
/>
{t("workspace_projects.empty_state.filter.title")}
diff --git a/apps/web/core/components/project/project-activity.tsx b/apps/web/core/components/project/project-activity.tsx
new file mode 100644
index 00000000000..4edbfa68e62
--- /dev/null
+++ b/apps/web/core/components/project/project-activity.tsx
@@ -0,0 +1,199 @@
+"use client";
+
+import { FC, useState, useEffect } from "react";
+import { observer } from "mobx-react";
+// plane package imports
+import { E_SORT_ORDER } from "@plane/constants";
+import { useLocalStorage } from "@plane/hooks";
+// i18n
+import { useTranslation } from "@plane/i18n";
+// components
+import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useUser } from "@/hooks/store/user";
+// icons
+import { Clock, User, Edit3, Settings, ChevronUp, ChevronDown } from "lucide-react";
+
+type TProjectActivity = {
+ workspaceSlug: string;
+ projectId: string;
+ disabled?: boolean;
+};
+
+interface IProjectActivityItem {
+ id: string;
+ actor_detail: {
+ id: string;
+ display_name: string;
+ avatar?: string;
+ };
+ verb: string;
+ field: string;
+ old_value: string | null;
+ new_value: string | null;
+ comment: string;
+ created_at: string;
+ project_detail: {
+ id: string;
+ name: string;
+ identifier: string;
+ };
+}
+
+export const ProjectActivity: FC = observer((props) => {
+ const { workspaceSlug, projectId, disabled = false } = props;
+ // i18n
+ const { t } = useTranslation();
+ // hooks
+ const { setValue: setSortOrder, storedValue: sortOrder } = useLocalStorage(
+ "project_activity_sort_order",
+ E_SORT_ORDER.DESC
+ );
+ // store hooks
+ const { getProjectById, fetchProjectHistory } = useProject();
+ const { data: currentUser } = useUser();
+
+ // states
+ const [activities, setActivities] = useState([]);
+ const [isLoading, setIsLoading] = useState(false);
+
+ // derived values
+ const project = getProjectById(projectId);
+
+ const toggleSortOrder = () => {
+ setSortOrder(sortOrder === E_SORT_ORDER.ASC ? E_SORT_ORDER.DESC : E_SORT_ORDER.ASC);
+ };
+
+ const fetchActivities = async () => {
+ if (!workspaceSlug || !projectId) return;
+
+ setIsLoading(true);
+ try {
+ const response = await fetchProjectHistory(workspaceSlug, projectId);
+ console.log("🚀 ~ fetchActivities ~ responsess:", response);
+ // 由于后端返回的是模拟数据，我们需要处理单个对象或数组
+ const activityData = Array.isArray(response) ? response : [response];
+ setActivities(activityData);
+ } catch (error) {
+ console.error("Error fetching project activities:", error);
+ setActivities([]);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ fetchActivities();
+ }, [workspaceSlug, projectId]);
+
+ const formatActivityMessage = (activity: IProjectActivityItem) => {
+ const { verb, field, old_value, new_value, comment } = activity;
+
+ switch (field) {
+ case "description":
+ return comment || `更新了项目描述`;
+ case "name":
+ return `将项目名称从 "${old_value}" 更改为 "${new_value}"`;
+ case "project_lead":
+ return `更改了项目负责人`;
+ case "network":
+ return `更改了项目可见性`;
+ default:
+ return comment || `更新了 ${field}`;
+ }
+ };
+
+ const getActivityIcon = (field: string) => {
+ switch (field) {
+ case "description":
+ return ;
+ case "name":
+ return ;
+ case "project_lead":
+ return ;
+ default:
+ return ;
+ }
+ };
+
+ const sortedActivities = [...activities].sort((a, b) => {
+ const dateA = new Date(a.created_at).getTime();
+ const dateB = new Date(b.created_at).getTime();
+ return sortOrder === E_SORT_ORDER.ASC ? dateA - dateB : dateB - dateA;
+ });
+
+ if (!project) return <>;
+
+ return (
+
+ {/* header */}
+
+
项目活动
+
+
+
+
+
+ {/* activity list */}
+
+
+ {isLoading ? (
+
+ ) : sortedActivities.length > 0 ? (
+
+ {sortedActivities.map((activity) => (
+
+ {/* Avatar */}
+
+
+
+
+ {/* Activity content */}
+
+
+
{getActivityIcon(activity.field)}
+
+
+ {activity.actor_detail.display_name}
+ {formatActivityMessage(activity)}
+
+
+
+
+ {new Date(activity.created_at).toLocaleString("zh-CN", {
+ year: "numeric",
+ month: "short",
+ day: "numeric",
+ hour: "2-digit",
+ minute: "2-digit",
+ })}
+
+
+
+
+
+
+ ))}
+
+ ) : (
+
+
+
暂无活动记录
+
项目的更改和活动将在这里显示
+
+ )}
+
+
+
+
{t("common.properties")}
+
+ {/* 项目状态 */}
+
+
+
+ 状态
+
+
handleProjectUpdate({ default_state: val })}
+ projectId={projectId}
+ disabled={disabled}
+ buttonVariant="transparent-with-text"
+ className="w-2/3 flex-grow group"
+ buttonContainerClassName="w-full text-left"
+ buttonClassName="text-sm"
+ dropdownArrow
+ dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
+ />
+
+
+ {/* 项目优先级 */}
+ {/*
+
+
+ 优先级
+
+
handleProjectUpdate({ priority: val })}
+ disabled={disabled}
+ buttonVariant="transparent-with-text"
+ className="w-2/3 flex-grow group"
+ buttonContainerClassName="w-full text-left"
+ buttonClassName="text-sm"
+ dropdownArrow
+ dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
+ />
+ */}
+
+ {/* 项目负责人 */}
+
+
+
+ 项目负责人
+
+
+ handleProjectUpdate({ project_lead: Array.isArray(val) ? val[0] : val })
+ }
+ disabled={disabled}
+ projectId={projectId}
+ placeholder="选择负责人"
+ buttonVariant="transparent-with-text"
+ className="w-2/3 flex-grow group"
+ buttonContainerClassName="w-full text-left"
+ buttonClassName={`text-sm ${project?.project_lead ? "" : "text-custom-text-400"}`}
+ hideIcon={!project.project_lead}
+ dropdownArrow
+ dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
+ multiple={false}
+ showUserDetails={true}
+ />
+
+
+ {/* 项目成员 */}
+
+
+
+ 成员数量
+
+
+ {project.members?.length || 0} 名成员
+
+
+
+ {/* 创建者 */}
+ {/* {createdByDetails && (
+
+
+
+ 创建者
+
+
+
+ {createdByDetails?.display_name}
+
+
+ )} */}
+
+ {/* 项目可见性 */}
+ {/*
+
+ {project.network === 0 ? (
+
+ ) : (
+
+ )}
+ 可见性
+
+
+ {project.network === 0 ? "私有" : "公开"}
+
+
*/}
+
+ {/* 创建时间 */}
+
+
+
+ 创建时间
+
+
+ handleProjectUpdate({
+ created_at: val ? renderFormattedPayloadDate(val) : undefined,
+ })
+ }
+ placeholder="选择创建时间"
+ buttonVariant="transparent-with-text"
+ disabled={true}
+ className="w-2/3 flex-grow group"
+ buttonContainerClassName="w-full text-left"
+ buttonClassName={`text-sm ${project?.created_at ? "" : "text-custom-text-400"}`}
+ hideIcon
+ clearIconClassName="h-3 w-3 hidden group-hover:inline"
+ />
+
+
+ {/* 更新时间 */}
+
+
+
+ 更新时间
+
+
+ handleProjectUpdate({
+ updated_at: val ? renderFormattedPayloadDate(val) : null,
+ })
+ }
+ placeholder="选择更新时间"
+ buttonVariant="transparent-with-text"
+ disabled={true}
+ className="w-2/3 flex-grow group"
+ buttonContainerClassName="w-full text-left"
+ buttonClassName={`text-sm ${project?.updated_at ? "" : "text-custom-text-400"}`}
+ hideIcon
+ clearIconClassName="h-3 w-3 hidden group-hover:inline"
+ />
+
+
+
+
暂无工作项数据
+
该项目还没有创建任何工作项
+
+ {/* 标题 */}
+
+
进度
+
+
+ {/* 进度条 - 分离式设计 */}
+
+
+ {stats.map((item, index) => (
+
0 ? "8px" : "0px",
+ }}
+ title={`${item.label}: ${item.count} (${item.percentage.toFixed(1)}%)`}
+ />
+ ))}
+
+
+
+ {/* 图例 - 上下结构布局 */}
+
+ {stats.map((item) => (
+
+ {/* 上行：颜色块和标签 */}
+
+
+ {item.label}
+
+ {/* 下行：数量和百分比 */}
+
+ {item.count}
+ {item.percentage.toFixed(0)}%
+
+
+ ))}
+
+
+ );
+});
diff --git a/apps/web/core/components/sidebar/resizable-sidebar.tsx b/apps/web/core/components/sidebar/resizable-sidebar.tsx
index ddfd2ef9f2a..a3fdfa7746f 100644
--- a/apps/web/core/components/sidebar/resizable-sidebar.tsx
+++ b/apps/web/core/components/sidebar/resizable-sidebar.tsx
@@ -25,33 +25,38 @@ interface ResizableSidebarProps {
isAnySidebarDropdownOpen?: boolean;
disablePeekTrigger?: boolean;
}
+// width , setWidth : 受控 的宽度状态。父组件必须提供当前宽度值和更新宽度的函数。
+// isCollapsed , toggleCollapsed : 受控 的折叠状态。父组件控制侧边栏是否折叠，并提供切换方法。
+// showPeek , togglePeek : 受控 的“窥视”状态。父组件控制“窥视”视图是否显示，并提供切换方法。
+
+// minWidth , maxWidth : 限制侧边栏可拖动的最小和最大宽度。
export function ResizableSidebar({
- showPeek = false,
- togglePeek,
- peekDuration = 500,
- isCollapsed = false,
- toggleCollapsed: toggleCollapsedProp,
- onCollapsedChange,
- width,
- setWidth,
- onWidthChange,
- minWidth = 236,
- maxWidth = 350,
- className = "",
- children,
- extendedSidebar,
- isAnyExtendedSidebarExpanded = false,
- isAnySidebarDropdownOpen = false,
- disablePeekTrigger = false,
+ showPeek = false, // 受控 的“窥视”状态。父组件控制“窥视”视图是否显示，并提供切换方法。
+ togglePeek, // 用于切换“窥视”状态的函数。父组件必须提供此函数，以便在点击“窥视”按钮时切换“窥视”状态。
+ peekDuration = 500, // 控制“窥视”视图显示的持续时间。
+ isCollapsed = false, // 受控 的折叠状态。父组件控制侧边栏是否折叠，并提供切换方法。
+ toggleCollapsed: toggleCollapsedProp, // 用于切换折叠状态的函数。父组件必须提供此函数，以便在点击折叠按钮时切换折叠状态。
+ onCollapsedChange, //
+ width, // 受控 的宽度状态。父组件必须提供当前宽度值和更新宽度的函数。
+ setWidth, // 用于更新宽度的函数。父组件必须提供此函数，以便在拖动侧边栏时更新宽度。
+ onWidthChange, // 用于在宽度变化时触发的回调函数。父组件可以提供此函数，以便在宽度变化时执行自定义逻辑。
+ minWidth = 236, // 限制侧边栏可拖动的最小宽度
+ maxWidth = 350, // 限制侧边栏可拖动的最大宽度
+ className = "", // 自定义的 CSS 类名，用于添加自定义样式。
+ children, // 侧边栏的子元素。父组件可以在侧边栏中添加自定义内容。
+ extendedSidebar, // 侧边栏的扩展内容。父组件可以在侧边栏中添加自定义的扩展内容。
+ isAnyExtendedSidebarExpanded = false, // 任何扩展侧边栏是否展开。如果设置为 true ，则侧边栏将显示扩展内容。
+ isAnySidebarDropdownOpen = false, // 任何侧边栏下拉菜单是否打开。如果设置为 true ，则侧边栏将显示下拉菜单。
+ disablePeekTrigger = false, // 禁用 “窥视” 触发。如果设置为 true ，则点击 “窥视” 按钮将不会触发 “窥视” 状态的切换。
}: ResizableSidebarProps) {
// states
- const [isResizing, setIsResizing] = useState(false);
- const [isHoveringTrigger, setIsHoveringTrigger] = useState(false);
+ const [isResizing, setIsResizing] = useState(false); //是否正在拖拽调整宽度
+ const [isHoveringTrigger, setIsHoveringTrigger] = useState(false); //鼠标是否在 Peek 触发区悬停
// refs
- const peekTimeoutRef = useRef
>();
- const initialWidthRef = useRef(0);
- const initialMouseXRef = useRef(0);
+ const peekTimeoutRef = useRef>(); //保存控制 Peek 自动收起的定时器句柄
+ const initialWidthRef = useRef(0); // 保存初始宽度，用于计算拖动 deltaX
+ const initialMouseXRef = useRef(0); // 保存初始鼠标 X 坐标，用于计算拖动 deltaX
// handlers
const setShowPeek = useCallback(
@@ -60,7 +65,7 @@ export function ResizableSidebar({
},
[togglePeek]
);
-
+ // 根据当前鼠标位置与初始位置的差值 deltaX，计算新的宽度
const handleResize = useCallback(
(e: MouseEvent) => {
if (!isResizing) return;
@@ -86,6 +91,7 @@ export function ResizableSidebar({
}, []);
const toggleCollapsed = useCallback(() => {
+ // 不给参数就直接取反
toggleCollapsedProp();
setShowPeek(false);
setIsHoveringTrigger(false);
@@ -94,8 +100,10 @@ export function ResizableSidebar({
}
}, [toggleCollapsedProp, setShowPeek]);
+ // 悬浮左侧栏
const handleTriggerEnter = useCallback(() => {
if (isCollapsed) {
+
setIsHoveringTrigger(true);
setShowPeek(true);
if (peekTimeoutRef.current) {
@@ -114,6 +122,7 @@ export function ResizableSidebar({
}, [isCollapsed, peekDuration, setShowPeek, isAnyExtendedSidebarExpanded]);
const handlePeekEnter = useCallback(() => {
+
if (isCollapsed && showPeek) {
if (peekTimeoutRef.current) {
clearTimeout(peekTimeoutRef.current);
@@ -122,6 +131,7 @@ export function ResizableSidebar({
}, [isCollapsed, showPeek]);
const handlePeekLeave = useCallback(() => {
+
if (isCollapsed && !isAnyExtendedSidebarExpanded && !isAnySidebarDropdownOpen) {
peekTimeoutRef.current = setTimeout(() => {
setShowPeek(false);
diff --git a/apps/web/core/components/workspace/sidebar/project-navigation.tsx b/apps/web/core/components/workspace/sidebar/project-navigation.tsx
index 59313763429..9fff20023f7 100644
--- a/apps/web/core/components/workspace/sidebar/project-navigation.tsx
+++ b/apps/web/core/components/workspace/sidebar/project-navigation.tsx
@@ -4,7 +4,7 @@ import React, { FC, useCallback, useMemo } from "react";
import { observer } from "mobx-react";
import Link from "next/link";
import { useParams, usePathname } from "next/navigation";
-import { FileText, Layers } from "lucide-react";
+import { FileText, Rss, Layers } from "lucide-react";
import { EUserPermissionsLevel, EUserPermissions } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { DiceIcon, ContrastIcon, LayersIcon, Intake } from "@plane/propel/icons";
@@ -65,6 +65,16 @@ export const ProjectNavigation: FC = observer((props) => {
const baseNavigation = useCallback(
(workspaceSlug: string, projectId: string): TNavigationItem[] => [
+ {
+ i18n_key: "sidebar.overview",
+ key: "overview",
+ name: "Overview",
+ href: `/${workspaceSlug}/projects/${projectId}/overview`,
+ icon: Rss,
+ access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+ shouldRender: true,
+ sortOrder: 0,
+ },
{
i18n_key: "sidebar.work_items",
key: "work_items",
diff --git a/apps/web/core/components/workspace/sidebar/projects-list.tsx b/apps/web/core/components/workspace/sidebar/projects-list.tsx
index 8e5d4df281c..407e43bd08c 100644
--- a/apps/web/core/components/workspace/sidebar/projects-list.tsx
+++ b/apps/web/core/components/workspace/sidebar/projects-list.tsx
@@ -165,6 +165,7 @@ export const SidebarProjectsList: FC = observer(() => {
{t("projects")}
+ {/* 创建项目的 + */}
{isAuthorizedUser && (