wanzi/ftb-project-management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(需求池): 优化待评审操作列展示

Browse Source
This commit is contained in:
。
2026-07-06 17:51:59 +08:00
parent 262ee58b6c
commit a129edd9a4
3 changed files with 59 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
apps/web/app/requirements/page.tsx
View File

@@ -2,7 +2,22 @@
import { RouteGuard } from '@/components/auth/Guard';
import { useEffect, useMemo, useState } from 'react';
import { Search, Plus, Lightbulb, ArrowUp, ArrowDown, ChevronDown, ChevronRight, FolderOpen, Layers } from 'lucide-react';
import {
Search,
Plus,
Lightbulb,
ArrowUp,
ArrowDown,
ChevronDown,
ChevronRight,
FolderOpen,
Layers,
Pencil,
Check,
XCircle,
Archive,
Trash2,
} from 'lucide-react';
import { useRequirementStore } from '@/stores/useRequirementStore';
import { useProductStore } from '@/stores/useProductStore';
import { useDevTaskStore } from '@/stores/useDevTaskStore';
@@ -40,6 +55,16 @@ const PRIORITY_COLORS: Record<string, string> = {
P4: 'bg-zinc-100 text-zinc-500',
};
const REQUIREMENT_ACTION_BUTTON_BASE_CLASS =
'inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-[var(--ink-muted)] transition-colors';
const REQUIREMENT_ACTION_BUTTON_TONE_CLASS = {
neutral: 'hover:bg-[var(--bg-subtle)] hover:text-[var(--ink)]',
success: 'text-emerald-600 hover:bg-emerald-50',
danger: 'text-red-600 hover:bg-red-50',
warning: 'text-orange-600 hover:bg-orange-50',
} as const;
const STATUS_TABS: { key: string; label: string }[] = [
{ key: 'all', label: '全部' },
{ key: 'pending_review', label: '待评审' },
@@ -753,9 +778,11 @@ function RequirementsPageContent() {
{canMutateRequirement(req) && (['pending_review', 'adopted', 'planned'] as const).includes(req.status as any) && canEditRequirement(req.id, devTasksByRequirement.get(req.id) ?? []) && (
<button
onClick={() => handleEdit(req)}
className="h-6 rounded px-1.5 text-[11px] font-medium text-[var(--ink-soft)] transition-colors hover:bg-[var(--bg-subtle)]"
className={`${REQUIREMENT_ACTION_BUTTON_BASE_CLASS} ${REQUIREMENT_ACTION_BUTTON_TONE_CLASS.neutral}`}
title="编辑"
aria-label="编辑需求"
>
编辑
<Pencil className="h-3.5 w-3.5" strokeWidth={1.8} />
</button>
)}
{/* 待评审：采纳/拒绝 */}
@@ -763,15 +790,19 @@ function RequirementsPageContent() {
<>
<button
onClick={() => updateRequirement(req.id, { status: 'adopted' })}
className="h-6 rounded px-1.5 text-[11px] font-medium text-emerald-600 transition-colors hover:bg-emerald-50"
className={`${REQUIREMENT_ACTION_BUTTON_BASE_CLASS} ${REQUIREMENT_ACTION_BUTTON_TONE_CLASS.success}`}
title="采纳"
aria-label="采纳需求"
>
采纳
<Check className="h-3.5 w-3.5" strokeWidth={2} />
</button>
<button
onClick={() => { setRejectingReq(req); setRejectReason(''); }}
className="h-6 rounded px-1.5 text-[11px] font-medium text-red-600 transition-colors hover:bg-red-50"
className={`${REQUIREMENT_ACTION_BUTTON_BASE_CLASS} ${REQUIREMENT_ACTION_BUTTON_TONE_CLASS.danger}`}
title="拒绝"
aria-label="拒绝需求"
>
拒绝
<XCircle className="h-3.5 w-3.5" strokeWidth={1.8} />
</button>
</>
)}
@@ -779,18 +810,22 @@ function RequirementsPageContent() {
{canMutateRequirement(req) && (req.status === 'adopted' || req.status === 'planned') && canCloseRequirement(req.id, devTasksByRequirement.get(req.id) ?? []) && (
<button
onClick={() => updateRequirement(req.id, { status: 'closed' })}
className="h-6 rounded px-1.5 text-[11px] font-medium text-orange-600 transition-colors hover:bg-orange-50"
className={`${REQUIREMENT_ACTION_BUTTON_BASE_CLASS} ${REQUIREMENT_ACTION_BUTTON_TONE_CLASS.warning}`}
title="关闭"
aria-label="关闭需求"
>
关闭
<Archive className="h-3.5 w-3.5" strokeWidth={1.8} />
</button>
)}
{/* 删除：待评审/已拒绝/已关闭（已采纳后不能直接删，需走拒绝） */}
{canMutateRequirement(req) && (['pending_review', 'rejected', 'closed'] as const).includes(req.status as any) && (
<button
onClick={() => deleteRequirement(req.id)}
className="h-6 rounded px-1.5 text-[11px] font-medium text-red-500 transition-colors hover:bg-red-50"
className={`${REQUIREMENT_ACTION_BUTTON_BASE_CLASS} ${REQUIREMENT_ACTION_BUTTON_TONE_CLASS.danger}`}
title="删除"
aria-label="删除需求"
>
删除
<Trash2 className="h-3.5 w-3.5" strokeWidth={1.8} />
</button>
)}
</div>

10
apps/web/lib/requirement-table-layout.test.ts
View File

@@ -19,6 +19,16 @@ test('uses fixed table layout without horizontal scrolling for requirement list'
assert.equal(totalWidth, 100);
});
test('reserves enough width for pending-review row actions without horizontal scrolling', () => {
const sourceColumnWidth = REQUIREMENT_TABLE_COLUMN_WIDTHS[2];
const creatorColumnWidth = REQUIREMENT_TABLE_COLUMN_WIDTHS[9];
const actionColumnWidth = REQUIREMENT_TABLE_COLUMN_WIDTHS[11];
assert.ok(sourceColumnWidth <= 10);
assert.ok(creatorColumnWidth <= 4);
assert.ok(actionColumnWidth >= 20);
});
test('keeps requirement table headers on one line', () => {
assert.match(REQUIREMENT_TABLE_HEADER_CELL_CLASS, /\bwhitespace-nowrap\b/);
});

6
apps/web/lib/requirement-table-layout.ts
View File

@@ -1,11 +1,11 @@
export type RequirementTableTextColumn = 'source' | 'project' | 'type' | 'version' | 'creator';
const TEXT_COLUMN_MAX_WIDTH: Record<RequirementTableTextColumn, string> = {
source: 'max-w-[170px]',
source: 'max-w-[120px]',
project: 'max-w-[120px]',
type: 'max-w-[96px]',
version: 'max-w-[92px]',
creator: 'max-w-[96px]',
creator: 'max-w-[64px]',
};
export const REQUIREMENT_TABLE_CONTAINER_CLASS =
@@ -13,7 +13,7 @@ export const REQUIREMENT_TABLE_CONTAINER_CLASS =
export const REQUIREMENT_TABLE_CLASS = 'w-full table-fixed text-left text-[13px]';
export const REQUIREMENT_TABLE_COLUMN_WIDTHS = [6, 15, 14, 7, 6, 6, 5, 6, 7, 6, 8, 14] as const;
export const REQUIREMENT_TABLE_COLUMN_WIDTHS = [6, 15, 10, 7, 6, 6, 5, 6, 7, 4, 8, 20] as const;
export const REQUIREMENT_TABLE_HEADER_CELL_CLASS =
'px-3 py-2.5 whitespace-nowrap text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]';