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

style: 切换为现代 SaaS Dashboard 风格（Linear/Vercel/Notion 风）

Browse Source 
- 调色板：zinc 中性色 + 冷静蓝色（#3b82f6）+ 卡片阴影 token
- Sidebar：紧凑 60 宽度，加入顶部搜索框，分组导航，圆角 8px
- 卡片：rounded-2xl + shadow-sm/md，留白节奏统一
- 表格：圆角卡片包裹，灰色表头小写大写字母 tracking
- 表单：h-9 输入框，圆角 8px，focus ring 用半透明蓝
- 按钮分级：实心蓝（主操作）/ 边框白底（次操作）/ 暗黑实心（对比强调）
- 状态徽章：ring-1 inset 内边框，色板更柔和

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Script Generator
2026-06-08 12:46:02 +08:00
parent 0099b23a86
commit e0120c470c
9 changed files with 364 additions and 450 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
apps/web/app/globals.css
View File

@@ -1,52 +1,47 @@
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
:root { :root {
--bg: #f7f4ee; /* Surfaces — zinc neutrals */
--bg-elevated: #fbf9f4; --bg: #fafafa;
--ink: #1a1814; --bg-card: #ffffff;
--ink-soft: #4a4640; --bg-subtle: #f4f4f5;
--ink-muted: #8a847a; --bg-hover: #f4f4f5;
--line: #e6e0d4;
--line-soft: #efeae0; /* Text */
--accent: #2563eb; --ink: #18181b;
--accent-soft: #dbeafe; --ink-soft: #52525b;
--ink-muted: #a1a1aa;
/* Borders */
--line: #e4e4e7;
--line-soft: #f4f4f5;
/* Brand — calm blue */
--accent: #3b82f6;
--accent-hover: #2563eb;
--accent-soft: #eff6ff;
--accent-ring: rgba(59, 130, 246, 0.15);
/* Shadow */
--shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.04);
--shadow-md: 0 4px 12px -2px rgba(24, 24, 27, 0.06), 0 2px 4px -1px rgba(24, 24, 27, 0.04);
} }
html, body { html, body {
background: var(--bg); background: var(--bg);
color: var(--ink); color: var(--ink);
font-family: 'DM Sans', system-ui, sans-serif; font-family: 'Inter', system-ui, sans-serif;
font-feature-settings: 'ss01', 'ss02', 'cv11'; font-feature-settings: 'cv11', 'ss01';
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} font-size: 14px;
.font-display {
font-family: 'Fraunces', Georgia, serif;
font-feature-settings: 'ss01';
} }
.font-mono { .font-mono {
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
} }
.grain::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes fade-up {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
animation: fade-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

213
apps/web/app/products/[id]/page.tsx
View File

@@ -11,9 +11,9 @@ import { RequirementForm } from '@/components/product/RequirementForm';
import { ProductForm } from '@/components/product/ProductForm'; import { ProductForm } from '@/components/product/ProductForm';
const TABS = [ const TABS = [
{ key: 'requirements' as const, label: '需求池', index: '01' }, { key: 'requirements' as const, label: '需求池' },
{ key: 'projects' as const, label: '项目', index: '02' }, { key: 'projects' as const, label: '项目' },
{ key: 'versions' as const, label: '版本', index: '03' }, { key: 'versions' as const, label: '版本' },
]; ];
export default function ProductDetailPage() { export default function ProductDetailPage() {
@@ -61,7 +61,7 @@ export default function ProductDetailPage() {
}; };
const handleDeleteProduct = async () => { const handleDeleteProduct = async () => {
if (confirm('确定要删除此产品吗？此操作不可撤销。')) { if (confirm('确定删除该产品？此操作不可撤销。')) {
await deleteProduct(productId); await deleteProduct(productId);
router.push('/products'); router.push('/products');
} }
@@ -69,133 +69,128 @@ export default function ProductDetailPage() {
if (!currentProduct) { if (!currentProduct) {
return ( return (
<div className="flex h-full items-center justify-center"> <div className="flex h-full items-center justify-center text-[13px] text-[var(--ink-muted)]">
<p className="font-mono text-xs uppercase tracking-[0.2em] text-[var(--ink-muted)]">Loading...</p> 加载中…
</div> </div>
); );
} }
return ( return (
<div className="relative min-h-full"> <div className="flex h-full flex-col">
<div className="grain pointer-events-none absolute inset-0" /> <header className="flex h-14 shrink-0 items-center justify-between border-b border-[var(--line)] bg-[var(--bg-card)] px-6">
<div className="relative mx-auto max-w-[1280px] px-12 py-12"> <div className="flex items-center gap-2">
<button <button
onClick={() => router.push('/products')} onClick={() => router.push('/products')}
className="mb-8 flex items-center gap-1.5 text-[12px] text-[var(--ink-muted)] transition-colors hover:text-[var(--ink)]" className="flex h-7 items-center gap-1 rounded-md px-1.5 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} /> <ChevronLeft className="h-3.5 w-3.5" strokeWidth={2} />
<span>返回产品列表</span> 产品
</button> </button>
<span className="text-[var(--ink-muted)]">/</span>
<h1 className="text-[15px] font-semibold tracking-tight text-[var(--ink)]">
{currentProduct.name}
</h1>
</div>
<div className="flex gap-1.5">
<button
onClick={() => setEditingProduct(true)}
className="flex h-8 items-center gap-1 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-2.5 text-[12.5px] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)] hover:text-[var(--ink)]"
>
<Pencil className="h-3 w-3" strokeWidth={2} />
编辑
</button>
<button
onClick={handleDeleteProduct}
className="flex h-8 items-center gap-1 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-2.5 text-[12.5px] text-[var(--ink-soft)] hover:border-red-200 hover:bg-red-50 hover:text-red-600"
>
<Trash2 className="h-3 w-3" strokeWidth={2} />
删除
</button>
</div>
</header>
<header className="mb-12 flex items-end justify-between border-b border-[var(--line)] pb-10"> <div className="border-b border-[var(--line)] bg-[var(--bg-card)] px-6">
<div className="flex-1"> {currentProduct.description && (
<p className="font-mono text-[11px] uppercase tracking-[0.24em] text-[var(--ink-muted)]"> <p className="line-clamp-2 py-3 text-[13px] text-[var(--ink-soft)]">{currentProduct.description}</p>
── Product
</p>
<h1 className="mt-4 font-display text-[56px] font-medium leading-[1] tracking-[-0.02em] text-[var(--ink)]">
{currentProduct.name}
</h1>
{currentProduct.description && (
<p className="mt-4 max-w-2xl text-[14px] leading-relaxed text-[var(--ink-soft)]">
{currentProduct.description}
</p>
)}
</div>
<div className="flex gap-2">
<button
onClick={() => setEditingProduct(true)}
className="flex items-center gap-1.5 rounded-md border border-[var(--line)] bg-[var(--bg-elevated)] px-3 py-1.5 text-[13px] text-[var(--ink-soft)] hover:border-[var(--ink)] hover:text-[var(--ink)]"
>
<Pencil className="h-3.5 w-3.5" strokeWidth={1.75} />
编辑
</button>
<button
onClick={handleDeleteProduct}
className="flex items-center gap-1.5 rounded-md border border-[var(--line)] bg-[var(--bg-elevated)] px-3 py-1.5 text-[13px] text-[var(--ink-soft)] hover:border-[var(--accent)] hover:text-[var(--accent)]"
>
<Trash2 className="h-3.5 w-3.5" strokeWidth={1.75} />
删除
</button>
</div>
</header>
{editingProduct && (
<div className="mb-10 animate-fade-up rounded-xl border border-[var(--line)] bg-[var(--bg-elevated)] p-8">
<p className="mb-4 font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">── 编辑产品</p>
<ProductForm
initialData={{ name: currentProduct.name, description: currentProduct.description }}
onSubmit={async (data) => {
await updateProduct(productId, data);
setEditingProduct(false);
await fetchProduct(productId);
}}
onCancel={() => setEditingProduct(false)}
/>
</div>
)} )}
<div className="flex gap-1">
<div className="mb-8 flex gap-8 border-b border-[var(--line)]">
{TABS.map((tab) => ( {TABS.map((tab) => (
<button <button
key={tab.key} key={tab.key}
onClick={() => setActiveTab(tab.key)} onClick={() => setActiveTab(tab.key)}
className={`relative flex items-baseline gap-2 pb-3 transition-colors ${ className={`relative h-9 px-3 text-[13px] transition-colors ${
activeTab === tab.key activeTab === tab.key
? 'text-[var(--ink)]' ? 'font-medium text-[var(--ink)]'
: 'text-[var(--ink-muted)] hover:text-[var(--ink-soft)]' : 'text-[var(--ink-soft)] hover:text-[var(--ink)]'
}`} }`}
> >
<span className="font-mono text-[10px] tabular-nums">{tab.index}</span> {tab.label}
<span className="text-[14px] font-medium tracking-tight">{tab.label}</span>
{activeTab === tab.key && ( {activeTab === tab.key && (
<span className="absolute -bottom-px left-0 right-0 h-px bg-[var(--ink)]" /> <span className="absolute bottom-0 left-2 right-2 h-0.5 rounded-full bg-[var(--accent)]" />
)} )}
</button> </button>
))} ))}
</div> </div>
</div>
{activeTab === 'requirements' && ( <div className="flex-1 overflow-y-auto">
<div className="animate-fade-up"> <div className="mx-auto max-w-[1400px] p-6">
{(showReqForm || editingReq) && ( {editingProduct && (
<div className="mb-8 rounded-xl border border-[var(--line)] bg-[var(--bg-elevated)] p-8"> <div className="mb-5 rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] p-6 shadow-[var(--shadow-sm)]">
<p className="mb-4 font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]"> <h3 className="mb-4 text-[14px] font-semibold text-[var(--ink)]">编辑产品</h3>
── {editingReq ? '编辑需求' : '新建需求'} <ProductForm
</p> initialData={{ name: currentProduct.name, description: currentProduct.description }}
<RequirementForm onSubmit={async (data) => {
initialData={editingReq || undefined} await updateProduct(productId, data);
onSubmit={editingReq ? handleUpdateReq : handleCreateReq} setEditingProduct(false);
onCancel={() => { await fetchProduct(productId);
setShowReqForm(false); }}
setEditingReq(null); onCancel={() => setEditingProduct(false)}
}} />
/> </div>
</div> )}
)}
<RequirementTable
requirements={requirements as any}
statusFilter={statusFilter}
onFilterChange={handleFilterChange}
onEdit={(req) => setEditingReq(req)}
onStatusChange={(id, status) => updateStatus(productId, id, status)}
onDelete={(id) => deleteRequirement(productId, id)}
onCreate={() => setShowReqForm(true)}
/>
</div>
)}
{activeTab === 'projects' && ( {activeTab === 'requirements' && (
<div className="animate-fade-up py-24 text-center"> <>
<p className="font-display text-2xl text-[var(--ink-muted)]">项目管理</p> {(showReqForm || editingReq) && (
<p className="mt-2 text-[13px] text-[var(--ink-muted)]">即将到来 · Coming Soon</p> <div className="mb-5 rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] p-6 shadow-[var(--shadow-sm)]">
</div> <h3 className="mb-4 text-[14px] font-semibold text-[var(--ink)]">
)} {editingReq ? '编辑需求' : '新建需求'}
</h3>
<RequirementForm
initialData={editingReq || undefined}
onSubmit={editingReq ? handleUpdateReq : handleCreateReq}
onCancel={() => {
setShowReqForm(false);
setEditingReq(null);
}}
/>
</div>
)}
<RequirementTable
requirements={requirements as any}
statusFilter={statusFilter}
onFilterChange={handleFilterChange}
onEdit={(req) => setEditingReq(req)}
onStatusChange={(id, status) => updateStatus(productId, id, status)}
onDelete={(id) => deleteRequirement(productId, id)}
onCreate={() => setShowReqForm(true)}
/>
</>
)}
{activeTab === 'versions' && ( {activeTab === 'projects' && (
<div className="animate-fade-up py-24 text-center"> <div className="rounded-2xl border border-dashed border-[var(--line)] bg-[var(--bg-card)] py-20 text-center text-[13px] text-[var(--ink-muted)]">
<p className="font-display text-2xl text-[var(--ink-muted)]">版本管理</p> 项目管理功能开发中
<p className="mt-2 text-[13px] text-[var(--ink-muted)]">即将到来 · Coming Soon</p> </div>
</div> )}
)}
{activeTab === 'versions' && (
<div className="rounded-2xl border border-dashed border-[var(--line)] bg-[var(--bg-card)] py-20 text-center text-[13px] text-[var(--ink-muted)]">
版本管理功能开发中
</div>
)}
</div>
</div> </div>
</div> </div>
); );

122
apps/web/app/products/page.tsx
View File

@@ -27,85 +27,67 @@ export default function ProductsPage() {
}; };
return ( return (
<div className="relative min-h-full"> <div className="flex h-full flex-col">
<div className="grain pointer-events-none absolute inset-0" /> <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>
<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)]"
>
<Plus className="h-3.5 w-3.5" strokeWidth={2.5} />
新建产品
</button>
</header>
<div className="relative mx-auto max-w-[1280px] px-12 py-16"> <div className="flex-1 overflow-y-auto">
<header className="mb-16 flex items-end justify-between border-b border-[var(--line)] pb-10"> <div className="mx-auto max-w-[1400px] p-6">
<div className="flex-1"> <div className="mb-5 flex items-center gap-2">
<p className="font-mono text-[11px] uppercase tracking-[0.24em] text-[var(--ink-muted)]"> <div className="relative max-w-xs flex-1">
── 02 / Products <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} />
</p>
<h1 className="mt-4 font-display text-[64px] font-medium leading-[0.95] tracking-[-0.02em] text-[var(--ink)]">
产品<span className="italic text-[var(--accent)]">目录</span>
</h1>
<p className="mt-4 max-w-md text-[14px] leading-relaxed text-[var(--ink-soft)]">
组织内所有产品的索引。每个产品聚合需求池、发布版本与归属项目。
</p>
</div>
<div className="flex items-center gap-3">
<div className="relative">
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--ink-muted)]" strokeWidth={1.75} />
<input <input
value={search} value={search}
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
placeholder="搜索产品" placeholder="搜索产品名称"
className="w-56 rounded-md border border-[var(--line)] bg-[var(--bg-elevated)] py-2 pl-9 pr-3 text-[13px] text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--ink)] focus:outline-none" 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>
<button
onClick={() => setShowForm(true)}
className="flex items-center gap-2 rounded-md bg-[var(--ink)] px-4 py-2 text-[13px] font-medium text-[var(--bg)] transition-all hover:bg-[var(--accent)]"
>
<Plus className="h-4 w-4" strokeWidth={2} />
新建产品
</button>
</div> </div>
</header>
<div className="mb-8 flex items-baseline gap-4"> {showForm && (
<p className="font-mono text-[11px] uppercase tracking-[0.2em] text-[var(--ink-muted)]"> <div className="mb-5 rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] p-6 shadow-[var(--shadow-sm)]">
Showing <h2 className="mb-4 text-[14px] font-semibold text-[var(--ink)]">新建产品</h2>
</p> <ProductForm onSubmit={handleCreate} onCancel={() => setShowForm(false)} />
<p className="font-display text-[18px] font-semibold tabular-nums text-[var(--ink)]"> </div>
{String(filtered.length).padStart(2, '0')} )}
</p>
<span className="text-[12px] text-[var(--ink-muted)]">/ {String(products.length).padStart(2, '0')} 个产品</span> {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>
) : (
<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>
)}
</div> </div>
{showForm && (
<div className="mb-10 animate-fade-up rounded-xl border border-[var(--line)] bg-[var(--bg-elevated)] p-8">
<p className="mb-4 font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">── 新建产品</p>
<ProductForm onSubmit={handleCreate} onCancel={() => setShowForm(false)} />
</div>
)}
{loading ? (
<div className="py-32 text-center">
<p className="font-mono text-xs uppercase tracking-[0.2em] text-[var(--ink-muted)]">Loading...</p>
</div>
) : filtered.length === 0 ? (
<div className="py-32 text-center">
<p className="font-display text-2xl text-[var(--ink-muted)]">
{search ? '没有匹配的产品' : '尚未创建任何产品'}
</p>
<p className="mt-2 text-[13px] text-[var(--ink-muted)]">
{search ? '试试其他关键字' : '点击右上角按钮，创建第一个产品'}
</p>
</div>
) : (
<div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
{filtered.map((product, idx) => (
<ProductCard
key={product.id}
product={product as any}
index={idx}
onClick={(id) => router.push(`/products/${id}`)}
/>
))}
</div>
)}
</div> </div>
</div> </div>
); );

