[feat] Support empty numeric inputs & UI improvements for real app

2026-06-16 19:00:03 +08:00
parent b926a6e30d
commit b86716e952
7 changed files with 183 additions and 87 deletions
@@ -22,51 +22,84 @@ export function ResultPanel({ groups, hasResult, placeholder }: ResultPanelProps
    )
  }

+  // 将groups分成pairs，每组人数>=15时单独一行
+  const rows: { numbers: number[]; colorIndex: number }[][] = []
+  let currentRow: { numbers: number[]; colorIndex: number }[] = []
+  
+  for (const group of groups) {
+    if (group.numbers.length >= 15) {
+      // 单独一行
+      if (currentRow.length > 0) {
+        rows.push(currentRow)
+        currentRow = []
+      }
+      rows.push([group])
+    } else {
+      // 尝试凑成一行两组
+      currentRow.push(group)
+      if (currentRow.length === 2) {
+        rows.push(currentRow)
+        currentRow = []
+      }
+    }
+  }
+  
+  // 处理剩余的组
+  if (currentRow.length > 0) {
+    rows.push(currentRow)
+  }
+
  return (
-    <div className="flex flex-col">
-      {groups.map((group, idx) => {
-        const sorted = [...group.numbers].sort((a, b) => a - b)
-        const color = COLORS[group.colorIndex]
-        return (
-          <div
-            key={idx}
-            className="flex items-start gap-4 py-2.5 border-b border-[#e2e6ea] last:border-b-0 fui-slide-up"
-            style={{ animationDelay: `${idx * 40}ms` }}
-          >
-            {/* Group label with color */}
-            <div className="flex flex-col gap-0.5 w-14 flex-shrink-0 pt-0.5">
-              <div className="flex items-center gap-2">
-                <div
-                  className="w-2 h-2 rounded-full"
-                  style={{ backgroundColor: color }}
-                />
-                <span className="text-xs font-mono uppercase tracking-[0.15em]" style={{ color }}>
-                  G{String(idx + 1).padStart(2, "0")}
-                </span>
+    <div className="flex flex-col gap-3">
+      {rows.map((row, rowIdx) => (
+        <div 
+          key={rowIdx} 
+          className="flex gap-6 fui-slide-up"
+          style={{ animationDelay: `${rowIdx * 40}ms` }}
+        >
+          {row.map((group, idx) => {
+            const sorted = [...group.numbers].sort((a, b) => a - b)
+            const color = COLORS[group.colorIndex]
+            const globalIdx = groups.indexOf(group)
+            return (
+              <div
+                key={globalIdx}
+                className="flex-1 min-w-0"
+              >
+                {/* Group label with color */}
+                <div className="flex items-center gap-2 mb-2">
+                  <div
+                    className="w-2 h-2 rounded-full"
+                    style={{ backgroundColor: color }}
+                  />
+                  <span className="text-xs font-mono uppercase tracking-[0.15em]" style={{ color }}>
+                    G{String(globalIdx + 1).padStart(2, "0")}
+                  </span>
+                  <span className="text-[10px] font-mono text-[#8a95a1]">
+                    {String(group.numbers.length).padStart(2, "0")} P
+                  </span>
+                </div>
+                {/* Numbers with color */}
+                <div className="flex flex-wrap gap-1.5">
+                  {sorted.map((num) => (
+                    <span
+                      key={num}
+                      className="min-w-8 h-8 px-1.5 flex items-center justify-center text-sm font-mono border fui-fadein"
+                      style={{ 
+                        borderColor: color + "40",
+                        backgroundColor: color + "15",
+                        color: color,
+                      }}
+                    >
+                      {String(num).padStart(2, "0")}
+                    </span>
+                  ))}
+                </div>
              </div>
-              <span className="text-[10px] font-mono text-[#8a95a1]">
-                {String(group.numbers.length).padStart(2, "0")} P
-              </span>
-            </div>
-            {/* Numbers with color */}
-            <div className="flex flex-wrap gap-1.5 flex-1 min-w-0">
-              {sorted.map((num) => (
-                <span
-                  key={num}
-                  className="min-w-8 h-8 px-1.5 flex items-center justify-center text-sm font-mono border fui-fadein"
-                  style={{ 
-                    borderColor: color + "40",
-                    backgroundColor: color + "15",
-                    color: color,
-                  }}
-                >
-                  {String(num).padStart(2, "0")}
-                </span>
-              ))}
-            </div>
-          </div>
-        )
-      })}
+            )
+          })}
+        </div>
+      ))}
    </div>
  )
 }