优化 ITTO 明细展示

- 为 P1.2 输出"项目管理计划"添加明细(子管理计划、基准、其他组件)
- 将明细展示从纵向列表改为横向显示,用顿号分隔
- 节省空间,提升可读性

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>
This commit is contained in:
ittoview
2026-02-14 14:07:36 +00:00
parent 145e6e7549
commit eb464cff12
2 changed files with 34 additions and 28 deletions

View File

@@ -244,15 +244,14 @@ export function ProcessDetailPage() {
<div className="font-medium text-gray-900 dark:text-white text-sm">{inputDetail.name || inputDetail.id}</div>
{inputDetail.nameEn && <div className="text-xs text-gray-500 dark:text-gray-400">{inputDetail.nameEn}</div>}
{hasDetail && (
<div className="mt-2 pl-3 border-l-2 border-blue-200 dark:border-blue-700">
<ul className="space-y-1">
{inputDetail.detail.map((item: any, idx: number) => (
<li key={item.id || idx} className="text-xs text-gray-600 dark:text-gray-400 flex items-start gap-1.5">
<span className="text-blue-500 dark:text-blue-400 mt-0.5"></span>
<span>{item.label}</span>
</li>
))}
</ul>
<div className="mt-1.5 text-xs text-gray-600 dark:text-gray-400">
<span className="text-blue-600 dark:text-blue-400"></span>
{inputDetail.detail.map((item: any, idx: number) => (
<span key={item.id || idx}>
{item.label}
{idx < inputDetail.detail.length - 1 && '、'}
</span>
))}
</div>
)}
{inputDetail.note && (
@@ -314,15 +313,14 @@ export function ProcessDetailPage() {
<div className="font-medium text-gray-900 dark:text-white text-sm">{toolDetail.name || toolDetail.id}</div>
{toolDetail.nameEn && <div className="text-xs text-gray-500 dark:text-gray-400">{toolDetail.nameEn}</div>}
{hasDetail && (
<div className="mt-2 pl-3 border-l-2 border-amber-200 dark:border-amber-700">
<ul className="space-y-1">
{toolDetail.detail.map((item: any, idx: number) => (
<li key={item.id || idx} className="text-xs text-gray-600 dark:text-gray-400 flex items-start gap-1.5">
<span className="text-amber-500 dark:text-amber-400 mt-0.5"></span>
<span>{item.label}</span>
</li>
))}
</ul>
<div className="mt-1.5 text-xs text-gray-600 dark:text-gray-400">
<span className="text-amber-600 dark:text-amber-400"></span>
{toolDetail.detail.map((item: any, idx: number) => (
<span key={item.id || idx}>
{item.label}
{idx < toolDetail.detail.length - 1 && '、'}
</span>
))}
</div>
)}
{toolDetail.note && (
@@ -384,15 +382,14 @@ export function ProcessDetailPage() {
<div className="font-medium text-gray-900 dark:text-white text-sm">{outputDetail.name || outputDetail.id}</div>
{outputDetail.nameEn && <div className="text-xs text-gray-500 dark:text-gray-400">{outputDetail.nameEn}</div>}
{hasDetail && (
<div className="mt-2 pl-3 border-l-2 border-emerald-200 dark:border-emerald-700">
<ul className="space-y-1">
{outputDetail.detail.map((item: any, idx: number) => (
<li key={item.id || idx} className="text-xs text-gray-600 dark:text-gray-400 flex items-start gap-1.5">
<span className="text-emerald-500 dark:text-emerald-400 mt-0.5"></span>
<span>{item.label}</span>
</li>
))}
</ul>
<div className="mt-1.5 text-xs text-gray-600 dark:text-gray-400">
<span className="text-emerald-600 dark:text-emerald-400"></span>
{outputDetail.detail.map((item: any, idx: number) => (
<span key={item.id || idx}>
{item.label}
{idx < outputDetail.detail.length - 1 && '、'}
</span>
))}
</div>
)}
{outputDetail.note && (