152
apps/web/components/layout/Sidebar.tsx
View File

@@ -1,17 +1,24 @@
'use client'; 'use client';
import { usePathname, useRouter } from 'next/navigation'; import { usePathname, useRouter } from 'next/navigation';
import { Inbox, Package, FolderKanban, Tag, Users, Sparkles } from 'lucide-react'; import { Inbox, Package, FolderKanban, Tag, Users, LayoutGrid, Search } from 'lucide-react';
const NAV_ITEMS = [ const NAV_GROUPS = [
{ label: '与我相关', path: '/workspace', icon: Inbox, index: '01' }, {
{ label: '产品', path: '/products', icon: Package, index: '02' }, label: '工作区',
{ label: '项目', path: '/projects', icon: FolderKanban, index: '03' }, items: [
{ label: '版本', path: '/versions', icon: Tag, index: '04' }, { label: '与我相关', path: '/workspace', icon: Inbox },
]; { label: '产品', path: '/products', icon: Package },
{ label: '项目', path: '/projects', icon: FolderKanban },
const ADMIN_ITEMS = [ { label: '版本', path: '/versions', icon: Tag },
{ label: '成员管理', path: '/admin/members', icon: Users }, ],
},
{
label: '管理',
items: [
{ label: '成员', path: '/admin/members', icon: Users },
],
},
]; ];
export function Sidebar() { export function Sidebar() {
@@ -22,93 +29,62 @@ export function Sidebar() {
pathname === path || (path !== '/' && pathname.startsWith(path)); pathname === path || (path !== '/' && pathname.startsWith(path));
return ( return (
<aside <aside className="flex h-screen w-60 flex-col border-r border-[var(--line)] bg-[var(--bg-card)]">
className="relative flex h-screen w-64 flex-col border-r border-[var(--line)] bg-[var(--bg-elevated)]" <div className="flex h-14 items-center gap-2 px-4">
style={{ background: 'var(--bg-elevated)' }} <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-[var(--accent)]">
> <LayoutGrid className="h-4 w-4 text-white" strokeWidth={2.25} />
<div className="flex h-20 items-end px-6 pb-4"> </div>
<div className="flex items-center gap-2.5"> <span className="text-[14px] font-semibold tracking-tight text-[var(--ink)]">FTB</span>
<div className="flex h-8 w-8 items-center justify-center rounded-md bg-[var(--ink)]"> </div>
<Sparkles className="h-4 w-4 text-[var(--bg)]" strokeWidth={2.5} />
</div> <div className="px-3 pb-2">
<div> <div className="relative">
<p className="font-display text-base font-semibold leading-none tracking-tight text-[var(--ink)]"> <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} />
FTB <input
</p> placeholder="搜索"
<p className="mt-0.5 text-[10px] uppercase tracking-[0.18em] text-[var(--ink-muted)]"> className="h-8 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-subtle)] pl-8 pr-2 text-[12.5px] text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:bg-[var(--bg-card)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]"
Project Studio />
</p>
</div>
</div> </div>
</div> </div>
<div className="px-6 pb-3"> <nav className="flex-1 px-2 pt-2">
<p className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]"> {NAV_GROUPS.map((group) => (
── Workspace <div key={group.label} className="mb-4">
</p> <p className="mb-1 px-2 text-[11px] font-medium text-[var(--ink-muted)]">
</div> {group.label}
</p>
<nav className="flex-1 px-3"> {group.items.map((item) => {
{NAV_ITEMS.map((item) => { const Icon = item.icon;
const Icon = item.icon; const active = isActive(item.path);
const active = isActive(item.path); return (
return ( <button
<button key={item.path}
key={item.path} onClick={() => router.push(item.path)}
onClick={() => router.push(item.path)} className={`flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left text-[13px] transition-colors ${
className={`group relative flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-left transition-all ${ active
active ? 'bg-[var(--accent-soft)] font-medium text-[var(--accent-hover)]'
? 'bg-[var(--accent-soft)] text-[var(--accent)]' : 'text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)] hover:text-[var(--ink)]'
: 'text-[var(--ink-soft)] hover:bg-[var(--line-soft)] hover:text-[var(--ink)]' }`}
}`} >
> <Icon className="h-4 w-4 shrink-0" strokeWidth={1.75} />
<span className={`font-mono text-[10px] tabular-nums ${active ? 'text-[var(--accent)]' : 'text-[var(--ink-muted)]'}`}> <span className="truncate">{item.label}</span>
{item.index} </button>
</span> );
<Icon className="h-[18px] w-[18px]" strokeWidth={1.75} /> })}
<span className="text-[14px] font-medium tracking-tight">{item.label}</span> </div>
{active && ( ))}
<span className="ml-auto h-1 w-1 rounded-full bg-[var(--accent)]" />
)}
</button>
);
})}
</nav> </nav>
<div className="border-t border-[var(--line)] px-3 py-4"> <div className="border-t border-[var(--line)] p-2">
<p className="mb-2 px-3 font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]"> <button className="flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-[var(--bg-subtle)]">
── Admin <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[var(--accent)] text-[11px] font-semibold text-white">
</p>
{ADMIN_ITEMS.map((item) => {
const Icon = item.icon;
const active = isActive(item.path);
return (
<button
key={item.path}
onClick={() => router.push(item.path)}
className={`flex w-full items-center gap-3 rounded-md px-3 py-2 text-left transition-all ${
active
? 'bg-[var(--accent-soft)] text-[var(--accent)]'
: 'text-[var(--ink-soft)] hover:bg-[var(--line-soft)] hover:text-[var(--ink)]'
}`}
>
<Icon className="h-[18px] w-[18px]" strokeWidth={1.75} />
<span className="text-[14px] font-medium tracking-tight">{item.label}</span>
</button>
);
})}
</div>
<div className="border-t border-[var(--line)] px-6 py-4">
<div className="flex items-center gap-3">
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-[var(--ink)] font-display text-xs font-semibold text-[var(--bg)]">
A A
</div> </div>
<div className="min-w-0"> <div className="min-w-0 flex-1">
<p className="truncate text-[13px] font-medium text-[var(--ink)]">Admin</p> <p className="truncate text-[13px] font-medium text-[var(--ink)]">Admin</p>
<p className="truncate text-[11px] text-[var(--ink-muted)]">administrator</p> <p className="truncate text-[11px] text-[var(--ink-muted)]">管理员</p>
</div> </div>
</div> </button>
</div> </div>
</aside> </aside>
); );

