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

src/pages/KnowledgeAreasTailoringPage.tsx

@@ -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')}>
+        <div
-          <table className="min-w-[1120px] w-full border-collapse">
+          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 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>
-                <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>
               </tr>
             </thead>
@@ -707,6 +714,12 @@ export default function KnowledgeAreasTailoringPage() {
                       )}
 
                       <td className="border border-gray-200 p-0 align-top dark:border-gray-700">
+                        <div
+                          className={clsx(
+                            'overflow-hidden bg-white dark:bg-gray-800',
+                            isCurrent && 'bg-indigo-50/30 dark:bg-indigo-900/10'
+                          )}
+                        >
                           <FactorTitleCell
                             item={item}
                             isPracticeMode={isPracticeMode}
@@ -717,17 +730,16 @@ export default function KnowledgeAreasTailoringPage() {
                             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',
+                              '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">