feat: 实现产品/项目/版本三大模块完整功能
- 产品列表：拖拽排序持久化、编辑弹窗、删除校验（活跃版本需迁移） - 项目列表：新建项目表单（产品选择+重名校验）、产品筛选、版本归属修复 - 版本列表：新建版本表单（迭代类型自动生成版本号）、状态/项目筛选、倒序排列 - 项目详情页：概览统计、人员墙（参与次数）、版本时间线（阶段流水线+进度条） - 全局优化：筛选栏统一为header下方固定行、按钮颜色改为主题蓝、API探测300ms、store缓存 - 数据持久化到localStorage，支持离线开发 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Script Generator
@@ -17,6 +17,11 @@ export class ProductController {
|
||||
return this.productService.findAll();
|
||||
}
|
||||
|
||||
@Get('overview')
|
||||
findAllWithChildren() {
|
||||
return this.productService.findAllWithChildren();
|
||||
}
|
||||
|
||||
@Get(':id')
|
||||
findOne(@Param('id') id: string) {
|
||||
return this.productService.findOne(id);
|
||||
|
||||
@@ -20,6 +20,23 @@ export class ProductService {
|
||||
});
|
||||
}
|
||||
|
||||
findAllWithChildren() {
|
||||
return this.prisma.product.findMany({
|
||||
orderBy: { createdAt: 'desc' },
|
||||
include: {
|
||||
projects: {
|
||||
orderBy: { createdAt: 'desc' },
|
||||
select: { id: true, name: true, description: true, createdAt: true },
|
||||
},
|
||||
versions: {
|
||||
orderBy: { createdAt: 'desc' },
|
||||
select: { id: true, name: true, releaseDate: true, createdAt: true },
|
||||
},
|
||||
_count: { select: { requirements: true, projects: true, versions: true } },
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async findOne(id: string) {
|
||||
const product = await this.prisma.product.findUnique({
|
||||
where: { id },
|
||||
|
||||
@@ -21,10 +21,10 @@
|
||||
--line-soft: #f4f4f5;
|
||||
|
||||
/* Brand — calm blue */
|
||||
--accent: #3b82f6;
|
||||
--accent-hover: #2563eb;
|
||||
--accent: #2563eb;
|
||||
--accent-hover: #1d4ed8;
|
||||
--accent-soft: #eff6ff;
|
||||
--accent-ring: rgba(59, 130, 246, 0.15);
|
||||
--accent-ring: rgba(37, 99, 235, 0.18);
|
||||
|
||||
/* Shadow */
|
||||
--shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.04);
|
||||
|
||||
@@ -1,94 +1,530 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Plus, Search } from 'lucide-react';
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import {
|
||||
Plus,
|
||||
Search,
|
||||
GripVertical,
|
||||
ChevronRight,
|
||||
Pencil,
|
||||
Trash2,
|
||||
X,
|
||||
AlertTriangle,
|
||||
Package,
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
DndContext,
|
||||
closestCenter,
|
||||
KeyboardSensor,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
DragEndEvent,
|
||||
} from '@dnd-kit/core';
|
||||
import {
|
||||
SortableContext,
|
||||
sortableKeyboardCoordinates,
|
||||
verticalListSortingStrategy,
|
||||
useSortable,
|
||||
} from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
import { useProductStore } from '@/stores/useProductStore';
|
||||
import { ProductCard } from '@/components/product/ProductCard';
|
||||
import { ProductForm } from '@/components/product/ProductForm';
|
||||
import { VersionChip } from '@/components/version/VersionChip';
|
||||
import type { VersionStatus } from '@/lib/version-status';
|
||||
|
||||
export default function ProductsPage() {
|
||||
const router = useRouter();
|
||||
const { products, loading, fetchProducts, createProduct } = useProductStore();
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [search, setSearch] = useState('');
|
||||
type ProductOverview = {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
projects: { id: string; name: string; description: string; createdAt: string }[];
|
||||
versions: {
|
||||
id: string;
|
||||
name: string;
|
||||
status?: string;
|
||||
releaseDate: string | null;
|
||||
createdAt: string;
|
||||
}[];
|
||||
_count?: { requirements: number; projects: number; versions?: number };
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchProducts();
|
||||
}, [fetchProducts]);
|
||||
/* ─── Sortable Product Row ─── */
|
||||
function SortableProductRow({
|
||||
product,
|
||||
expanded,
|
||||
onToggle,
|
||||
onEdit,
|
||||
onDelete,
|
||||
}: {
|
||||
product: ProductOverview;
|
||||
expanded: boolean;
|
||||
onToggle: () => void;
|
||||
onEdit: () => void;
|
||||
onDelete: () => void;
|
||||
}) {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
|
||||
useSortable({ id: product.id });
|
||||
|
||||
const filtered = products.filter((p) =>
|
||||
p.name.toLowerCase().includes(search.toLowerCase()),
|
||||
);
|
||||
|
||||
const handleCreate = async (data: { name: string; description: string }) => {
|
||||
await createProduct(data);
|
||||
setShowForm(false);
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
opacity: isDragging ? 0.5 : 1,
|
||||
};
|
||||
|
||||
const activeVersions = product.versions.filter(
|
||||
(v) => v.status === 'developing' || v.status === 'planned'
|
||||
);
|
||||
const releasedCount = product.versions.filter((v) => v.status === 'released').length;
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
<header className="flex h-14 shrink-0 items-center justify-between border-b border-[var(--line)] bg-[var(--bg-card)] px-6">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<h1 className="text-[15px] font-semibold tracking-tight text-[var(--ink)]">产品</h1>
|
||||
<span className="rounded-md bg-[var(--bg-subtle)] px-1.5 py-0.5 text-[11px] font-medium tabular-nums text-[var(--ink-soft)]">
|
||||
{products.length}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className="border-b border-[var(--line-soft)] last:border-b-0"
|
||||
>
|
||||
<div className="flex items-center gap-2 px-4 py-3 group">
|
||||
<button
|
||||
onClick={() => setShowForm(true)}
|
||||
className="flex h-8 items-center gap-1.5 rounded-lg bg-[var(--accent)] px-3 text-[13px] font-medium text-white shadow-[var(--shadow-sm)] transition-colors hover:bg-[var(--accent-hover)]"
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
className="cursor-grab active:cursor-grabbing p-1 rounded hover:bg-[var(--bg-hover)] text-[var(--ink-muted)] opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
aria-label="拖拽排序"
|
||||
>
|
||||
<Plus className="h-3.5 w-3.5" strokeWidth={2.5} />
|
||||
新建产品
|
||||
<GripVertical className="w-4 h-4" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="mx-auto max-w-[1400px] p-6">
|
||||
<div className="mb-5 flex items-center gap-2">
|
||||
<div className="relative max-w-xs flex-1">
|
||||
<Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-[var(--ink-muted)]" strokeWidth={2} />
|
||||
<input
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder="搜索产品名称"
|
||||
className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] pl-8 pr-3 text-[13px] text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showForm && (
|
||||
<div className="mb-5 rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] p-6 shadow-[var(--shadow-sm)]">
|
||||
<h2 className="mb-4 text-[14px] font-semibold text-[var(--ink)]">新建产品</h2>
|
||||
<ProductForm onSubmit={handleCreate} onCancel={() => setShowForm(false)} />
|
||||
</div>
|
||||
<div
|
||||
className="flex-1 flex items-center gap-2 cursor-pointer min-w-0"
|
||||
onClick={onToggle}
|
||||
>
|
||||
<ChevronRight
|
||||
className={`w-4 h-4 text-[var(--ink-muted)] transition-transform duration-150 ${
|
||||
expanded ? 'rotate-90' : ''
|
||||
}`}
|
||||
/>
|
||||
<span className="text-[13px] font-medium truncate">{product.name}</span>
|
||||
{product.description && (
|
||||
<span className="text-[12px] text-[var(--ink-muted)] truncate hidden sm:inline">
|
||||
{product.description}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="py-20 text-center text-[13px] text-[var(--ink-muted)]">加载中…</div>
|
||||
) : filtered.length === 0 ? (
|
||||
<div className="rounded-2xl border border-dashed border-[var(--line)] bg-[var(--bg-card)] py-20 text-center">
|
||||
<p className="text-[14px] font-medium text-[var(--ink-soft)]">
|
||||
{search ? '没有找到匹配的产品' : '尚未创建任何产品'}
|
||||
</p>
|
||||
<p className="mt-1.5 text-[12.5px] text-[var(--ink-muted)]">
|
||||
{search ? '尝试其他关键字' : '点击右上角"新建产品"开始'}
|
||||
</p>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={onEdit}
|
||||
className="p-1.5 rounded-md hover:bg-[var(--bg-hover)] text-[var(--ink-muted)] hover:text-[var(--ink)] opacity-0 group-hover:opacity-100 transition-all"
|
||||
aria-label="编辑"
|
||||
>
|
||||
<Pencil className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={onDelete}
|
||||
className="p-1.5 rounded-md hover:bg-red-50 text-[var(--ink-muted)] hover:text-red-600 opacity-0 group-hover:opacity-100 transition-all"
|
||||
aria-label="删除"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 text-[11px] text-[var(--ink-muted)] ml-2 pl-2 border-l border-[var(--line-soft)]">
|
||||
<span className="hidden md:inline">{product._count?.projects ?? product.projects.length} 项目</span>
|
||||
<span className="hidden md:inline">{product._count?.versions ?? product.versions.length} 版本</span>
|
||||
{product._count?.requirements != null && (
|
||||
<span className="hidden md:inline">{product._count.requirements} 需求</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{expanded && (
|
||||
<div className="bg-[var(--bg-subtle)] border-t border-[var(--line-soft)]">
|
||||
{product.projects.length === 0 ? (
|
||||
<div className="px-12 py-6 text-[12px] text-[var(--ink-muted)] text-center">
|
||||
暂无项目
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{filtered.map((product) => (
|
||||
<ProductCard
|
||||
key={product.id}
|
||||
product={product as any}
|
||||
onClick={(id) => router.push(`/products/${id}`)}
|
||||
/>
|
||||
))}
|
||||
<div className="px-12 py-2">
|
||||
{product.projects.map((proj) => {
|
||||
const projVersions = product.versions.filter((v) =>
|
||||
v.name.toLowerCase().startsWith(proj.name.toLowerCase())
|
||||
);
|
||||
const projActive = projVersions.filter(
|
||||
(v) => v.status === 'developing' || v.status === 'planned'
|
||||
);
|
||||
const projReleased = projVersions.filter((v) => v.status === 'released').length;
|
||||
return (
|
||||
<div
|
||||
key={proj.id}
|
||||
className="flex items-center gap-3 py-2 border-b border-[var(--line-soft)] last:border-b-0"
|
||||
>
|
||||
<span className="text-[12px] font-medium text-[var(--ink-soft)] min-w-0 flex-shrink-0">
|
||||
{proj.name}
|
||||
</span>
|
||||
{proj.description && (
|
||||
<span className="text-[11px] text-[var(--ink-muted)] truncate hidden lg:inline">
|
||||
{proj.description}
|
||||
</span>
|
||||
)}
|
||||
<div className="flex-1 flex items-center gap-1.5 flex-wrap justify-end">
|
||||
{projActive.map((v) => (
|
||||
<VersionChip
|
||||
key={v.id}
|
||||
name={v.name}
|
||||
status={(v.status as VersionStatus) ?? 'developing'}
|
||||
/>
|
||||
))}
|
||||
{projReleased > 0 && (
|
||||
<span className="text-[11px] text-[var(--ink-muted)] px-1.5">
|
||||
已发布 {projReleased}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── Edit Product Modal ─── */
|
||||
function EditProductModal({
|
||||
product,
|
||||
onClose,
|
||||
onSubmit,
|
||||
}: {
|
||||
product: ProductOverview;
|
||||
onClose: () => void;
|
||||
onSubmit: (data: { name: string; description: string }) => void | Promise<void>;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="w-full max-w-md rounded-2xl bg-[var(--bg-card)] border border-[var(--line)] shadow-[var(--shadow-md)] overflow-hidden"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-center justify-between px-5 py-3.5 border-b border-[var(--line)]">
|
||||
<h3 className="text-[14px] font-semibold">编辑产品</h3>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1 rounded-md hover:bg-[var(--bg-hover)] text-[var(--ink-muted)] hover:text-[var(--ink)]"
|
||||
aria-label="关闭"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
<ProductForm
|
||||
initialData={{ name: product.name, description: product.description }}
|
||||
onSubmit={onSubmit}
|
||||
onCancel={onClose}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── Migrate Dialog ─── */
|
||||
function MigrateDialog({
|
||||
source,
|
||||
others,
|
||||
onClose,
|
||||
onConfirm,
|
||||
}: {
|
||||
source: ProductOverview;
|
||||
others: ProductOverview[];
|
||||
onClose: () => void;
|
||||
onConfirm: (targetId: string) => void | Promise<void>;
|
||||
}) {
|
||||
const [targetId, setTargetId] = useState('');
|
||||
const activeVersions = source.versions.filter(
|
||||
(v) => v.status === 'developing' || v.status === 'planned'
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="w-full max-w-md rounded-2xl bg-[var(--bg-card)] border border-[var(--line)] shadow-[var(--shadow-md)] overflow-hidden"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-center justify-between px-5 py-3.5 border-b border-[var(--line)]">
|
||||
<h3 className="text-[14px] font-semibold">删除产品</h3>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1 rounded-md hover:bg-[var(--bg-hover)] text-[var(--ink-muted)] hover:text-[var(--ink)]"
|
||||
aria-label="关闭"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-5 space-y-4">
|
||||
<div className="flex items-start gap-3 p-3 rounded-xl bg-amber-50 border border-amber-200">
|
||||
<AlertTriangle className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
|
||||
<div className="text-[13px] text-amber-800">
|
||||
<p className="font-medium mb-1">
|
||||
该产品下还有 {activeVersions.length} 个未发布版本
|
||||
</p>
|
||||
<ul className="space-y-0.5 text-[12px]">
|
||||
{activeVersions.map((v) => (
|
||||
<li key={v.id}>· {v.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-[12px] text-[var(--ink-soft)] mb-1.5 font-medium">
|
||||
迁移至
|
||||
</label>
|
||||
<select
|
||||
value={targetId}
|
||||
onChange={(e) => setTargetId(e.target.value)}
|
||||
className="w-full h-9 px-3 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] text-[13px] focus:outline-none focus:border-[var(--accent)] focus:ring-2 focus:ring-[var(--accent-ring)]"
|
||||
>
|
||||
<option value="">选择目标产品...</option>
|
||||
{others.map((p) => (
|
||||
<option key={p.id} value={p.id}>{p.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end gap-2 pt-1">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="h-8 px-3 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] hover:bg-[var(--bg-hover)] text-[13px] text-[var(--ink-soft)] transition-colors"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
onClick={() => targetId && onConfirm(targetId)}
|
||||
disabled={!targetId || others.length === 0}
|
||||
className="h-8 px-3 rounded-lg bg-red-600 hover:bg-red-700 disabled:bg-zinc-300 disabled:cursor-not-allowed text-white text-[13px] font-medium transition-colors"
|
||||
>
|
||||
迁移并删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── Main Page ─── */
|
||||
export default function ProductsPage() {
|
||||
const {
|
||||
overview,
|
||||
loading,
|
||||
fetchOverview,
|
||||
createProduct,
|
||||
updateProduct,
|
||||
deleteProduct,
|
||||
reorderProducts,
|
||||
migrateAndDeleteProduct,
|
||||
} = useProductStore();
|
||||
|
||||
const [search, setSearch] = useState('');
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
const [expanded, setExpanded] = useState<Set<string>>(new Set());
|
||||
const [editing, setEditing] = useState<ProductOverview | null>(null);
|
||||
const [migrateTarget, setMigrateTarget] = useState<ProductOverview | null>(null);
|
||||
const [hasInitialized, setHasInitialized] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchOverview();
|
||||
}, [fetchOverview]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!hasInitialized && overview.length > 0) {
|
||||
setExpanded(new Set([overview[0].id]));
|
||||
setHasInitialized(true);
|
||||
}
|
||||
}, [overview, hasInitialized]);
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
|
||||
useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
|
||||
);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
if (!search.trim()) return overview;
|
||||
const q = search.toLowerCase();
|
||||
return overview.filter(
|
||||
(p) =>
|
||||
p.name.toLowerCase().includes(q) ||
|
||||
(p.description ?? '').toLowerCase().includes(q)
|
||||
);
|
||||
}, [overview, search]);
|
||||
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
if (!over || active.id === over.id) return;
|
||||
const oldIndex = overview.findIndex((p) => p.id === active.id);
|
||||
const newIndex = overview.findIndex((p) => p.id === over.id);
|
||||
if (oldIndex < 0 || newIndex < 0) return;
|
||||
const next = [...overview];
|
||||
const [moved] = next.splice(oldIndex, 1);
|
||||
next.splice(newIndex, 0, moved);
|
||||
reorderProducts(next.map((p) => p.id));
|
||||
};
|
||||
|
||||
const toggleExpand = (id: string) => {
|
||||
setExpanded((prev) => {
|
||||
const n = new Set(prev);
|
||||
if (n.has(id)) n.delete(id);
|
||||
else n.add(id);
|
||||
return n;
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = (product: ProductOverview) => {
|
||||
const active = product.versions.filter(
|
||||
(v) => v.status === 'developing' || v.status === 'planned'
|
||||
);
|
||||
if (active.length === 0) {
|
||||
if (confirm(`确认删除产品「${product.name}」？此操作不可撤销。`)) {
|
||||
deleteProduct(product.id);
|
||||
}
|
||||
} else {
|
||||
setMigrateTarget(product);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col bg-[var(--bg)] text-[var(--ink)]">
|
||||
{/* Header */}
|
||||
<div className="h-14 shrink-0 flex items-center justify-between px-5 border-b border-[var(--line)] bg-[var(--bg-card)]">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<h1 className="text-[15px] font-semibold tracking-tight">产品</h1>
|
||||
<span className="inline-flex items-center justify-center min-w-[22px] h-[22px] px-1.5 rounded-full bg-[var(--bg-subtle)] text-[var(--ink-soft)] text-[11px] font-medium">
|
||||
{overview.length}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowCreate((v) => !v)}
|
||||
className="inline-flex items-center gap-1.5 h-8 px-3 rounded-lg bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white text-[13px] font-medium shadow-[var(--shadow-sm)] transition-colors"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
新建产品
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex shrink-0 items-center gap-3 border-b border-[var(--line)] bg-[var(--bg-card)] px-5 py-3">
|
||||
<div className="relative flex-1 max-w-sm">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--ink-muted)]" />
|
||||
<input
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder="搜索产品..."
|
||||
className="w-full h-8 pl-9 pr-3 rounded-lg border border-[var(--line)] bg-[var(--bg)] text-[13px] placeholder:text-[var(--ink-muted)] focus:outline-none focus:border-[var(--accent)] focus:ring-2 focus:ring-[var(--accent-ring)] transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div className="ml-auto flex items-center gap-3 text-[12px] text-[var(--ink-muted)]">
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[#2563eb]" />开发中
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-orange-500" />规划中
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-zinc-400" />已发布
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto bg-[var(--bg)] px-5 py-4">
|
||||
|
||||
{/* Inline Create Form */}
|
||||
{showCreate && (
|
||||
<div className="mb-3 rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] p-4 shadow-[var(--shadow-sm)]">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-[13px] font-semibold">新建产品</h3>
|
||||
<button
|
||||
onClick={() => setShowCreate(false)}
|
||||
className="p-1 rounded-md hover:bg-[var(--bg-hover)] text-[var(--ink-muted)] hover:text-[var(--ink)]"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<ProductForm
|
||||
onSubmit={async (data) => {
|
||||
await createProduct(data);
|
||||
setShowCreate(false);
|
||||
}}
|
||||
onCancel={() => setShowCreate(false)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Product List */}
|
||||
<div className="rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] overflow-hidden shadow-[var(--shadow-sm)]">
|
||||
{loading && overview.length === 0 ? (
|
||||
<div className="py-16 text-center text-[13px] text-[var(--ink-muted)]">加载中...</div>
|
||||
) : filtered.length === 0 ? (
|
||||
<div className="py-16 text-center text-[13px] text-[var(--ink-muted)]">
|
||||
<Package className="w-10 h-10 mx-auto mb-2 opacity-40" />
|
||||
暂无产品
|
||||
</div>
|
||||
) : (
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<SortableContext
|
||||
items={filtered.map((p) => p.id)}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
{filtered.map((product) => (
|
||||
<SortableProductRow
|
||||
key={product.id}
|
||||
product={product}
|
||||
expanded={expanded.has(product.id)}
|
||||
onToggle={() => toggleExpand(product.id)}
|
||||
onEdit={() => setEditing(product)}
|
||||
onDelete={() => handleDelete(product)}
|
||||
/>
|
||||
))}
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Edit Modal */}
|
||||
{editing && (
|
||||
<EditProductModal
|
||||
product={editing}
|
||||
onClose={() => setEditing(null)}
|
||||
onSubmit={async (data) => {
|
||||
await updateProduct(editing.id, data);
|
||||
setEditing(null);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Migrate Dialog */}
|
||||
{migrateTarget && (
|
||||
<MigrateDialog
|
||||
source={migrateTarget}
|
||||
others={overview.filter((p) => p.id !== migrateTarget.id)}
|
||||
onClose={() => setMigrateTarget(null)}
|
||||
onConfirm={async (targetId) => {
|
||||
await migrateAndDeleteProduct(migrateTarget.id, targetId);
|
||||
setMigrateTarget(null);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
362
apps/web/app/projects/[id]/page.tsx
Normal file
362
apps/web/app/projects/[id]/page.tsx
Normal file
@@ -0,0 +1,362 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useMemo } from 'react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { ChevronLeft, Package, Calendar, Clock, Users, Tag } from 'lucide-react';
|
||||
import { useProductStore } from '@/stores/useProductStore';
|
||||
import { getProjectDetail } from '@/lib/derive';
|
||||
import { Stage, Role, STAGES, ROLES, STAGE_INDEX, ROLE_LABEL } from '@/lib/stage';
|
||||
import { VersionStatus, VERSION_STATUS_LABEL, VERSION_STATUS_BG } from '@/lib/version-status';
|
||||
|
||||
interface VersionWithContext {
|
||||
id: string; name: string; status: VersionStatus;
|
||||
releaseDate: string | null; createdAt: string;
|
||||
productId: string; productName: string; projectName: string;
|
||||
currentStage?: Stage;
|
||||
startDate?: string | null;
|
||||
expectedReleaseDate?: string | null;
|
||||
members?: { role: Role; name: string }[];
|
||||
progress?: { role: Role; percent: number; daysSpent: number }[];
|
||||
}
|
||||
|
||||
/* ─── StatCard ─── */
|
||||
function StatCard({ value, label }: { value: number | string; label: string }) {
|
||||
return (
|
||||
<div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-4">
|
||||
<div className="text-2xl font-bold text-[var(--ink)]">{value}</div>
|
||||
<div className="text-xs text-[var(--ink-muted)] mt-1">{label}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── ProgressBar ─── */
|
||||
function ProgressBar({ role, percent, daysSpent }: { role: Role; percent: number; daysSpent: number }) {
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-12 text-xs text-[var(--ink-soft)] shrink-0">{ROLE_LABEL[role]}</span>
|
||||
<div className="flex-1 h-2 rounded-full bg-zinc-100 overflow-hidden">
|
||||
<div
|
||||
className="h-full rounded-full bg-blue-500 transition-all"
|
||||
style={{ width: `${percent}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs text-[var(--ink-muted)] w-8 text-right">{percent}%</span>
|
||||
<span className="text-xs text-[var(--ink-muted)] w-10 text-right">
|
||||
{daysSpent === 0 ? '-' : `${daysSpent}天`}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── StagePipeline ─── */
|
||||
function StagePipeline({ currentStage }: { currentStage?: Stage }) {
|
||||
const currentIdx = currentStage !== undefined ? STAGE_INDEX[currentStage] : -1;
|
||||
|
||||
const stageLabel: Record<Stage, string> = {
|
||||
requirement: '需求',
|
||||
product_design: '产品设计',
|
||||
ui_design: 'UI设计',
|
||||
dev: '开发',
|
||||
integration: '联调',
|
||||
testing: '测试',
|
||||
released: '已发布',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center w-full py-2">
|
||||
{STAGES.map((stage, idx) => {
|
||||
const isCompleted = idx < currentIdx;
|
||||
const isCurrent = idx === currentIdx;
|
||||
const isFuture = idx > currentIdx;
|
||||
|
||||
return (
|
||||
<div key={stage.key} className="flex items-center flex-1 last:flex-none">
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
{isCurrent ? (
|
||||
<div className="relative flex items-center justify-center">
|
||||
<div className="absolute h-4 w-4 rounded-full bg-blue-500/30 animate-pulse" />
|
||||
<div className="relative h-3 w-3 rounded-full bg-blue-500 ring-2 ring-blue-200" />
|
||||
</div>
|
||||
) : isCompleted ? (
|
||||
<div className="h-2.5 w-2.5 rounded-full bg-blue-500" />
|
||||
) : (
|
||||
<div className="h-2.5 w-2.5 rounded-full bg-zinc-200" />
|
||||
)}
|
||||
<span
|
||||
className={`text-[10px] whitespace-nowrap ${
|
||||
isCurrent
|
||||
? 'text-blue-600 font-medium'
|
||||
: isCompleted
|
||||
? 'text-[var(--ink-soft)]'
|
||||
: 'text-[var(--ink-muted)]'
|
||||
}`}
|
||||
>
|
||||
{stage.label}
|
||||
</span>
|
||||
</div>
|
||||
{idx < STAGES.length - 1 && (
|
||||
<div
|
||||
className={`h-0.5 flex-1 mx-1 mb-4 ${
|
||||
isCompleted ? 'bg-blue-500' : 'bg-zinc-200'
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── VersionCard ─── */
|
||||
function VersionCard({ version }: { version: VersionWithContext }) {
|
||||
const statusBg = VERSION_STATUS_BG[version.status];
|
||||
const statusLabel = VERSION_STATUS_LABEL[version.status];
|
||||
|
||||
// Mode: planned
|
||||
if (version.status === 'planned') {
|
||||
return (
|
||||
<div className="rounded-xl border border-dashed border-[var(--line)] p-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-semibold text-[var(--ink)]">{version.name}</span>
|
||||
<span className={`text-xs px-2 py-0.5 rounded-full ${statusBg}`}>
|
||||
{statusLabel}
|
||||
</span>
|
||||
<span className="text-xs text-[var(--ink-muted)] ml-2">暂无详情</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const totalDays = (version.progress ?? []).reduce((sum, p) => sum + p.daysSpent, 0);
|
||||
|
||||
// Mode: released
|
||||
if (version.status === 'released') {
|
||||
return (
|
||||
<div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="font-semibold text-[var(--ink)]">{version.name}</span>
|
||||
<span className={`text-xs px-2 py-0.5 rounded-full ${statusBg}`}>
|
||||
{statusLabel}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs text-[var(--ink-muted)] mb-2 flex items-center gap-1">
|
||||
<Calendar className="h-3 w-3" />
|
||||
<span>
|
||||
{version.startDate ?? '-'} → {version.releaseDate ?? '-'} 发布 总 {totalDays} 天
|
||||
</span>
|
||||
</div>
|
||||
{version.members && version.members.length > 0 && (
|
||||
<div className="text-xs text-[var(--ink-soft)]">
|
||||
{version.members
|
||||
.map((m) => `${ROLE_LABEL[m.role]} ${m.name}`)
|
||||
.join(' · ')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Mode: developing
|
||||
return (
|
||||
<div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-5 shadow-sm">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="font-semibold text-[var(--ink)]">{version.name}</span>
|
||||
<span className={`text-xs px-2 py-0.5 rounded-full ${statusBg}`}>
|
||||
{statusLabel}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<StagePipeline currentStage={version.currentStage} />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-xs text-[var(--ink-muted)] mb-3 pb-3 border-b border-[var(--line-soft)]">
|
||||
<div className="flex items-center gap-1">
|
||||
<Calendar className="h-3 w-3" />
|
||||
<span>
|
||||
{version.startDate ?? '-'} 开始 → 预计 {version.expectedReleaseDate ?? '-'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Clock className="h-3 w-3" />
|
||||
<span>已耗时 {totalDays} 天</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{version.members && version.members.length > 0 && (
|
||||
<div className="text-xs text-[var(--ink-soft)] mb-4">
|
||||
{version.members
|
||||
.map((m) => `${ROLE_LABEL[m.role]} ${m.name}`)
|
||||
.join(' · ')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{version.progress && version.progress.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
{version.progress.map((p) => (
|
||||
<ProgressBar
|
||||
key={p.role}
|
||||
role={p.role}
|
||||
percent={p.percent}
|
||||
daysSpent={p.daysSpent}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── Main Page Component ─── */
|
||||
export default function ProjectDetailPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const projectId = params.id as string;
|
||||
const { overview, fetchOverview } = useProductStore();
|
||||
|
||||
useEffect(() => {
|
||||
fetchOverview();
|
||||
}, [fetchOverview]);
|
||||
|
||||
const project = useMemo(
|
||||
() => getProjectDetail(overview, projectId),
|
||||
[overview, projectId]
|
||||
);
|
||||
|
||||
const sortedVersions = useMemo(() => {
|
||||
if (!project) return [];
|
||||
return [...project.versions].sort(
|
||||
(a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
|
||||
);
|
||||
}, [project]);
|
||||
|
||||
const stats = useMemo(() => {
|
||||
if (!project) return { total: 0, developing: 0, released: 0, totalDays: 0 };
|
||||
const total = project.versions.length;
|
||||
const developing = project.versions.filter((v) => v.status === 'developing').length;
|
||||
const released = project.versions.filter((v) => v.status === 'released').length;
|
||||
const totalDays = project.versions.reduce((sum, v) => {
|
||||
return sum + (v.progress ?? []).reduce((s, p) => s + p.daysSpent, 0);
|
||||
}, 0);
|
||||
return { total, developing, released, totalDays };
|
||||
}, [project]);
|
||||
|
||||
// Team members aggregation
|
||||
const teamByRole = useMemo(() => {
|
||||
if (!project) return {};
|
||||
const map: Record<Role, Record<string, number>> = {} as any;
|
||||
ROLES.forEach((r) => (map[r.key] = {}));
|
||||
project.versions.forEach((v) => {
|
||||
(v.members ?? []).forEach((m) => {
|
||||
if (!map[m.role]) map[m.role] = {};
|
||||
map[m.role][m.name] = (map[m.role][m.name] || 0) + 1;
|
||||
});
|
||||
});
|
||||
return map;
|
||||
}, [project]);
|
||||
|
||||
if (!project) {
|
||||
return (
|
||||
<div className="flex h-full flex-col items-center justify-center gap-3">
|
||||
<p className="text-sm text-[var(--ink-muted)]">项目不存在</p>
|
||||
<button
|
||||
onClick={() => router.push('/projects')}
|
||||
className="text-xs text-[var(--accent)] hover:underline"
|
||||
>
|
||||
返回项目列表
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* Header */}
|
||||
<header className="flex h-14 shrink-0 items-center justify-between border-b border-[var(--line)] bg-[var(--bg-card)] px-5">
|
||||
<div className="flex items-center">
|
||||
<button
|
||||
onClick={() => router.push('/projects')}
|
||||
className="flex items-center gap-1 rounded-md px-1.5 py-1 text-[12.5px] text-[var(--ink-muted)] hover:bg-[var(--bg-subtle)] hover:text-[var(--ink)]"
|
||||
>
|
||||
<ChevronLeft className="h-3.5 w-3.5" strokeWidth={2} />
|
||||
项目
|
||||
</button>
|
||||
<span className="ml-2 text-[var(--ink-muted)]">/</span>
|
||||
<span className="ml-2 text-[15px] font-semibold text-[var(--ink)]">
|
||||
{project.name}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 rounded-full bg-[var(--bg-subtle)] px-2.5 py-1 text-xs text-[var(--ink-soft)]">
|
||||
<Package className="h-3 w-3" />
|
||||
<span>{project.productName}</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-5 bg-[var(--bg)]">
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
{/* Overview Stats Row */}
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
<StatCard value={stats.total} label="总版本数" />
|
||||
<StatCard value={stats.developing} label="进行中" />
|
||||
<StatCard value={stats.released} label="已发布" />
|
||||
<StatCard value={stats.totalDays} label="总耗时(天)" />
|
||||
</div>
|
||||
|
||||
{/* Team Members Section */}
|
||||
<section>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Users className="h-4 w-4 text-[var(--ink-soft)]" />
|
||||
<h2 className="text-sm font-semibold text-[var(--ink)]">项目人员</h2>
|
||||
</div>
|
||||
<div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-5 space-y-3">
|
||||
{ROLES.map((role) => {
|
||||
const peopleMap = (teamByRole as any)[role.key] || {};
|
||||
const people = Object.entries(peopleMap).sort((a, b) => (b[1] as number) - (a[1] as number));
|
||||
return (
|
||||
<div key={role.key} className="flex items-start gap-3">
|
||||
<span className="w-12 text-xs text-[var(--ink-soft)] shrink-0 pt-1">
|
||||
{role.label}
|
||||
</span>
|
||||
<div className="flex flex-wrap gap-1.5 flex-1">
|
||||
{people.length === 0 ? (
|
||||
<span className="text-xs text-[var(--ink-muted)]">-</span>
|
||||
) : (
|
||||
people.map(([name, count]) => (
|
||||
<span
|
||||
key={name}
|
||||
className="rounded-full bg-[var(--bg-subtle)] px-2 py-0.5 text-xs text-[var(--ink-soft)]"
|
||||
>
|
||||
{name}({count as number}次)
|
||||
</span>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Version Timeline Section */}
|
||||
<section>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Tag className="h-4 w-4 text-[var(--ink-soft)]" />
|
||||
<h2 className="text-sm font-semibold text-[var(--ink)]">版本记录</h2>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{sortedVersions.length === 0 ? (
|
||||
<div className="rounded-xl border border-dashed border-[var(--line)] p-6 text-center text-xs text-[var(--ink-muted)]">
|
||||
暂无版本
|
||||
</div>
|
||||
) : (
|
||||
sortedVersions.map((v) => <VersionCard key={v.id} version={v} />)
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
386
apps/web/app/projects/page.tsx
Normal file
386
apps/web/app/projects/page.tsx
Normal file
@@ -0,0 +1,386 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Search, FolderKanban, Package, ChevronDown, Plus, X } from 'lucide-react';
|
||||
import { useProductStore } from '@/stores/useProductStore';
|
||||
import { flattenProjects, ProjectWithContext } from '@/lib/derive';
|
||||
import { VersionChip } from '@/components/version/VersionChip';
|
||||
import { VersionStatus } from '@/lib/version-status';
|
||||
|
||||
export default function ProjectsPage() {
|
||||
const router = useRouter();
|
||||
const { overview, fetchOverview, createProject } = useProductStore();
|
||||
const [search, setSearch] = useState('');
|
||||
const [productFilter, setProductFilter] = useState<string>('all');
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchOverview();
|
||||
}, [fetchOverview]);
|
||||
|
||||
const allProjects = useMemo(() => flattenProjects(overview), [overview]);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
return allProjects.filter((p) => {
|
||||
if (productFilter !== 'all' && p.productId !== productFilter) return false;
|
||||
if (search && !p.name.toLowerCase().includes(search.toLowerCase())) return false;
|
||||
return true;
|
||||
});
|
||||
}, [allProjects, search, productFilter]);
|
||||
|
||||
const productOptions = useMemo(
|
||||
() => overview.map((p) => ({ id: p.id, name: p.name })),
|
||||
[overview]
|
||||
);
|
||||
|
||||
const activeProductName =
|
||||
productFilter === 'all'
|
||||
? '全部产品'
|
||||
: productOptions.find((p) => p.id === productFilter)?.name || '全部产品';
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* Header */}
|
||||
<header className="flex h-14 shrink-0 items-center justify-between border-b border-[var(--line)] bg-[var(--bg-card)] px-5">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<h1 className="text-[15px] font-semibold tracking-tight text-[var(--ink)]">项目</h1>
|
||||
<span className="rounded-md bg-[var(--bg-subtle)] px-1.5 py-0.5 text-[11px] font-medium tabular-nums text-[var(--ink-soft)]">
|
||||
{allProjects.length}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowForm(true)}
|
||||
className="flex h-8 items-center gap-1.5 rounded-lg bg-[var(--accent)] px-3 text-[13px] font-medium text-white shadow-[var(--shadow-sm)] hover:bg-[var(--accent-hover)]"
|
||||
>
|
||||
<Plus className="h-3.5 w-3.5" strokeWidth={2.5} />
|
||||
新建项目
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex shrink-0 items-center gap-3 border-b border-[var(--line)] bg-[var(--bg-card)] px-5 py-3">
|
||||
<div className="relative flex-1 max-w-sm">
|
||||
<Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-[var(--ink-muted)]" />
|
||||
<input
|
||||
type="text"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder="搜索项目名称…"
|
||||
className="h-8 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] pl-8 pr-3 text-[13px] text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ProductDropdown
|
||||
value={productFilter}
|
||||
options={productOptions}
|
||||
onChange={setProductFilter}
|
||||
activeName={activeProductName}
|
||||
/>
|
||||
|
||||
<div className="ml-auto flex items-center gap-3 text-[11px] text-[var(--ink-muted)]">
|
||||
<LegendDot color="bg-blue-500" label="开发中" />
|
||||
<LegendDot color="bg-orange-500" label="规划中" />
|
||||
<LegendDot color="bg-gray-400" label="已发布" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* List */}
|
||||
<div className="flex-1 overflow-y-auto bg-[var(--bg)] p-5">
|
||||
{filtered.length === 0 ? (
|
||||
<EmptyState />
|
||||
) : (
|
||||
<div className="overflow-hidden rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] shadow-[var(--shadow-sm)]">
|
||||
{filtered.map((proj) => (
|
||||
<ProjectRow key={proj.id} proj={proj} onClick={() => router.push(`/projects/${proj.id}`)} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showForm && (
|
||||
<CreateProjectModal
|
||||
products={productOptions}
|
||||
overview={overview}
|
||||
onClose={() => setShowForm(false)}
|
||||
onSubmit={async (productId, name, description) => {
|
||||
await createProject(productId, { name, description });
|
||||
setShowForm(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── ProjectRow ─────────────────────────────────────────────────── */
|
||||
|
||||
function ProjectRow({
|
||||
proj,
|
||||
onClick,
|
||||
}: {
|
||||
proj: ProjectWithContext;
|
||||
onClick: () => void;
|
||||
}) {
|
||||
const activeVersions = proj.versions.filter((v) => v.status !== 'released');
|
||||
const releasedCount = proj.versions.filter((v) => v.status === 'released').length;
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className="w-full flex items-center gap-4 px-5 py-4 text-left transition-colors hover:bg-[var(--bg-hover)] border-b border-[var(--line-soft)] last:border-b-0"
|
||||
>
|
||||
<FolderKanban size={20} className="shrink-0 text-[var(--ink-muted)]" />
|
||||
<span className="font-medium text-[var(--ink)] min-w-[120px] shrink-0">
|
||||
{proj.name}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-[var(--bg-subtle)] text-xs text-[var(--ink-soft)] shrink-0">
|
||||
<Package size={12} />
|
||||
{proj.productName}
|
||||
</span>
|
||||
<span className="flex-1 text-sm text-[var(--ink-muted)] truncate">
|
||||
{proj.description}
|
||||
</span>
|
||||
<div className="flex items-center gap-1.5 shrink-0">
|
||||
{activeVersions.map((v) => (
|
||||
<VersionChip key={v.id} name={v.name} status={v.status} />
|
||||
))}
|
||||
{releasedCount > 0 && (
|
||||
<span className="text-xs text-[var(--ink-muted)] ml-1">
|
||||
+{releasedCount} 已发布
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── ProductDropdown ────────────────────────────────────────────── */
|
||||
|
||||
function ProductDropdown({
|
||||
value,
|
||||
options,
|
||||
onChange,
|
||||
activeName,
|
||||
}: {
|
||||
value: string;
|
||||
options: { id: string; name: string }[];
|
||||
onChange: (v: string) => void;
|
||||
activeName: string;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(!open)}
|
||||
className={`flex h-8 items-center gap-1.5 rounded-lg border px-3 text-[13px] font-medium transition-colors ${
|
||||
value !== 'all'
|
||||
? 'border-[var(--accent)] bg-[var(--accent-soft)] text-[var(--accent)]'
|
||||
: 'border-[var(--line)] bg-[var(--bg)] text-[var(--ink-soft)] hover:bg-[var(--bg-hover)]'
|
||||
}`}
|
||||
>
|
||||
{activeName}
|
||||
<ChevronDown size={14} />
|
||||
</button>
|
||||
{open && (
|
||||
<>
|
||||
<div className="fixed inset-0 z-10" onClick={() => setOpen(false)} />
|
||||
<div className="absolute left-0 top-full z-20 mt-1 min-w-[160px] overflow-hidden rounded-xl border border-[var(--line)] bg-[var(--bg-card)] py-1 shadow-[var(--shadow-md)]">
|
||||
<DropdownItem
|
||||
active={value === 'all'}
|
||||
onClick={() => { onChange('all'); setOpen(false); }}
|
||||
label="全部产品"
|
||||
/>
|
||||
{options.map((opt) => (
|
||||
<DropdownItem
|
||||
key={opt.id}
|
||||
active={value === opt.id}
|
||||
onClick={() => { onChange(opt.id); setOpen(false); }}
|
||||
label={opt.name}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownItem({
|
||||
active,
|
||||
onClick,
|
||||
label,
|
||||
}: {
|
||||
active: boolean;
|
||||
onClick: () => void;
|
||||
label: string;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className={`block w-full px-3 py-1.5 text-left text-[13px] transition-colors ${
|
||||
active
|
||||
? 'bg-[var(--accent-soft)] text-[var(--accent)] font-medium'
|
||||
: 'text-[var(--ink-soft)] hover:bg-[var(--bg-hover)]'
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── LegendDot ──────────────────────────────────────────────────── */
|
||||
|
||||
function LegendDot({ color, label }: { color: string; label: string }) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<span className={`inline-block h-1.5 w-1.5 rounded-full ${color}`} />
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── EmptyState ─────────────────────────────────────────────────── */
|
||||
|
||||
function EmptyState() {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center rounded-2xl border border-dashed border-[var(--line)] bg-[var(--bg-card)] py-20 text-center">
|
||||
<FolderKanban size={32} className="text-[var(--ink-muted)] mb-3" />
|
||||
<p className="text-sm font-medium text-[var(--ink-soft)]">暂无匹配项目</p>
|
||||
<p className="mt-1 text-xs text-[var(--ink-muted)]">尝试调整搜索条件或筛选器</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── CreateProjectModal ─────────────────────────────────────────── */
|
||||
|
||||
function CreateProjectModal({
|
||||
products,
|
||||
overview,
|
||||
onClose,
|
||||
onSubmit,
|
||||
}: {
|
||||
products: { id: string; name: string }[];
|
||||
overview: any[];
|
||||
onClose: () => void;
|
||||
onSubmit: (productId: string, name: string, description: string) => Promise<void>;
|
||||
}) {
|
||||
const [productId, setProductId] = useState('');
|
||||
const [name, setName] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [duplicateError, setDuplicateError] = useState(false);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!productId || !name.trim()) return;
|
||||
|
||||
const product = overview.find((p: any) => p.id === productId);
|
||||
if (product) {
|
||||
const exists = product.projects?.some(
|
||||
(proj: any) => proj.name === name.trim()
|
||||
);
|
||||
if (exists) {
|
||||
setDuplicateError(true);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await onSubmit(productId, name.trim(), description.trim());
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
|
||||
<div className="w-full max-w-md rounded-2xl bg-[var(--bg-card)] p-6 shadow-[var(--shadow-md)]">
|
||||
<div className="flex items-center justify-between mb-5">
|
||||
<h2 className="text-base font-semibold text-[var(--ink)]">新建项目</h2>
|
||||
<button type="button" onClick={onClose} className="text-[var(--ink-muted)] hover:text-[var(--ink)]">
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{/* Product select */}
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium text-[var(--ink-soft)] mb-1.5">
|
||||
产品 <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<select
|
||||
value={productId}
|
||||
onChange={(e) => setProductId(e.target.value)}
|
||||
className="h-9 w-full appearance-none rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 pr-8 text-[13px] text-[var(--ink)] focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]"
|
||||
>
|
||||
<option value="">请选择产品</option>
|
||||
{products.map((p) => (
|
||||
<option key={p.id} value={p.id}>{p.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<ChevronDown size={14} className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-[var(--ink-muted)]" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium text-[var(--ink-soft)] mb-1.5">
|
||||
项目名称 <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => { setName(e.target.value); setDuplicateError(false); }}
|
||||
placeholder="请输入项目名称"
|
||||
className={`h-9 w-full rounded-lg border bg-[var(--bg)] px-3 text-[13px] text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:outline-none focus:ring-2 ${
|
||||
duplicateError
|
||||
? 'border-red-500 focus:border-red-500 focus:ring-red-100'
|
||||
: 'border-[var(--line)] focus:border-[var(--accent)] focus:ring-[var(--accent-ring)]'
|
||||
}`}
|
||||
/>
|
||||
{duplicateError && (
|
||||
<p className="mt-1 text-[11px] text-red-500">该产品下已存在同名项目</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium text-[var(--ink-soft)] mb-1.5">
|
||||
描述
|
||||
</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="项目描述（可选）"
|
||||
rows={3}
|
||||
className="w-full resize-none rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 py-2 text-[13px] text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex items-center justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="h-8 rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] font-medium text-[var(--ink-soft)] hover:bg-[var(--bg-hover)]"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSubmit}
|
||||
disabled={submitting || !productId || !name.trim()}
|
||||
className="h-8 rounded-lg bg-[var(--accent)] px-3 text-[13px] font-medium text-white shadow-[var(--shadow-sm)] hover:bg-[var(--accent-hover)] disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{submitting ? '提交中…' : '创建'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
359
apps/web/app/versions/page.tsx
Normal file
359
apps/web/app/versions/page.tsx
Normal file
@@ -0,0 +1,359 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { Search, Tag, Plus, X, ChevronDown } from 'lucide-react';
|
||||
import { useProductStore } from '@/stores/useProductStore';
|
||||
import { flattenVersions, flattenProjects } from '@/lib/derive';
|
||||
import type { VersionWithContext } from '@/lib/derive';
|
||||
import { VersionStatus, VERSION_STATUS_LABEL, VERSION_STATUS_DOT } from '@/lib/version-status';
|
||||
|
||||
const STATUS_TABS: { key: VersionStatus | 'all'; label: string }[] = [
|
||||
{ key: 'all', label: '全部' },
|
||||
{ key: 'developing', label: '开发中' },
|
||||
{ key: 'planned', label: '规划中' },
|
||||
{ key: 'released', label: '已发布' },
|
||||
];
|
||||
|
||||
function parseVersionNumber(name: string): number[] {
|
||||
const match = name.match(/V([\d.]+)$/i);
|
||||
if (!match) return [0];
|
||||
return match[1].split('.').map(Number);
|
||||
}
|
||||
|
||||
function compareVersionsDesc(a: string, b: string): number {
|
||||
const va = parseVersionNumber(a);
|
||||
const vb = parseVersionNumber(b);
|
||||
const len = Math.max(va.length, vb.length);
|
||||
for (let i = 0; i < len; i++) {
|
||||
const na = va[i] ?? 0;
|
||||
const nb = vb[i] ?? 0;
|
||||
if (nb !== na) return nb - na;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
function sortVersions(versions: VersionWithContext[]): VersionWithContext[] {
|
||||
return [...versions].sort((a, b) => {
|
||||
const projCmp = a.projectName.localeCompare(b.projectName, 'zh-CN');
|
||||
if (projCmp !== 0) return projCmp;
|
||||
return compareVersionsDesc(a.name, b.name);
|
||||
});
|
||||
}
|
||||
|
||||
export default function VersionsPage() {
|
||||
const { overview, fetchOverview, createVersion } = useProductStore();
|
||||
const [search, setSearch] = useState('');
|
||||
const [statusTab, setStatusTab] = useState<VersionStatus | 'all'>('all');
|
||||
const [projectFilter, setProjectFilter] = useState('all');
|
||||
const [projectDropdownOpen, setProjectDropdownOpen] = useState(false);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
|
||||
useEffect(() => { fetchOverview(); }, [fetchOverview]);
|
||||
|
||||
const allVersions = useMemo(() => flattenVersions(overview), [overview]);
|
||||
const allProjects = useMemo(() => flattenProjects(overview), [overview]);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const list = allVersions.filter((v) => {
|
||||
if (statusTab !== 'all' && v.status !== statusTab) return false;
|
||||
if (projectFilter !== 'all' && v.projectName !== projectFilter) return false;
|
||||
if (search && !v.name.toLowerCase().includes(search.toLowerCase())) return false;
|
||||
return true;
|
||||
});
|
||||
return sortVersions(list);
|
||||
}, [allVersions, search, statusTab, projectFilter]);
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
<header className="flex h-14 shrink-0 items-center justify-between border-b border-[var(--line)] bg-[var(--bg-card)] px-5">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<h1 className="text-[15px] font-semibold tracking-tight text-[var(--ink)]">版本</h1>
|
||||
<span className="rounded-md bg-[var(--bg-subtle)] px-1.5 py-0.5 text-[11px] font-medium tabular-nums text-[var(--ink-soft)]">{allVersions.length}</span>
|
||||
</div>
|
||||
<button onClick={() => setShowModal(true)} className="flex h-8 items-center gap-1.5 rounded-lg bg-[var(--accent)] px-3 text-[13px] font-medium text-white shadow-[var(--shadow-sm)] hover:bg-[var(--accent-hover)] transition-colors">
|
||||
<Plus className="h-3.5 w-3.5" strokeWidth={2} />
|
||||
新建版本
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex shrink-0 items-center gap-3 border-b border-[var(--line)] bg-[var(--bg-card)] px-5 py-3">
|
||||
<div className="relative">
|
||||
<Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-[var(--ink-muted)]" strokeWidth={2} />
|
||||
<input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="搜索版本号" className="h-8 w-64 rounded-lg border border-[var(--line)] bg-[var(--bg)] pl-8 pr-3 text-[13px] text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]" />
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
{STATUS_TABS.map((tab) => (
|
||||
<button key={tab.key} onClick={() => setStatusTab(tab.key)} className={`h-8 rounded-lg px-3 text-[12.5px] transition-colors ${statusTab === tab.key ? 'bg-[var(--accent)] text-white' : 'border border-[var(--line)] bg-[var(--bg-card)] text-[var(--ink-soft)] hover:border-[var(--accent)] hover:text-[var(--accent)]'}`}>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="relative">
|
||||
<button onClick={() => setProjectDropdownOpen(!projectDropdownOpen)} className="flex h-8 items-center gap-1.5 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[12.5px] text-[var(--ink-soft)] hover:border-[var(--accent)] hover:text-[var(--accent)] transition-colors">
|
||||
{projectFilter === 'all' ? '全部项目' : projectFilter}
|
||||
<ChevronDown className="h-3 w-3" strokeWidth={2} />
|
||||
</button>
|
||||
{projectDropdownOpen && (
|
||||
<div className="absolute left-0 top-full z-10 mt-1 min-w-[140px] rounded-lg border border-[var(--line)] bg-[var(--bg-card)] py-1 shadow-[var(--shadow-md)]">
|
||||
<button onClick={() => { setProjectFilter('all'); setProjectDropdownOpen(false); }} className={`block w-full px-3 py-1.5 text-left text-[12.5px] transition-colors ${projectFilter === 'all' ? 'bg-[var(--accent-soft)] text-[var(--accent)]' : 'text-[var(--ink-soft)] hover:bg-[var(--bg-hover)]'}`}>
|
||||
全部项目
|
||||
</button>
|
||||
{allProjects.map((p) => (
|
||||
<button key={p.id} onClick={() => { setProjectFilter(p.name); setProjectDropdownOpen(false); }} className={`block w-full px-3 py-1.5 text-left text-[12.5px] transition-colors ${projectFilter === p.name ? 'bg-[var(--accent-soft)] text-[var(--accent)]' : 'text-[var(--ink-soft)] hover:bg-[var(--bg-hover)]'}`}>
|
||||
{p.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="ml-auto flex items-center gap-3 text-[11.5px] text-[var(--ink-muted)]">
|
||||
<span className="flex items-center gap-1.5"><span className="inline-block h-1.5 w-1.5 rounded-full bg-blue-500" />开发中</span>
|
||||
<span className="flex items-center gap-1.5"><span className="inline-block h-1.5 w-1.5 rounded-full bg-orange-500" />规划中</span>
|
||||
<span className="flex items-center gap-1.5"><span className="inline-block h-1.5 w-1.5 rounded-full bg-zinc-300" />已发布</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto bg-[var(--bg)]">
|
||||
<div className="px-5 py-4">
|
||||
{filtered.length === 0 ? (
|
||||
<div className="rounded-2xl border border-dashed border-[var(--line)] bg-[var(--bg-card)] py-20 text-center">
|
||||
<p className="text-[14px] font-medium text-[var(--ink-soft)]">没有找到匹配的版本</p>
|
||||
<p className="mt-1.5 text-[12.5px] text-[var(--ink-muted)]">尝试调整筛选条件</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-hidden rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] shadow-[var(--shadow-sm)]">
|
||||
<table className="w-full text-left text-[13px]">
|
||||
<thead>
|
||||
<tr className="border-b border-[var(--line)] bg-[var(--bg-subtle)]">
|
||||
<th className="px-4 py-2.5 text-[11.5px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">版本号</th>
|
||||
<th className="px-4 py-2.5 text-[11.5px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">状态</th>
|
||||
<th className="px-4 py-2.5 text-[11.5px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">项目</th>
|
||||
<th className="px-4 py-2.5 text-[11.5px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">产品</th>
|
||||
<th className="px-4 py-2.5 text-[11.5px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">创建时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filtered.map((v) => <VersionRow key={v.id} version={v} />)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showModal && <NewVersionModal overview={overview} onClose={() => setShowModal(false)} onCreate={createVersion} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function VersionRow({ version }: { version: VersionWithContext }) {
|
||||
const dotCls = VERSION_STATUS_DOT[version.status];
|
||||
return (
|
||||
<tr className="border-b border-[var(--line-soft)] last:border-0 transition-colors hover:bg-[var(--bg-subtle)]">
|
||||
<td className="px-4 py-3 font-medium text-[var(--ink)]">
|
||||
<div className="flex items-center gap-2">
|
||||
<Tag className="h-3.5 w-3.5 text-[var(--ink-muted)]" strokeWidth={1.75} />
|
||||
{version.name}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className="inline-flex items-center gap-1.5 text-[12px] text-[var(--ink-soft)]">
|
||||
<span className={`h-1.5 w-1.5 rounded-full ${dotCls}`} />
|
||||
{VERSION_STATUS_LABEL[version.status]}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-[var(--ink-soft)]">{version.projectName}</td>
|
||||
<td className="px-4 py-3 text-[var(--ink-muted)]">{version.productName}</td>
|
||||
<td className="px-4 py-3 text-[var(--ink-muted)] tabular-nums">{new Date(version.createdAt).toLocaleDateString('zh-CN')}</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
type IterationType = 'major' | 'minor' | 'patch';
|
||||
|
||||
interface NewVersionModalProps {
|
||||
overview: any[];
|
||||
onClose: () => void;
|
||||
onCreate: (productId: string, data: { name: string; status: VersionStatus }) => void;
|
||||
}
|
||||
|
||||
function getNextVersion(existingVersions: any[], projectName: string, type: IterationType): string {
|
||||
const projectVersions = existingVersions
|
||||
.filter((v: any) => v.name.startsWith(projectName + 'V'))
|
||||
.map((v: any) => {
|
||||
const match = v.name.match(/V([\d.]+)$/i);
|
||||
return match ? match[1].split('.').map(Number) : null;
|
||||
})
|
||||
.filter(Boolean) as number[][];
|
||||
|
||||
if (projectVersions.length === 0) {
|
||||
if (type === 'major') return '1.0';
|
||||
if (type === 'minor') return '0.1';
|
||||
return '0.0.1';
|
||||
}
|
||||
|
||||
// Find the max version
|
||||
projectVersions.sort((a, b) => {
|
||||
const len = Math.max(a.length, b.length);
|
||||
for (let i = 0; i < len; i++) {
|
||||
const diff = (b[i] ?? 0) - (a[i] ?? 0);
|
||||
if (diff !== 0) return diff;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
const latest = projectVersions[0];
|
||||
|
||||
if (type === 'major') {
|
||||
return `${(latest[0] ?? 0) + 1}.0`;
|
||||
} else if (type === 'minor') {
|
||||
return `${latest[0] ?? 0}.${(latest[1] ?? 0) + 1}`;
|
||||
} else {
|
||||
const major = latest[0] ?? 0;
|
||||
const minor = latest[1] ?? 0;
|
||||
const patch = latest[2] ?? 0;
|
||||
return `${major}.${minor}.${patch + 1}`;
|
||||
}
|
||||
}
|
||||
|
||||
function NewVersionModal({ overview, onClose, onCreate }: NewVersionModalProps) {
|
||||
const [productId, setProductId] = useState('');
|
||||
const [projectId, setProjectId] = useState('');
|
||||
const [projectName, setProjectName] = useState('');
|
||||
const [iterationType, setIterationType] = useState<IterationType | ''>('');
|
||||
const [versionNumber, setVersionNumber] = useState('');
|
||||
const [status, setStatus] = useState<VersionStatus>('planned');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const selectedProduct = overview.find((p: any) => p.id === productId);
|
||||
const projects = selectedProduct?.projects ?? [];
|
||||
const existingVersions = selectedProduct?.versions ?? [];
|
||||
|
||||
// When product changes, reset project
|
||||
const handleProductChange = (pid: string) => {
|
||||
setProductId(pid);
|
||||
setProjectId('');
|
||||
setProjectName('');
|
||||
setIterationType('');
|
||||
setVersionNumber('');
|
||||
};
|
||||
|
||||
// When project changes
|
||||
const handleProjectChange = (projId: string) => {
|
||||
const proj = projects.find((p: any) => p.id === projId);
|
||||
setProjectId(projId);
|
||||
setProjectName(proj?.name ?? '');
|
||||
setIterationType('');
|
||||
setVersionNumber('');
|
||||
};
|
||||
|
||||
// When iteration type changes, auto-generate version number
|
||||
const handleIterationChange = (type: IterationType) => {
|
||||
setIterationType(type);
|
||||
if (projectName) {
|
||||
const next = getNextVersion(existingVersions, projectName, type);
|
||||
setVersionNumber(next);
|
||||
}
|
||||
};
|
||||
|
||||
const handleVersionInput = (val: string) => {
|
||||
// Only allow digits and dots
|
||||
const cleaned = val.replace(/[^\d.]/g, '');
|
||||
setVersionNumber(cleaned);
|
||||
};
|
||||
|
||||
const canSubmit = productId && projectId && versionNumber && !submitting;
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!canSubmit) return;
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await onCreate(productId, { name: `${projectName}V${versionNumber}`, status });
|
||||
onClose();
|
||||
} catch (e) {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={onClose}>
|
||||
<div className="w-full max-w-md rounded-2xl bg-[var(--bg-card)] p-6 shadow-[var(--shadow-md)]" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="flex items-center justify-between mb-5">
|
||||
<h2 className="text-[15px] font-semibold text-[var(--ink)]">新建版本</h2>
|
||||
<button onClick={onClose} className="rounded-lg p-1 text-[var(--ink-muted)] hover:bg-[var(--bg-hover)] transition-colors">
|
||||
<X className="h-4 w-4" strokeWidth={2} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* 产品选择 */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-[12.5px] font-medium text-[var(--ink-soft)]">产品选择<span className="text-red-500">*</span></label>
|
||||
<select value={productId} onChange={(e) => handleProductChange(e.target.value)} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] text-[var(--ink)] focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]">
|
||||
<option value="">请选择产品</option>
|
||||
{overview.map((p: any) => <option key={p.id} value={p.id}>{p.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* 项目选择 */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-[12.5px] font-medium text-[var(--ink-soft)]">项目选择<span className="text-red-500">*</span></label>
|
||||
<select value={projectId} onChange={(e) => handleProjectChange(e.target.value)} disabled={!productId} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] text-[var(--ink)] disabled:opacity-50 focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]">
|
||||
<option value="">请选择项目</option>
|
||||
{projects.map((p: any) => <option key={p.id} value={p.id}>{p.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* 迭代类型 */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-[12.5px] font-medium text-[var(--ink-soft)]">迭代类型<span className="text-red-500">*</span></label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{([
|
||||
{ key: 'major' as const, label: '大版本', hint: 'X.0' },
|
||||
{ key: 'minor' as const, label: '中版本', hint: '1.X' },
|
||||
{ key: 'patch' as const, label: '小版本', hint: '1.2.X' },
|
||||
]).map((opt) => (
|
||||
<button key={opt.key} onClick={() => handleIterationChange(opt.key)} disabled={!projectId} className={`flex flex-col items-center gap-0.5 rounded-lg border px-3 py-2 transition-colors disabled:opacity-50 ${iterationType === opt.key ? 'border-[var(--accent)] bg-[var(--accent-soft)] text-[var(--accent)]' : 'border-[var(--line)] bg-[var(--bg-card)] text-[var(--ink-soft)] hover:border-[var(--accent)]'}`}>
|
||||
<span className="text-[12.5px] font-medium">{opt.label}</span>
|
||||
<span className="text-[10.5px] text-[var(--ink-muted)] tabular-nums">{opt.hint}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 版本号 */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-[12.5px] font-medium text-[var(--ink-soft)]">版本号</label>
|
||||
<input value={versionNumber} onChange={(e) => handleVersionInput(e.target.value)} placeholder="1.0" className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] tabular-nums text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]" />
|
||||
{projectName && versionNumber && (
|
||||
<p className="mt-1.5 text-[11.5px] text-[var(--ink-muted)]">将创建：<span className="font-medium text-[var(--ink-soft)]">{projectName}V{versionNumber}</span></p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 状态 */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-[12.5px] font-medium text-[var(--ink-soft)]">状态</label>
|
||||
<div className="flex gap-2">
|
||||
{([
|
||||
{ key: 'planned' as VersionStatus, label: '规划中' },
|
||||
{ key: 'developing' as VersionStatus, label: '开发中' },
|
||||
]).map((opt) => (
|
||||
<button key={opt.key} onClick={() => setStatus(opt.key)} className={`flex-1 h-9 rounded-lg border px-3 text-[12.5px] transition-colors ${status === opt.key ? 'border-[var(--accent)] bg-[var(--accent-soft)] text-[var(--accent)]' : 'border-[var(--line)] bg-[var(--bg-card)] text-[var(--ink-soft)] hover:border-[var(--accent)]'}`}>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex justify-end gap-2">
|
||||
<button onClick={onClose} className="h-9 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-4 text-[13px] text-[var(--ink-soft)] hover:bg-[var(--bg-hover)] transition-colors">取消</button>
|
||||
<button onClick={handleSubmit} disabled={!canSubmit} className="h-9 rounded-lg bg-[var(--accent)] px-4 text-[13px] font-medium text-white shadow-[var(--shadow-sm)] hover:bg-[var(--accent-hover)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
{submitting ? '提交中…' : '创建'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -4,18 +4,24 @@ import { useState } from 'react';
|
||||
|
||||
interface Props {
|
||||
initialData?: { name: string; description: string };
|
||||
onSubmit: (data: { name: string; description: string }) => void;
|
||||
onSubmit: (data: { name: string; description: string }) => void | Promise<void>;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
export function ProductForm({ initialData, onSubmit, onCancel }: Props) {
|
||||
const [name, setName] = useState(initialData?.name || '');
|
||||
const [description, setDescription] = useState(initialData?.description || '');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!name.trim()) return;
|
||||
onSubmit({ name: name.trim(), description: description.trim() });
|
||||
if (!name.trim() || submitting) return;
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await onSubmit({ name: name.trim(), description: description.trim() });
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -48,15 +54,17 @@ export function ProductForm({ initialData, onSubmit, onCancel }: Props) {
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="h-8 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)] hover:text-[var(--ink)]"
|
||||
disabled={submitting}
|
||||
className="h-8 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)] hover:text-[var(--ink)] disabled:opacity-50"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="h-8 rounded-lg bg-[var(--accent)] px-4 text-[13px] font-medium text-white shadow-[var(--shadow-sm)] hover:bg-[var(--accent-hover)]"
|
||||
disabled={submitting || !name.trim()}
|
||||
className="h-8 rounded-lg bg-[var(--accent)] px-4 text-[13px] font-medium text-white shadow-[var(--shadow-sm)] hover:bg-[var(--accent-hover)] disabled:opacity-50"
|
||||
>
|
||||
{initialData ? '保存' : '创建'}
|
||||
{submitting ? '提交中…' : initialData ? '保存' : '创建'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -52,7 +52,7 @@ export function RequirementForm({ initialData, onSubmit, onCancel }: Props) {
|
||||
onClick={() => setPriority(v)}
|
||||
className={`h-7 rounded-md px-2.5 text-[12.5px] transition-colors ${
|
||||
active
|
||||
? 'bg-[var(--ink)] text-white'
|
||||
? 'bg-[var(--accent)] text-white'
|
||||
: 'border border-[var(--line)] bg-[var(--bg-card)] text-[var(--ink-soft)] hover:border-[var(--ink-muted)] hover:text-[var(--ink)]'
|
||||
}`}
|
||||
>
|
||||
|
||||
@@ -126,7 +126,7 @@ function FilterChip({
|
||||
onClick={onClick}
|
||||
className={`h-7 rounded-md px-2.5 text-[12.5px] transition-colors ${
|
||||
active
|
||||
? 'bg-[var(--ink)] text-white'
|
||||
? 'bg-[var(--accent)] text-white'
|
||||
: 'border border-[var(--line)] bg-[var(--bg-card)] text-[var(--ink-soft)] hover:border-[var(--ink-muted)] hover:text-[var(--ink)]'
|
||||
}`}
|
||||
>
|
||||
|
||||
17
apps/web/components/version/VersionChip.tsx
Normal file
17
apps/web/components/version/VersionChip.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
'use client';
|
||||
|
||||
import { VersionStatus, VERSION_STATUS_BG, VERSION_STATUS_DOT } from '@/lib/version-status';
|
||||
|
||||
interface Props {
|
||||
name: string;
|
||||
status: VersionStatus;
|
||||
}
|
||||
|
||||
export function VersionChip({ name, status }: Props) {
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium ${VERSION_STATUS_BG[status]}`}>
|
||||
<span className={`h-1.5 w-1.5 rounded-full ${VERSION_STATUS_DOT[status]}`} />
|
||||
{name}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -1,10 +1,31 @@
|
||||
const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001/api/v1';
|
||||
|
||||
let apiAvailable: boolean | null = null;
|
||||
let probePromise: Promise<boolean> | null = null;
|
||||
|
||||
async function checkApi(): Promise<boolean> {
|
||||
if (apiAvailable !== null) return apiAvailable;
|
||||
if (probePromise) return probePromise;
|
||||
probePromise = (async () => {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/products`, { method: 'HEAD', signal: AbortSignal.timeout(300) });
|
||||
apiAvailable = res.ok;
|
||||
} catch {
|
||||
apiAvailable = false;
|
||||
}
|
||||
return apiAvailable;
|
||||
})();
|
||||
return probePromise;
|
||||
}
|
||||
|
||||
async function request<T>(path: string, options?: RequestInit): Promise<T> {
|
||||
const available = await checkApi();
|
||||
if (!available) throw new Error('API 不可用');
|
||||
const res = await fetch(`${API_BASE}${path}`, {
|
||||
headers: { 'Content-Type': 'application/json', ...options?.headers },
|
||||
...options,
|
||||
});
|
||||
}).catch(() => null);
|
||||
if (!res) throw new Error('API 不可用');
|
||||
if (!res.ok) {
|
||||
const error = await res.json().catch(() => ({}));
|
||||
throw new Error(error.message || `请求失败: ${res.status}`);
|
||||
|
||||
98
apps/web/lib/derive.ts
Normal file
98
apps/web/lib/derive.ts
Normal file
@@ -0,0 +1,98 @@
|
||||
import { VersionStatus } from './version-status';
|
||||
import type { Stage, Role } from './stage';
|
||||
|
||||
interface VersionMember {
|
||||
role: Role;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface RoleProgress {
|
||||
role: Role;
|
||||
percent: number;
|
||||
daysSpent: number;
|
||||
}
|
||||
|
||||
interface ProductOverviewLike {
|
||||
id: string;
|
||||
name: string;
|
||||
projects: { id: string; name: string; description: string; createdAt: string }[];
|
||||
versions: {
|
||||
id: string; name: string; status?: string; releaseDate: string | null; createdAt: string;
|
||||
currentStage?: Stage; startDate?: string | null; expectedReleaseDate?: string | null;
|
||||
members?: VersionMember[]; progress?: RoleProgress[];
|
||||
}[];
|
||||
}
|
||||
|
||||
export interface ProjectWithContext {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
createdAt: string;
|
||||
productId: string;
|
||||
productName: string;
|
||||
versions: VersionWithContext[];
|
||||
}
|
||||
|
||||
export interface VersionWithContext {
|
||||
id: string;
|
||||
name: string;
|
||||
status: VersionStatus;
|
||||
releaseDate: string | null;
|
||||
createdAt: string;
|
||||
productId: string;
|
||||
productName: string;
|
||||
projectName: string;
|
||||
currentStage?: Stage;
|
||||
startDate?: string | null;
|
||||
expectedReleaseDate?: string | null;
|
||||
members?: VersionMember[];
|
||||
progress?: RoleProgress[];
|
||||
}
|
||||
|
||||
export function flattenProjects(overview: ProductOverviewLike[]): ProjectWithContext[] {
|
||||
const result: ProjectWithContext[] = [];
|
||||
for (const product of overview) {
|
||||
for (const project of product.projects) {
|
||||
const versions = product.versions
|
||||
.filter((v) => v.name.toLowerCase().startsWith(project.name.toLowerCase()))
|
||||
.map((v) => ({
|
||||
...v,
|
||||
status: (v.status || 'released') as VersionStatus,
|
||||
productId: product.id,
|
||||
productName: product.name,
|
||||
projectName: project.name,
|
||||
}));
|
||||
result.push({
|
||||
...project,
|
||||
productId: product.id,
|
||||
productName: product.name,
|
||||
versions,
|
||||
});
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
export function flattenVersions(overview: ProductOverviewLike[]): VersionWithContext[] {
|
||||
const result: VersionWithContext[] = [];
|
||||
for (const product of overview) {
|
||||
for (const version of product.versions) {
|
||||
const project = product.projects.find((p) =>
|
||||
version.name.toLowerCase().startsWith(p.name.toLowerCase()),
|
||||
);
|
||||
result.push({
|
||||
...version,
|
||||
status: (version.status || 'released') as VersionStatus,
|
||||
productId: product.id,
|
||||
productName: product.name,
|
||||
projectName: project?.name || '未关联',
|
||||
});
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
export function getProjectDetail(overview: ProductOverviewLike[], projectId: string): ProjectWithContext | null {
|
||||
const projects = flattenProjects(overview);
|
||||
return projects.find((p) => p.id === projectId) || null;
|
||||
}
|
||||
36
apps/web/lib/stage.ts
Normal file
36
apps/web/lib/stage.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
export type Stage = 'requirement' | 'product_design' | 'ui_design' | 'dev' | 'integration' | 'testing' | 'released';
|
||||
|
||||
export type Role = 'product' | 'ui' | 'frontend' | 'backend' | 'testing';
|
||||
|
||||
export const STAGES: { key: Stage; label: string }[] = [
|
||||
{ key: 'requirement', label: '需求' },
|
||||
{ key: 'product_design', label: '产品设计' },
|
||||
{ key: 'ui_design', label: 'UI 设计' },
|
||||
{ key: 'dev', label: '开发' },
|
||||
{ key: 'integration', label: '联调' },
|
||||
{ key: 'testing', label: '测试' },
|
||||
{ key: 'released', label: '上线' },
|
||||
];
|
||||
|
||||
export const STAGE_INDEX: Record<Stage, number> = STAGES.reduce(
|
||||
(acc, s, i) => ({ ...acc, [s.key]: i }),
|
||||
{} as Record<Stage, number>,
|
||||
);
|
||||
|
||||
export const STAGE_LABEL: Record<Stage, string> = STAGES.reduce(
|
||||
(acc, s) => ({ ...acc, [s.key]: s.label }),
|
||||
{} as Record<Stage, string>,
|
||||
);
|
||||
|
||||
export const ROLES: { key: Role; label: string }[] = [
|
||||
{ key: 'product', label: '产品' },
|
||||
{ key: 'ui', label: 'UI' },
|
||||
{ key: 'frontend', label: '前端' },
|
||||
{ key: 'backend', label: '后端' },
|
||||
{ key: 'testing', label: '测试' },
|
||||
];
|
||||
|
||||
export const ROLE_LABEL: Record<Role, string> = ROLES.reduce(
|
||||
(acc, r) => ({ ...acc, [r.key]: r.label }),
|
||||
{} as Record<Role, string>,
|
||||
);
|
||||
19
apps/web/lib/version-status.ts
Normal file
19
apps/web/lib/version-status.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
export type VersionStatus = 'developing' | 'planned' | 'released';
|
||||
|
||||
export const VERSION_STATUS_LABEL: Record<VersionStatus, string> = {
|
||||
developing: '开发中',
|
||||
planned: '规划中',
|
||||
released: '已发布',
|
||||
};
|
||||
|
||||
export const VERSION_STATUS_DOT: Record<VersionStatus, string> = {
|
||||
developing: 'bg-blue-500',
|
||||
planned: 'bg-orange-500',
|
||||
released: 'bg-zinc-300',
|
||||
};
|
||||
|
||||
export const VERSION_STATUS_BG: Record<VersionStatus, string> = {
|
||||
developing: 'bg-blue-500/10 text-blue-600',
|
||||
planned: 'bg-orange-500/10 text-orange-600',
|
||||
released: 'bg-zinc-100 text-zinc-600',
|
||||
};
|
||||
@@ -10,6 +10,9 @@
|
||||
"type-check": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@ftb/shared": "workspace:*",
|
||||
"lucide-react": "^1.17.0",
|
||||
"next": "^14.2.0",
|
||||
|
||||
@@ -3,25 +3,116 @@
|
||||
import { create } from 'zustand';
|
||||
import { Product } from '@ftb/shared';
|
||||
import { api } from '@/lib/api';
|
||||
import type { Stage, Role } from '@/lib/stage';
|
||||
|
||||
interface ProductWithCount extends Product {
|
||||
_count?: { requirements: number; projects: number };
|
||||
interface VersionMember {
|
||||
role: Role;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface RoleProgress {
|
||||
role: Role;
|
||||
percent: number;
|
||||
daysSpent: number;
|
||||
}
|
||||
|
||||
interface VersionItem {
|
||||
id: string;
|
||||
name: string;
|
||||
status?: string;
|
||||
releaseDate: string | null;
|
||||
createdAt: string;
|
||||
currentStage?: Stage;
|
||||
startDate?: string | null;
|
||||
expectedReleaseDate?: string | null;
|
||||
members?: VersionMember[];
|
||||
progress?: RoleProgress[];
|
||||
}
|
||||
|
||||
const MOCK_OVERVIEW: ProductOverview[] = [
|
||||
{
|
||||
id: 'mock-1',
|
||||
name: '翻台宝',
|
||||
description: '餐饮 SaaS 主产品，覆盖门店运营管理全流程',
|
||||
createdAt: '2024-01-01',
|
||||
updatedAt: '2024-06-01',
|
||||
projects: [
|
||||
{ id: 'p1', name: '考勤', description: '员工打卡、排班管理', createdAt: '2024-01-10' },
|
||||
{ id: 'p2', name: '电子合同', description: '入职、续签、离职合同电子化', createdAt: '2024-02-15' },
|
||||
{ id: 'p3', name: '值班', description: '门店值班排班与交接', createdAt: '2024-03-01' },
|
||||
],
|
||||
versions: [
|
||||
{ id: 'v1', name: '考勤V1.0', status: 'released', releaseDate: '2024-02-01', createdAt: '2024-01-20', currentStage: 'released', startDate: '2024-01-20', members: [{ role: 'product', name: '张三' }, { role: 'frontend', name: '赵六' }, { role: 'backend', name: '孙八' }, { role: 'testing', name: '周九' }], progress: [{ role: 'product', percent: 100, daysSpent: 3 }, { role: 'frontend', percent: 100, daysSpent: 5 }, { role: 'backend', percent: 100, daysSpent: 4 }, { role: 'testing', percent: 100, daysSpent: 2 }] },
|
||||
{ id: 'v2', name: '考勤V1.2', status: 'developing', releaseDate: null, createdAt: '2024-04-15', currentStage: 'dev', startDate: '2024-04-15', expectedReleaseDate: '2024-06-10', members: [{ role: 'product', name: '张三' }, { role: 'ui', name: '王五' }, { role: 'frontend', name: '赵六' }, { role: 'backend', name: '孙八' }, { role: 'testing', name: '周九' }], progress: [{ role: 'product', percent: 100, daysSpent: 5 }, { role: 'ui', percent: 100, daysSpent: 7 }, { role: 'frontend', percent: 60, daysSpent: 10 }, { role: 'backend', percent: 40, daysSpent: 12 }, { role: 'testing', percent: 0, daysSpent: 0 }] },
|
||||
{ id: 'v3', name: '考勤V1.3', status: 'planned', releaseDate: null, createdAt: '2024-06-01' },
|
||||
{ id: 'v4', name: '电子合同V1.0', status: 'released', releaseDate: '2024-03-20', createdAt: '2024-03-01', currentStage: 'released', startDate: '2024-03-01', members: [{ role: 'product', name: '李四' }, { role: 'frontend', name: '钱七' }, { role: 'backend', name: '孙八' }, { role: 'testing', name: '周九' }], progress: [{ role: 'product', percent: 100, daysSpent: 4 }, { role: 'frontend', percent: 100, daysSpent: 8 }, { role: 'backend', percent: 100, daysSpent: 6 }, { role: 'testing', percent: 100, daysSpent: 3 }] },
|
||||
{ id: 'v5', name: '电子合同V2.0', status: 'released', releaseDate: '2024-06-01', createdAt: '2024-05-20', currentStage: 'released', startDate: '2024-05-01', members: [{ role: 'product', name: '李四' }, { role: 'ui', name: '王五' }, { role: 'frontend', name: '钱七' }, { role: 'backend', name: '孙八' }, { role: 'testing', name: '周九' }], progress: [{ role: 'product', percent: 100, daysSpent: 5 }, { role: 'ui', percent: 100, daysSpent: 6 }, { role: 'frontend', percent: 100, daysSpent: 12 }, { role: 'backend', percent: 100, daysSpent: 10 }, { role: 'testing', percent: 100, daysSpent: 4 }] },
|
||||
{ id: 'v6', name: '电子合同V2.1', status: 'developing', releaseDate: null, createdAt: '2024-06-05', currentStage: 'ui_design', startDate: '2024-06-05', expectedReleaseDate: '2024-07-15', members: [{ role: 'product', name: '李四' }, { role: 'ui', name: '王五' }, { role: 'frontend', name: '钱七' }, { role: 'backend', name: '孙八' }, { role: 'testing', name: '周九' }], progress: [{ role: 'product', percent: 100, daysSpent: 3 }, { role: 'ui', percent: 50, daysSpent: 4 }, { role: 'frontend', percent: 0, daysSpent: 0 }, { role: 'backend', percent: 0, daysSpent: 0 }, { role: 'testing', percent: 0, daysSpent: 0 }] },
|
||||
{ id: 'v7', name: '值班V1.0', status: 'released', releaseDate: '2024-04-01', createdAt: '2024-03-15', currentStage: 'released', startDate: '2024-03-15', members: [{ role: 'product', name: '张三' }, { role: 'frontend', name: '赵六' }, { role: 'testing', name: '周九' }], progress: [{ role: 'product', percent: 100, daysSpent: 3 }, { role: 'frontend', percent: 100, daysSpent: 8 }, { role: 'testing', percent: 100, daysSpent: 3 }] },
|
||||
{ id: 'v8', name: '值班V1.1', status: 'released', releaseDate: '2024-05-15', createdAt: '2024-05-01', currentStage: 'released', startDate: '2024-05-01', members: [{ role: 'product', name: '张三' }, { role: 'frontend', name: '赵六' }, { role: 'backend', name: '孙八' }, { role: 'testing', name: '周九' }], progress: [{ role: 'product', percent: 100, daysSpent: 2 }, { role: 'frontend', percent: 100, daysSpent: 5 }, { role: 'backend', percent: 100, daysSpent: 4 }, { role: 'testing', percent: 100, daysSpent: 2 }] },
|
||||
{ id: 'v9', name: '值班V1.2', status: 'developing', releaseDate: null, createdAt: '2024-06-02', currentStage: 'testing', startDate: '2024-06-02', expectedReleaseDate: '2024-06-20', members: [{ role: 'product', name: '张三' }, { role: 'frontend', name: '赵六' }, { role: 'backend', name: '孙八' }, { role: 'testing', name: '周九' }], progress: [{ role: 'product', percent: 100, daysSpent: 2 }, { role: 'frontend', percent: 100, daysSpent: 6 }, { role: 'backend', percent: 100, daysSpent: 5 }, { role: 'testing', percent: 30, daysSpent: 2 }] },
|
||||
{ id: 'v10', name: '值班V2.0', status: 'planned', releaseDate: null, createdAt: '2024-06-08' },
|
||||
],
|
||||
_count: { requirements: 12, projects: 3, versions: 10 },
|
||||
},
|
||||
{
|
||||
id: 'mock-2',
|
||||
name: '智慧收银',
|
||||
description: '收银台 POS + 会员支付一体化',
|
||||
createdAt: '2024-03-01',
|
||||
updatedAt: '2024-06-01',
|
||||
projects: [
|
||||
{ id: 'p4', name: '支付', description: '微信/支付宝/现金多渠道收银', createdAt: '2024-03-10' },
|
||||
{ id: 'p5', name: '会员', description: '储值卡、积分、优惠券', createdAt: '2024-04-01' },
|
||||
],
|
||||
versions: [
|
||||
{ id: 'v11', name: '支付V1.0', status: 'released', releaseDate: '2024-04-20', createdAt: '2024-04-01', currentStage: 'released', startDate: '2024-04-01', members: [{ role: 'product', name: '李四' }, { role: 'frontend', name: '钱七' }, { role: 'backend', name: '吴十' }, { role: 'testing', name: '郑十一' }], progress: [{ role: 'product', percent: 100, daysSpent: 4 }, { role: 'frontend', percent: 100, daysSpent: 8 }, { role: 'backend', percent: 100, daysSpent: 7 }, { role: 'testing', percent: 100, daysSpent: 3 }] },
|
||||
{ id: 'v12', name: '支付V1.1', status: 'released', releaseDate: '2024-06-01', createdAt: '2024-05-25', currentStage: 'released', startDate: '2024-05-10', members: [{ role: 'product', name: '李四' }, { role: 'frontend', name: '钱七' }, { role: 'backend', name: '吴十' }, { role: 'testing', name: '郑十一' }], progress: [{ role: 'product', percent: 100, daysSpent: 3 }, { role: 'frontend', percent: 100, daysSpent: 7 }, { role: 'backend', percent: 100, daysSpent: 6 }, { role: 'testing', percent: 100, daysSpent: 3 }] },
|
||||
{ id: 'v13', name: '支付V2.0', status: 'developing', releaseDate: null, createdAt: '2024-06-05', currentStage: 'dev', startDate: '2024-06-05', expectedReleaseDate: '2024-07-20', members: [{ role: 'product', name: '李四' }, { role: 'ui', name: '王五' }, { role: 'frontend', name: '钱七' }, { role: 'backend', name: '吴十' }, { role: 'testing', name: '郑十一' }], progress: [{ role: 'product', percent: 100, daysSpent: 4 }, { role: 'ui', percent: 100, daysSpent: 5 }, { role: 'frontend', percent: 30, daysSpent: 5 }, { role: 'backend', percent: 20, daysSpent: 4 }, { role: 'testing', percent: 0, daysSpent: 0 }] },
|
||||
{ id: 'v14', name: '会员V1.0', status: 'released', releaseDate: '2024-05-10', createdAt: '2024-04-20', currentStage: 'released', startDate: '2024-04-20', members: [{ role: 'product', name: '张三' }, { role: 'frontend', name: '赵六' }, { role: 'backend', name: '吴十' }, { role: 'testing', name: '郑十一' }], progress: [{ role: 'product', percent: 100, daysSpent: 4 }, { role: 'frontend', percent: 100, daysSpent: 9 }, { role: 'backend', percent: 100, daysSpent: 7 }, { role: 'testing', percent: 100, daysSpent: 3 }] },
|
||||
{ id: 'v15', name: '会员V1.1', status: 'developing', releaseDate: null, createdAt: '2024-06-03', currentStage: 'integration', startDate: '2024-06-03', expectedReleaseDate: '2024-06-25', members: [{ role: 'product', name: '张三' }, { role: 'ui', name: '王五' }, { role: 'frontend', name: '赵六' }, { role: 'backend', name: '吴十' }, { role: 'testing', name: '郑十一' }], progress: [{ role: 'product', percent: 100, daysSpent: 3 }, { role: 'ui', percent: 100, daysSpent: 4 }, { role: 'frontend', percent: 90, daysSpent: 8 }, { role: 'backend', percent: 85, daysSpent: 7 }, { role: 'testing', percent: 0, daysSpent: 0 }] },
|
||||
{ id: 'v16', name: '会员V2.0', status: 'planned', releaseDate: null, createdAt: '2024-06-08' },
|
||||
],
|
||||
_count: { requirements: 8, projects: 2, versions: 6 },
|
||||
},
|
||||
];
|
||||
|
||||
interface ProductWithCount {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
_count?: { requirements: number; projects: number; versions?: number };
|
||||
}
|
||||
|
||||
interface ProductOverview extends ProductWithCount {
|
||||
projects: { id: string; name: string; description: string; createdAt: string }[];
|
||||
versions: VersionItem[];
|
||||
}
|
||||
|
||||
interface ProductState {
|
||||
products: ProductWithCount[];
|
||||
overview: ProductOverview[];
|
||||
currentProduct: (Product & { requirements?: any[]; versions?: any[] }) | null;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
fetchProducts: () => Promise<void>;
|
||||
fetchOverview: () => Promise<void>;
|
||||
fetchProduct: (id: string) => Promise<void>;
|
||||
createProduct: (data: { name: string; description?: string }) => Promise<void>;
|
||||
updateProduct: (id: string, data: { name?: string; description?: string }) => Promise<void>;
|
||||
deleteProduct: (id: string) => Promise<void>;
|
||||
reorderProducts: (ids: string[]) => void;
|
||||
migrateAndDeleteProduct: (sourceId: string, targetId: string) => void;
|
||||
createProject: (productId: string, data: { name: string; description?: string }) => void;
|
||||
createVersion: (productId: string, data: { name: string; status: string }) => void;
|
||||
updateVersion: (productId: string, versionId: string, data: Partial<VersionItem>) => void;
|
||||
}
|
||||
|
||||
export const useProductStore = create<ProductState>((set, get) => ({
|
||||
products: [],
|
||||
overview: [],
|
||||
currentProduct: null,
|
||||
loading: false,
|
||||
error: null,
|
||||
@@ -31,8 +122,26 @@ export const useProductStore = create<ProductState>((set, get) => ({
|
||||
try {
|
||||
const products = await api.get<ProductWithCount[]>('/products');
|
||||
set({ products, loading: false });
|
||||
} catch (e: any) {
|
||||
set({ error: e.message, loading: false });
|
||||
} catch {
|
||||
set({ products: [], error: null, loading: false });
|
||||
}
|
||||
},
|
||||
|
||||
fetchOverview: async () => {
|
||||
if (get().overview.length > 0) return;
|
||||
const cached = loadLocal();
|
||||
if (cached.length > 0) set({ overview: cached, loading: false });
|
||||
else set({ loading: true, error: null });
|
||||
try {
|
||||
const overview = await api.get<ProductOverview[]>('/products/overview');
|
||||
set({ overview, loading: false });
|
||||
saveLocal(overview);
|
||||
} catch {
|
||||
if (cached.length === 0) {
|
||||
set({ overview: MOCK_OVERVIEW, error: null, loading: false });
|
||||
} else {
|
||||
set({ loading: false });
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -41,23 +150,156 @@ export const useProductStore = create<ProductState>((set, get) => ({
|
||||
try {
|
||||
const product = await api.get<Product>(`/products/${id}`);
|
||||
set({ currentProduct: product, loading: false });
|
||||
} catch (e: any) {
|
||||
set({ error: e.message, loading: false });
|
||||
} catch {
|
||||
const found = get().overview.find((p) => p.id === id);
|
||||
if (found) {
|
||||
set({ currentProduct: found as any, loading: false });
|
||||
} else {
|
||||
set({ error: '产品不存在', loading: false });
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
createProduct: async (data) => {
|
||||
await api.post('/products', data);
|
||||
await get().fetchProducts();
|
||||
try {
|
||||
await api.post('/products', data);
|
||||
await get().fetchOverview();
|
||||
} catch {
|
||||
const newProduct: ProductOverview = {
|
||||
id: `local-${Date.now()}`,
|
||||
name: data.name || '',
|
||||
description: data.description || '',
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
projects: [],
|
||||
versions: [],
|
||||
_count: { requirements: 0, projects: 0, versions: 0 },
|
||||
};
|
||||
const updated = [newProduct, ...get().overview];
|
||||
set({ overview: updated });
|
||||
saveLocal(updated);
|
||||
}
|
||||
},
|
||||
|
||||
updateProduct: async (id, data) => {
|
||||
await api.patch(`/products/${id}`, data);
|
||||
await get().fetchProducts();
|
||||
try {
|
||||
await api.patch(`/products/${id}`, data);
|
||||
await get().fetchOverview();
|
||||
} catch {
|
||||
const updated = get().overview.map((p) =>
|
||||
p.id === id ? { ...p, ...data } : p,
|
||||
);
|
||||
set({ overview: updated });
|
||||
saveLocal(updated);
|
||||
}
|
||||
},
|
||||
|
||||
deleteProduct: async (id) => {
|
||||
await api.delete(`/products/${id}`);
|
||||
set({ products: get().products.filter((p) => p.id !== id) });
|
||||
try {
|
||||
await api.delete(`/products/${id}`);
|
||||
} catch {}
|
||||
const updated = get().overview.filter((p) => p.id !== id);
|
||||
set({
|
||||
products: get().products.filter((p) => p.id !== id),
|
||||
overview: updated,
|
||||
});
|
||||
saveLocal(updated);
|
||||
},
|
||||
|
||||
reorderProducts: (ids) => {
|
||||
const map = new Map(get().overview.map((p) => [p.id, p]));
|
||||
const reordered = ids.map((id) => map.get(id)).filter(Boolean) as ProductOverview[];
|
||||
set({ overview: reordered });
|
||||
saveLocal(reordered);
|
||||
},
|
||||
|
||||
migrateAndDeleteProduct: (sourceId, targetId) => {
|
||||
const source = get().overview.find((p) => p.id === sourceId);
|
||||
const target = get().overview.find((p) => p.id === targetId);
|
||||
if (!source || !target) return;
|
||||
|
||||
const migratedTarget: ProductOverview = {
|
||||
...target,
|
||||
projects: [...target.projects, ...source.projects],
|
||||
versions: [...target.versions, ...source.versions],
|
||||
_count: {
|
||||
requirements: (target._count?.requirements ?? 0) + (source._count?.requirements ?? 0),
|
||||
projects: (target._count?.projects ?? 0) + (source._count?.projects ?? 0),
|
||||
versions: (target._count?.versions ?? 0) + (source._count?.versions ?? 0),
|
||||
},
|
||||
};
|
||||
|
||||
const updated = get().overview
|
||||
.filter((p) => p.id !== sourceId)
|
||||
.map((p) => (p.id === targetId ? migratedTarget : p));
|
||||
set({ overview: updated });
|
||||
saveLocal(updated);
|
||||
},
|
||||
|
||||
createProject: (productId, data) => {
|
||||
const newProject = {
|
||||
id: `proj-${Date.now()}`,
|
||||
name: data.name || '',
|
||||
description: data.description || '',
|
||||
createdAt: new Date().toISOString(),
|
||||
};
|
||||
const updated = get().overview.map((p) => {
|
||||
if (p.id !== productId) return p;
|
||||
return {
|
||||
...p,
|
||||
projects: [...p.projects, newProject],
|
||||
_count: { ...p._count, projects: (p._count?.projects ?? 0) + 1 } as any,
|
||||
};
|
||||
});
|
||||
set({ overview: updated });
|
||||
saveLocal(updated);
|
||||
},
|
||||
|
||||
createVersion: (productId, data) => {
|
||||
const newVersion = {
|
||||
id: `ver-${Date.now()}`,
|
||||
name: data.name,
|
||||
status: data.status,
|
||||
releaseDate: null,
|
||||
createdAt: new Date().toISOString(),
|
||||
};
|
||||
const updated = get().overview.map((p) => {
|
||||
if (p.id !== productId) return p;
|
||||
return {
|
||||
...p,
|
||||
versions: [...p.versions, newVersion],
|
||||
_count: { ...p._count, versions: (p._count?.versions ?? 0) + 1 } as any,
|
||||
};
|
||||
});
|
||||
set({ overview: updated });
|
||||
saveLocal(updated);
|
||||
},
|
||||
|
||||
updateVersion: (productId, versionId, data) => {
|
||||
const updated = get().overview.map((p) => {
|
||||
if (p.id !== productId) return p;
|
||||
return {
|
||||
...p,
|
||||
versions: p.versions.map((v) =>
|
||||
v.id === versionId ? { ...v, ...data } : v,
|
||||
),
|
||||
};
|
||||
});
|
||||
set({ overview: updated });
|
||||
saveLocal(updated);
|
||||
},
|
||||
}));
|
||||
|
||||
const STORAGE_KEY = 'ftb_products_overview';
|
||||
|
||||
function saveLocal(data: ProductOverview[]) {
|
||||
try { localStorage.setItem(STORAGE_KEY, JSON.stringify(data)); } catch {}
|
||||
}
|
||||
|
||||
function loadLocal(): ProductOverview[] {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
if (raw) return JSON.parse(raw);
|
||||
} catch {}
|
||||
return MOCK_OVERVIEW;
|
||||
}
|
||||
|
||||
68
pnpm-lock.yaml
generated
68
pnpm-lock.yaml
generated
@@ -81,9 +81,21 @@ importers:
|
||||
|
||||
apps/web:
|
||||
dependencies:
|
||||
'@dnd-kit/core':
|
||||
specifier: ^6.3.1
|
||||
version: 6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@dnd-kit/sortable':
|
||||
specifier: ^10.0.0
|
||||
version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
|
||||
'@dnd-kit/utilities':
|
||||
specifier: ^3.2.2
|
||||
version: 3.2.2(react@18.3.1)
|
||||
'@ftb/shared':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/shared
|
||||
lucide-react:
|
||||
specifier: ^1.17.0
|
||||
version: 1.17.0(react@18.3.1)
|
||||
next:
|
||||
specifier: ^14.2.0
|
||||
version: 14.2.35(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
@@ -325,6 +337,28 @@ packages:
|
||||
resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
'@dnd-kit/accessibility@3.1.1':
|
||||
resolution: {integrity: sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==}
|
||||
peerDependencies:
|
||||
react: '>=16.8.0'
|
||||
|
||||
'@dnd-kit/core@6.3.1':
|
||||
resolution: {integrity: sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==}
|
||||
peerDependencies:
|
||||
react: '>=16.8.0'
|
||||
react-dom: '>=16.8.0'
|
||||
|
||||
'@dnd-kit/sortable@10.0.0':
|
||||
resolution: {integrity: sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==}
|
||||
peerDependencies:
|
||||
'@dnd-kit/core': ^6.3.0
|
||||
react: '>=16.8.0'
|
||||
|
||||
'@dnd-kit/utilities@3.2.2':
|
||||
resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==}
|
||||
peerDependencies:
|
||||
react: '>=16.8.0'
|
||||
|
||||
'@isaacs/cliui@8.0.2':
|
||||
resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
|
||||
engines: {node: '>=12'}
|
||||
@@ -1897,6 +1931,11 @@ packages:
|
||||
lru-cache@5.1.1:
|
||||
resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
|
||||
|
||||
lucide-react@1.17.0:
|
||||
resolution: {integrity: sha512-9FA9evdox/JQL5PT57fdA1x/yg8T7knJ98+zjTL3UfKza6pflQUUh3XtaQIHKvnsJw1lmsEyHVlt5jchYxOQ5w==}
|
||||
peerDependencies:
|
||||
react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
|
||||
magic-string@0.30.8:
|
||||
resolution: {integrity: sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==}
|
||||
engines: {node: '>=12'}
|
||||
@@ -3130,6 +3169,31 @@ snapshots:
|
||||
dependencies:
|
||||
'@jridgewell/trace-mapping': 0.3.9
|
||||
|
||||
'@dnd-kit/accessibility@3.1.1(react@18.3.1)':
|
||||
dependencies:
|
||||
react: 18.3.1
|
||||
tslib: 2.8.1
|
||||
|
||||
'@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
'@dnd-kit/accessibility': 3.1.1(react@18.3.1)
|
||||
'@dnd-kit/utilities': 3.2.2(react@18.3.1)
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
tslib: 2.8.1
|
||||
|
||||
'@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
'@dnd-kit/core': 6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@dnd-kit/utilities': 3.2.2(react@18.3.1)
|
||||
react: 18.3.1
|
||||
tslib: 2.8.1
|
||||
|
||||
'@dnd-kit/utilities@3.2.2(react@18.3.1)':
|
||||
dependencies:
|
||||
react: 18.3.1
|
||||
tslib: 2.8.1
|
||||
|
||||
'@isaacs/cliui@8.0.2':
|
||||
dependencies:
|
||||
string-width: 5.1.2
|
||||
@@ -5081,6 +5145,10 @@ snapshots:
|
||||
dependencies:
|
||||
yallist: 3.1.1
|
||||
|
||||
lucide-react@1.17.0(react@18.3.1):
|
||||
dependencies:
|
||||
react: 18.3.1
|
||||
|
||||
magic-string@0.30.8:
|
||||
dependencies:
|
||||
'@jridgewell/sourcemap-codec': 1.5.5
|
||||
|
||||
Reference in New Issue
Block a user