64
apps/web/components/product/ProductCard.tsx
View File

@@ -12,55 +12,41 @@ interface ProductWithCount {
interface Props { interface Props {
product: ProductWithCount; product: ProductWithCount;
index: number;
onClick: (id: string) => void; onClick: (id: string) => void;
} }
export function ProductCard({ product, index, onClick }: Props) { export function ProductCard({ product, onClick }: Props) {
const reqCount = product._count?.requirements ?? 0; const reqCount = product._count?.requirements ?? 0;
const projCount = product._count?.projects ?? 0; const projCount = product._count?.projects ?? 0;
return ( return (
<article <div
onClick={() => onClick(product.id)} onClick={() => onClick(product.id)}
style={{ animationDelay: `${index * 60}ms` }} className="group cursor-pointer rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] p-5 transition-all hover:border-[var(--ink-muted)] hover:shadow-[var(--shadow-md)]"
className="group animate-fade-up relative cursor-pointer overflow-hidden rounded-xl border border-[var(--line)] bg-[var(--bg-elevated)] p-6 transition-all duration-300 hover:-translate-y-0.5 hover:border-[var(--ink)] hover:shadow-[0_12px_32px_-12px_rgba(26,24,20,0.18)]"
> >
<div className="flex items-start justify-between"> <div className="mb-4 flex items-start gap-3">
<span className="font-mono text-[10px] tabular-nums uppercase tracking-[0.18em] text-[var(--ink-muted)]"> <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[var(--accent-soft)]">
№ {String(index + 1).padStart(3, '0')} <Package className="h-[18px] w-[18px] text-[var(--accent-hover)]" strokeWidth={1.75} />
</span> </div>
<Package className="h-4 w-4 text-[var(--ink-muted)] transition-colors group-hover:text-[var(--accent)]" strokeWidth={1.75} /> <div className="min-w-0 flex-1">
</div> <h3 className="truncate text-[14px] font-semibold text-[var(--ink)]">{product.name}</h3>
<p className="mt-1 line-clamp-2 text-[12.5px] leading-relaxed text-[var(--ink-muted)]">
<h3 className="mt-6 font-display text-[26px] font-medium leading-[1.15] tracking-tight text-[var(--ink)]"> {product.description || '暂无描述'}
{product.name} </p>
</h3>
{product.description ? (
<p className="mt-2 line-clamp-2 text-[13px] leading-relaxed text-[var(--ink-soft)]">
{product.description}
</p>
) : (
<p className="mt-2 text-[13px] italic text-[var(--ink-muted)]">暂无描述</p>
)}
<div className="mt-8 flex items-end justify-between border-t border-[var(--line-soft)] pt-4">
<div className="flex gap-6">
<div>
<p className="font-display text-2xl font-semibold tabular-nums text-[var(--ink)]">{reqCount}</p>
<p className="mt-0.5 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">需求</p>
</div>
<div className="h-10 w-px bg-[var(--line-soft)]" />
<div>
<p className="font-display text-2xl font-semibold tabular-nums text-[var(--ink)]">{projCount}</p>
<p className="mt-0.5 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">项目</p>
</div>
</div> </div>
<span className="font-mono text-[11px] text-[var(--ink-muted)] opacity-0 transition-opacity group-hover:opacity-100">
→
</span>
</div> </div>
</article>
<div className="flex items-center gap-4 border-t border-[var(--line-soft)] pt-3">
<div className="flex items-baseline gap-1">
<span className="text-[13px] font-semibold tabular-nums text-[var(--ink)]">{reqCount}</span>
<span className="text-[11px] text-[var(--ink-muted)]">需求</span>
</div>
<div className="h-3 w-px bg-[var(--line)]" />
<div className="flex items-baseline gap-1">
<span className="text-[13px] font-semibold tabular-nums text-[var(--ink)]">{projCount}</span>
<span className="text-[11px] text-[var(--ink-muted)]">项目</span>
</div>
</div>
</div>
); );
} }

20
apps/web/components/product/ProductForm.tsx
View File

@@ -19,21 +19,21 @@ export function ProductForm({ initialData, onSubmit, onCancel }: Props) {
}; };
return ( return (
<form onSubmit={handleSubmit} className="space-y-5"> <form onSubmit={handleSubmit} className="space-y-4">
<div> <div>
<label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]"> <label className="mb-1.5 block text-[12px] font-medium text-[var(--ink-soft)]">
产品名称 产品名称<span className="ml-0.5 text-red-500">*</span>
</label> </label>
<input <input
type="text" type="text"
value={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={(e) => setName(e.target.value)}
placeholder="例如：FTB 智能项目管理" placeholder="输入产品名称"
className="mt-2 block w-full border-0 border-b border-[var(--line)] bg-transparent pb-2 font-display text-2xl text-[var(--ink)] placeholder:font-display placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none" className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-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>
<div> <div>
<label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]"> <label className="mb-1.5 block text-[12px] font-medium text-[var(--ink-soft)]">
描述 描述
</label> </label>
<textarea <textarea
@@ -41,22 +41,22 @@ export function ProductForm({ initialData, onSubmit, onCancel }: Props) {
onChange={(e) => setDescription(e.target.value)} onChange={(e) => setDescription(e.target.value)}
rows={3} rows={3}
placeholder="一句话讲清楚这个产品做什么" placeholder="一句话讲清楚这个产品做什么"
className="mt-2 block w-full resize-none border-0 border-b border-[var(--line)] bg-transparent pb-2 text-[14px] leading-relaxed text-[var(--ink-soft)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none" className="w-full resize-none rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 py-2 text-[13px] leading-relaxed 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="flex justify-end gap-2 pt-2"> <div className="flex justify-end gap-2 pt-2">
<button <button
type="button" type="button"
onClick={onCancel} onClick={onCancel}
className="rounded-md px-4 py-2 text-[13px] text-[var(--ink-soft)] hover:bg-[var(--line-soft)]" 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)]"
> >
取消 取消
</button> </button>
<button <button
type="submit" type="submit"
className="rounded-md bg-[var(--ink)] px-5 py-2 text-[13px] font-medium text-[var(--bg)] transition-colors hover:bg-[var(--accent)]" 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)]"
> >
{initialData ? '保存修改' : '创建产品'} {initialData ? '保存' : '创建'}
</button> </button>
</div> </div>
</form> </form>

