shiyue/ittoview
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化知识领域裁剪因素页布局

Browse Source
This commit is contained in:
ittoview
2026-04-26 08:02:54 +01:00
parent ce3b7859cf
commit 6b0f9d0f80
1 changed files with 38 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/pages/KnowledgeAreasTailoringPage.tsx
View File

@@ -629,24 +629,31 @@ export default function KnowledgeAreasTailoringPage() {
<div
className={clsx(
'overflow-hidden border border-gray-100 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800',
'relative overflow-hidden border border-gray-100 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800',
isFullScreen ? 'flex h-full flex-col border-0 rounded-none shadow-none' : 'rounded-2xl min-h-[calc(100vh-12rem)] flex flex-col'
)}
>
{renderToolbar(isFullScreen)}
<div className={clsx('flex-1 overflow-auto', isFullScreen && 'tailoring-no-scrollbar')}>
<table className="min-w-[1120px] w-full border-collapse">
<div
className={clsx(
'flex-1 overflow-y-auto overflow-x-hidden',
isPracticeMode && currentItem && 'pb-56 md:pb-52',
isFullScreen && 'tailoring-no-scrollbar'
)}
>
<table className="w-full table-fixed border-collapse">
<colgroup>
<col className="w-[12rem] sm:w-[14rem] lg:w-[16rem]" />
<col />
</colgroup>
<thead>
<tr>
<th className="sticky left-0 top-0 z-20 min-w-[220px] border border-gray-200 bg-gray-100 px-4 py-3 text-left text-sm font-semibold text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
<th className="sticky left-0 top-0 z-20 border border-gray-200 bg-gray-100 px-4 py-3 text-left text-sm font-semibold text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
知识领域
</th>
<th className="sticky top-0 z-10 min-w-[260px] border border-gray-200 bg-gray-100 px-4 py-3 text-left text-sm font-semibold text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
敏捷裁剪因素
</th>
<th className="sticky top-0 z-10 min-w-[640px] border border-gray-200 bg-gray-100 px-4 py-3 text-left text-sm font-semibold text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
说明
<th className="sticky top-0 z-10 border border-gray-200 bg-gray-100 px-4 py-3 text-left text-sm font-semibold text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
裁剪因素与说明
</th>
</tr>
</thead>
@@ -707,26 +714,31 @@ export default function KnowledgeAreasTailoringPage() {
)}
<td className="border border-gray-200 p-0 align-top dark:border-gray-700">
<FactorTitleCell
item={item}
isPracticeMode={isPracticeMode}
isAnswered={isAnswered}
isCurrent={isCurrent}
showAnswer={isShowingAnswer}
onLongPress={handleLongPress}
onLongPressEnd={handleLongPressEnd}
onClick={handleFactorClick}
/>
</td>
<td className="border border-gray-200 align-top dark:border-gray-700">
<div
className={clsx(
'min-h-[72px] px-4 py-4 text-sm leading-7 text-gray-700 dark:text-gray-200',
isCurrent && 'border-l-2 border-indigo-500 bg-indigo-50/50 dark:bg-indigo-900/10'
'overflow-hidden bg-white dark:bg-gray-800',
isCurrent && 'bg-indigo-50/30 dark:bg-indigo-900/10'
)}
>
{item.description}
<FactorTitleCell
item={item}
isPracticeMode={isPracticeMode}
isAnswered={isAnswered}
isCurrent={isCurrent}
showAnswer={isShowingAnswer}
onLongPress={handleLongPress}
onLongPressEnd={handleLongPressEnd}
onClick={handleFactorClick}
/>
<div
className={clsx(
'border-t border-gray-100 px-4 py-4 text-sm leading-7 text-gray-700 dark:border-gray-700 dark:text-gray-200',
isCurrent && 'border-l-2 border-indigo-500 bg-indigo-50/50 dark:bg-indigo-900/10'
)}
>
{item.description}
</div>
</div>
</td>
</tr>
@@ -738,7 +750,7 @@ export default function KnowledgeAreasTailoringPage() {
</div>
{isPracticeMode && currentItem && (
<div className="border-t border-gray-200 bg-white/90 backdrop-blur-md dark:border-gray-700 dark:bg-gray-800/90">
<div className="absolute inset-x-0 bottom-0 z-20 border-t border-gray-200 bg-white/92 shadow-[0_-12px_32px_rgba(15,23,42,0.08)] backdrop-blur-md dark:border-gray-700 dark:bg-gray-800/92 dark:shadow-none">
<div className="px-6 py-4">
<div className="border-b border-gray-200/70 pb-4 dark:border-gray-700/70">
<div className="flex items-center justify-center gap-3">