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

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">
-        <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">
+        <div className="flex items-start gap-3">
-          {item.factorIndex + 1}
+          <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">
-        </span>
+            {item.factorIndex + 1}
-        <span className="font-medium leading-6">{item.title}</span>
+          </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,35 +77,40 @@ 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}
     >
-      <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">
+      <div className="flex min-h-[96px] items-start gap-3">
-        {item.factorIndex + 1}
+        <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">
-      </span>
+          {item.factorIndex + 1}
+        </span>
 
-      <span className="min-w-0 flex-1">
+        <div className="min-w-0 flex-1">
-        {isAnswered ? (
+          {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}
+              {item.title}
-          </span>
+            </div>
-        ) : (
+          ) : (
-          <span className="flex h-6 items-center">
+            <div className="flex h-6 items-center">
-            <span
+              <span
-              className={clsx(
+                className={clsx(
-                'block h-3 rounded-full bg-gray-200 dark:bg-gray-600',
+                  'block h-3 rounded-full bg-gray-200 dark:bg-gray-600',
-                isCurrent && 'bg-indigo-200 dark:bg-indigo-700/70'
+                  isCurrent && 'bg-indigo-200 dark:bg-indigo-700/70'
-              )}
+                )}
-              style={{ width: `${Math.min(Math.max(item.title.length, 4) * 0.8, 8)}rem` }}
+                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',
+          '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'
+          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,52 +760,53 @@ export default function KnowledgeAreasTailoringPage() {
           </table>
         </div>
 
-        {isPracticeMode && currentItem && (
+      </div>
-          <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">
-                  <InputArea
-                    userInput={userInput}
-                    charStatuses={charStatuses}
-                    isComposing={isComposing}
-                    inputLocked={inputLocked}
-                    lastErrorTimestamp={lastErrorTimestamp}
-                    onInputChange={handleInputChange}
-                    onCompositionStart={handleCompositionStart}
-                    onCompositionEnd={handleCompositionEnd}
-                    onPaste={handlePaste}
-                  />
-                  <button
-                    type="button"
-                    onClick={() => currentItemId && handleLongPress(currentItemId)}
-                    className="p-2 text-gray-500 transition-colors hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
-                    title="查看答案（长按表格中的因素标题也可以）"
-                  >
-                    <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                    </svg>
-                  </button>
-                </div>
-              </div>
 
-              <div className="grid gap-3 py-4 md:grid-cols-[220px,1fr] md:items-start">
+      {isPracticeMode && currentItem && (
-                <div>
+        <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="text-sm font-semibold text-gray-900 dark:text-white">
+          <div className="px-6">
-                    {currentItem.knowledgeAreaName}
+            <div className="border-b border-gray-200/50 py-3 dark:border-gray-700/50">
-                  </div>
+              <div className="flex items-center justify-center gap-3">
-                  <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                <InputArea
-                    第 {currentItem.factorIndex + 1} 项 · 长按标题或 Ctrl+H 查看答案 · Tab 切换
+                  userInput={userInput}
-                  </div>
+                  charStatuses={charStatuses}
-                </div>
+                  isComposing={isComposing}
-                <p className="text-sm leading-7 text-gray-700 dark:text-gray-200">
+                  inputLocked={inputLocked}
-                  {currentItem.description}
+                  lastErrorTimestamp={lastErrorTimestamp}
-                </p>
+                  onInputChange={handleInputChange}
+                  onCompositionStart={handleCompositionStart}
+                  onCompositionEnd={handleCompositionEnd}
+                  onPaste={handlePaste}
+                />
+                <button
+                  type="button"
+                  onClick={() => currentItemId && handleLongPress(currentItemId)}
+                  className="p-2 text-gray-500 transition-colors hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
+                  title="查看答案（长按表格中的因素标题也可以）"
+                >
+                  <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                </button>
               </div>
             </div>
+
+            <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}
+                </div>
+                <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                  第 {currentItem.factorIndex + 1} 项 · 长按标题或 Ctrl+H 查看答案 · Tab 切换
+                </div>
+              </div>
+              <p className="text-sm leading-7 text-gray-700 dark:text-gray-200">
+                {currentItem.description}
+              </p>
+            </div>
           </div>
-        )}
+        </div>
-      </div>
+      )}
 
       <div id="aria-live-region" className="sr-only" aria-live="polite" aria-atomic="true" />