83
apps/web/components/product/RequirementForm.tsx
View File

@@ -21,36 +21,27 @@ export function RequirementForm({ initialData, onSubmit, onCancel }: Props) {
}; };
return ( return (
<form onSubmit={handleSubmit} className="space-y-5"> <form onSubmit={handleSubmit} className="space-y-4">
<div> <Field label="标题" required>
<label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
需求标题
</label>
<input <input
type="text" type="text"
value={title} value={title}
onChange={(e) => setTitle(e.target.value)} onChange={(e) => setTitle(e.target.value)}
placeholder="一句话描述需求" placeholder="一句话描述需求"
className="mt-2 block w-full border-0 border-b border-[var(--line)] bg-transparent pb-2 font-display text-xl text-[var(--ink)] placeholder:font-display placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none" className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-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> </Field>
<div> <Field label="描述">
<label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
描述
</label>
<textarea <textarea
value={description} value={description}
onChange={(e) => setDescription(e.target.value)} onChange={(e) => setDescription(e.target.value)}
rows={4} rows={4}
placeholder="详细说明需求背景、目标、验收标准" placeholder="详细说明需求背景、目标、验收标准"
className="mt-2 block w-full resize-none border-0 border-b border-[var(--line)] bg-transparent pb-2 text-[14px] leading-relaxed text-[var(--ink-soft)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none" className="w-full resize-none rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 py-2 text-[13px] leading-relaxed text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]"
/> />
</div> </Field>
<div> <Field label="优先级">
<label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]"> <div className="flex gap-1">
优先级
</label>
<div className="mt-2 flex gap-1.5">
{Object.entries(PRIORITY_LABEL).map(([value, label]) => { {Object.entries(PRIORITY_LABEL).map(([value, label]) => {
const v = Number(value); const v = Number(value);
const active = priority === v; const active = priority === v;
@@ -59,10 +50,10 @@ export function RequirementForm({ initialData, onSubmit, onCancel }: Props) {
key={value} key={value}
type="button" type="button"
onClick={() => setPriority(v)} onClick={() => setPriority(v)}
className={`rounded-full px-3 py-1.5 text-[12px] transition-all ${ className={`h-7 rounded-md px-2.5 text-[12.5px] transition-colors ${
active active
? 'bg-[var(--ink)] text-[var(--bg)]' ? 'bg-[var(--ink)] text-white'
: 'border border-[var(--line)] text-[var(--ink-soft)] hover:border-[var(--ink)] hover:text-[var(--ink)]' : 'border border-[var(--line)] bg-[var(--bg-card)] text-[var(--ink-soft)] hover:border-[var(--ink-muted)] hover:text-[var(--ink)]'
}`} }`}
> >
{label} {label}
@@ -70,22 +61,40 @@ export function RequirementForm({ initialData, onSubmit, onCancel }: Props) {
); );
})} })}
</div> </div>
</div> </Field>
<div className="flex justify-end gap-2 pt-2"> <FormActions onCancel={onCancel} submitLabel={initialData ? '保存' : '创建'} />
<button
type="button"
onClick={onCancel}
className="rounded-md px-4 py-2 text-[13px] text-[var(--ink-soft)] hover:bg-[var(--line-soft)]"
>
取消
</button>
<button
type="submit"
className="rounded-md bg-[var(--ink)] px-5 py-2 text-[13px] font-medium text-[var(--bg)] transition-colors hover:bg-[var(--accent)]"
>
{initialData ? '保存修改' : '创建需求'}
</button>
</div>
</form> </form>
); );
} }
function Field({ label, required, children }: { label: string; required?: boolean; children: React.ReactNode }) {
return (
<div>
<label className="mb-1.5 block text-[12px] font-medium text-[var(--ink-soft)]">
{label}
{required && <span className="ml-0.5 text-red-500">*</span>}
</label>
{children}
</div>
);
}
function FormActions({ onCancel, submitLabel }: { onCancel: () => void; submitLabel: string }) {
return (
<div className="flex justify-end gap-2 pt-2">
<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)]"
>
取消
</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)]"
>
{submitLabel}
</button>
</div>
);
}

