修正裁剪因素页底部浮层与内容块样式

src/pages/KnowledgeAreasTailoringPage.tsx

@@ -51,11 +51,20 @@ function FactorTitleCell({
 
   if (!isPracticeMode) {
     return (
-      <div className="flex items-center gap-3 px-4 py-4 text-sm text-gray-900 dark:text-gray-100">
+      <div className="px-4 py-4">
+        <div className="flex items-start gap-3">
           <span className="inline-flex h-7 min-w-7 items-center justify-center rounded-full bg-amber-100 px-2 text-xs font-semibold text-amber-700 dark:bg-amber-900/40 dark:text-amber-300">
             {item.factorIndex + 1}
           </span>
-        <span className="font-medium leading-6">{item.title}</span>
+          <div className="min-w-0 flex-1">
+            <div className="text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">
+              {item.title}
+            </div>
+            <p className="mt-2 text-sm leading-7 text-gray-700 dark:text-gray-200">
+              {item.description}
+            </p>
+          </div>
+        </div>
       </div>
     )
   }
@@ -68,25 +77,25 @@ function FactorTitleCell({
       aria-current={isCurrent ? 'step' : undefined}
       aria-label={`裁剪因素：${item.title}`}
       className={clsx(
-        'relative flex min-h-[72px] w-full items-center gap-3 px-4 py-4 text-left transition-all duration-200 focus:outline-none',
+        'relative w-full px-4 py-4 text-left transition-all duration-200 focus:outline-none',
         isCurrent
           ? 'bg-indigo-50 dark:bg-indigo-900/20 ring-2 ring-inset ring-indigo-500'
           : 'bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/60',
-        !isAnswered && 'border-dashed'
       )}
       {...longPressHandlers}
     >
+      <div className="flex min-h-[96px] items-start gap-3">
         <span className="inline-flex h-7 min-w-7 items-center justify-center rounded-full bg-amber-100 px-2 text-xs font-semibold text-amber-700 dark:bg-amber-900/40 dark:text-amber-300">
           {item.factorIndex + 1}
         </span>
 
-      <span className="min-w-0 flex-1">
+        <div className="min-w-0 flex-1">
           {isAnswered ? (
-          <span className="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">
+            <div className="text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">
               {item.title}
-          </span>
+            </div>
           ) : (
-          <span className="flex h-6 items-center">
+            <div className="flex h-6 items-center">
               <span
                 className={clsx(
                   'block h-3 rounded-full bg-gray-200 dark:bg-gray-600',
@@ -94,9 +103,14 @@ function FactorTitleCell({
                 )}
                 style={{ width: `${Math.min(Math.max(item.title.length, 4) * 0.8, 8)}rem` }}
               />
-          </span>
+            </div>
           )}
-      </span>
+
+          <p className="mt-2 text-sm leading-7 text-gray-700 dark:text-gray-200">
+            {item.description}
+          </p>
+        </div>
+      </div>
 
       {showAnswer && (
         <div className="absolute inset-0 z-10 flex items-center justify-center rounded bg-black/80 px-4">
@@ -603,7 +617,13 @@ export default function KnowledgeAreasTailoringPage() {
   )
 
   return (
-    <div className={clsx(isFullScreen ? 'fixed inset-0 z-50 bg-gray-50 dark:bg-gray-900' : 'space-y-6')}>
+    <div
+      className={clsx(
+        isFullScreen
+          ? 'fixed inset-0 z-50 flex flex-col bg-gray-50 dark:bg-gray-900'
+          : 'flex min-h-[calc(100vh-7rem)] flex-col gap-6'
+      )}
+    >
       {isFullScreen && (
         <style>{`
           .tailoring-no-scrollbar::-webkit-scrollbar {
@@ -629,8 +649,10 @@ export default function KnowledgeAreasTailoringPage() {
 
       <div
         className={clsx(
-          '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'
+          'overflow-hidden border border-gray-100 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800',
+          isFullScreen
+            ? 'flex min-h-0 flex-1 flex-col border-0 rounded-none shadow-none'
+            : 'flex min-h-0 flex-1 flex-col rounded-2xl'
         )}
       >
         {renderToolbar(isFullScreen)}
@@ -638,7 +660,6 @@ export default function KnowledgeAreasTailoringPage() {
         <div
           className={clsx(
             'flex-1 overflow-y-auto overflow-x-hidden',
-            isPracticeMode && currentItem && 'pb-56 md:pb-52',
             isFullScreen && 'tailoring-no-scrollbar'
           )}
         >
@@ -712,7 +733,6 @@ export default function KnowledgeAreasTailoringPage() {
                           </div>
                         </td>
                       )}
-
                       <td className="border border-gray-200 p-0 align-top dark:border-gray-700">
                         <div
                           className={clsx(
@@ -730,15 +750,6 @@ export default function KnowledgeAreasTailoringPage() {
                             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>
@@ -749,10 +760,12 @@ export default function KnowledgeAreasTailoringPage() {
           </table>
         </div>
 
+      </div>
+
       {isPracticeMode && currentItem && (
-          <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="sticky bottom-0 z-10 border-t border-gray-200 bg-white/60 pb-8 backdrop-blur-md dark:border-gray-700 dark:bg-gray-800/60">
+          <div className="px-6">
+            <div className="border-b border-gray-200/50 py-3 dark:border-gray-700/50">
               <div className="flex items-center justify-center gap-3">
                 <InputArea
                   userInput={userInput}
@@ -778,7 +791,7 @@ export default function KnowledgeAreasTailoringPage() {
               </div>
             </div>
 
-              <div className="grid gap-3 py-4 md:grid-cols-[220px,1fr] md:items-start">
+            <div className="grid gap-3 py-3 md:grid-cols-[220px,1fr] md:items-start">
               <div>
                 <div className="text-sm font-semibold text-gray-900 dark:text-white">
                   {currentItem.knowledgeAreaName}
@@ -794,7 +807,6 @@ export default function KnowledgeAreasTailoringPage() {
           </div>
         </div>
       )}
-      </div>
 
       <div id="aria-live-region" className="sr-only" aria-live="polite" aria-atomic="true" />