36
apps/web/components/product/RequirementStatusBadge.tsx
View File

@@ -7,41 +7,19 @@ interface Props {
status: RequirementStatus; status: RequirementStatus;
} }
const STATUS_STYLES: Record<RequirementStatus, { bg: string; text: string; dot: string }> = { const STATUS_STYLES: Record<RequirementStatus, string> = {
[RequirementStatus.DRAFT]: { [RequirementStatus.DRAFT]: 'bg-zinc-100 text-zinc-700 ring-zinc-200',
bg: 'bg-[var(--line-soft)]', [RequirementStatus.REVIEWING]: 'bg-blue-50 text-blue-700 ring-blue-200',
text: 'text-[var(--ink-soft)]', [RequirementStatus.APPROVED]: 'bg-emerald-50 text-emerald-700 ring-emerald-200',
dot: 'bg-[var(--ink-muted)]', [RequirementStatus.REJECTED]: 'bg-red-50 text-red-700 ring-red-200',
}, [RequirementStatus.DELIVERED]: 'bg-violet-50 text-violet-700 ring-violet-200',
[RequirementStatus.REVIEWING]: {
bg: 'bg-blue-50',
text: 'text-blue-700',
dot: 'bg-blue-500',
},
[RequirementStatus.APPROVED]: {
bg: 'bg-emerald-50',
text: 'text-emerald-700',
dot: 'bg-emerald-500',
},
[RequirementStatus.REJECTED]: {
bg: 'bg-red-50',
text: 'text-red-700',
dot: 'bg-red-500',
},
[RequirementStatus.DELIVERED]: {
bg: 'bg-purple-50',
text: 'text-purple-700',
dot: 'bg-purple-500',
},
}; };
export function RequirementStatusBadge({ status }: Props) { export function RequirementStatusBadge({ status }: Props) {
const style = STATUS_STYLES[status];
return ( return (
<span <span
className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium ${style.bg} ${style.text}`} className={`inline-flex items-center rounded-md px-1.5 py-0.5 text-[11px] font-medium ring-1 ring-inset ${STATUS_STYLES[status]}`}
> >
<span className={`h-1.5 w-1.5 rounded-full ${style.dot}`} />
{REQUIREMENT_STATUS_LABEL[status]} {REQUIREMENT_STATUS_LABEL[status]}
</span> </span>
); );

63
apps/web/components/product/RequirementTable.tsx
View File

@@ -37,8 +37,8 @@ export function RequirementTable({
}: Props) { }: Props) {
return ( return (
<div> <div>
<div className="mb-6 flex flex-wrap items-center justify-between gap-3"> <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
<div className="flex flex-wrap gap-1.5"> <div className="flex flex-wrap gap-1">
<FilterChip active={!statusFilter} onClick={() => onFilterChange(null)}> <FilterChip active={!statusFilter} onClick={() => onFilterChange(null)}>
全部 全部
</FilterChip> </FilterChip>
@@ -50,59 +50,52 @@ export function RequirementTable({
</div> </div>
<button <button
onClick={onCreate} onClick={onCreate}
className="rounded-md bg-[var(--ink)] px-4 py-2 text-[13px] font-medium text-[var(--bg)] transition-colors hover:bg-[var(--accent)]" className="flex h-8 items-center gap-1 rounded-lg bg-[var(--accent)] px-3 text-[13px] font-medium text-white shadow-[var(--shadow-sm)] transition-colors hover:bg-[var(--accent-hover)]"
> >
+ 新建需求 + 新建需求
</button> </button>
</div> </div>
{requirements.length === 0 ? ( {requirements.length === 0 ? (
<div className="rounded-xl border border-dashed border-[var(--line)] py-20 text-center"> <div className="rounded-2xl border border-dashed border-[var(--line)] bg-[var(--bg-card)] py-16 text-center">
<p className="font-display text-lg text-[var(--ink-muted)]">暂无需求</p> <p className="text-[14px] font-medium text-[var(--ink-soft)]">暂无需求</p>
<p className="mt-1 text-[12px] text-[var(--ink-muted)]">点击"新建需求"开始记录</p> <p className="mt-1.5 text-[12.5px] text-[var(--ink-muted)]">点击"新建需求"添加</p>
</div> </div>
) : ( ) : (
<div className="overflow-hidden rounded-xl border border-[var(--line)] bg-[var(--bg-elevated)]"> <div className="overflow-hidden rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] shadow-[var(--shadow-sm)]">
<table className="w-full text-left"> <table className="w-full text-left text-[13px]">
<thead> <thead>
<tr className="border-b border-[var(--line)] bg-[var(--bg)]"> <tr className="border-b border-[var(--line)] bg-[var(--bg-subtle)]">
<th className="w-12 py-3 pl-6 font-mono text-[10px] uppercase tracking-[0.18em] 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="py-3 font-mono text-[10px] uppercase tracking-[0.18em] 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="py-3 font-mono text-[10px] uppercase tracking-[0.18em] 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="py-3 font-mono text-[10px] uppercase tracking-[0.18em] 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="py-3 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">创建者</th> <th className="px-4 py-2.5 text-right text-[11.5px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">操作</th>
<th className="py-3 pr-6 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">操作</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{requirements.map((req, idx) => ( {requirements.map((req) => (
<tr <tr key={req.id} className="border-b border-[var(--line-soft)] last:border-0 hover:bg-[var(--bg-subtle)]">
key={req.id} <td className="max-w-md truncate px-4 py-3 font-medium text-[var(--ink)]" title={req.title}>
className="border-b border-[var(--line-soft)] transition-colors last:border-0 hover:bg-[var(--line-soft)]" {req.title}
>
<td className="py-4 pl-6 font-mono text-[11px] tabular-nums text-[var(--ink-muted)]">
{String(idx + 1).padStart(2, '0')}
</td> </td>
<td className="py-4 pr-6 font-medium text-[var(--ink)]">{req.title}</td> <td className="px-4 py-3">
<td className="py-4">
<RequirementStatusBadge status={req.status} /> <RequirementStatusBadge status={req.status} />
</td> </td>
<td className="py-4 text-[13px] text-[var(--ink-soft)]"> <td className="px-4 py-3 text-[var(--ink-soft)]">{PRIORITY_LABEL[req.priority] || '无'}</td>
{PRIORITY_LABEL[req.priority] || '无'} <td className="px-4 py-3 text-[var(--ink-soft)]">{req.creator?.name || '—'}</td>
</td> <td className="px-4 py-3 text-right">
<td className="py-4 text-[13px] text-[var(--ink-soft)]">{req.creator?.name || '—'}</td> <div className="inline-flex gap-1">
<td className="py-4 pr-6">
<div className="flex gap-1">
<button <button
onClick={() => onEdit(req)} onClick={() => onEdit(req)}
className="rounded p-1.5 text-[var(--ink-muted)] hover:bg-[var(--bg)] hover:text-[var(--ink)]" className="rounded-md p-1.5 text-[var(--ink-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--ink)]"
title="编辑" title="编辑"
> >
<Pencil className="h-3.5 w-3.5" strokeWidth={1.75} /> <Pencil className="h-3.5 w-3.5" strokeWidth={1.75} />
</button> </button>
<button <button
onClick={() => onDelete(req.id)} onClick={() => onDelete(req.id)}
className="rounded p-1.5 text-[var(--ink-muted)] hover:bg-[var(--bg)] hover:text-[var(--accent)]" className="rounded-md p-1.5 text-[var(--ink-muted)] transition-colors hover:bg-red-50 hover:text-red-600"
title="删除" title="删除"
> >
<Trash2 className="h-3.5 w-3.5" strokeWidth={1.75} /> <Trash2 className="h-3.5 w-3.5" strokeWidth={1.75} />
@@ -131,10 +124,10 @@ function FilterChip({
return ( return (
<button <button
onClick={onClick} onClick={onClick}
className={`rounded-full px-3 py-1.5 text-[12px] transition-all ${ className={`h-7 rounded-md px-2.5 text-[12.5px] transition-colors ${
active active
? 'bg-[var(--ink)] text-[var(--bg)]' ? 'bg-[var(--ink)] text-white'
: 'border border-[var(--line)] text-[var(--ink-soft)] hover:border-[var(--ink)] hover:text-[var(--ink)]' : 'border border-[var(--line)] bg-[var(--bg-card)] text-[var(--ink-soft)] hover:border-[var(--ink-muted)] hover:text-[var(--ink)]'
}`} }`}
> >
{children} {children}