feat: 添加随机数组按钮，算法思路改为弹窗形式

Author: CC11001100

src/App.tsx

@@ -211,6 +211,7 @@ function App() {
           <InputPanel onSubmit={handleSubmit} disabled={isPlaying} />
         </div>
         <div className="header-right">
+          <AlgorithmIntro inputNumbers={inputNumbers} />
           {steps.length > 0 && !tutorialState.isActive && (
             <button className="tutorial-button" onClick={startTutorial}>
               🎓 教程
@@ -293,7 +294,6 @@ function App() {
 
           {/* 右侧：辅助信息 */}
           <aside className="right-panel">
-            <AlgorithmIntro inputNumbers={inputNumbers} />
             <EnhancedStepExplanation
               stepType={currentStepType}
               currentPath={currentPath}

src/components/AlgorithmIntro.css

@@ -1,64 +1,121 @@
-.algorithm-intro {
+/* 算法思路按钮 */
+.algorithm-intro-btn {
+  padding: 6px 12px;
+  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+  border: 1px solid #90caf9;
+  border-radius: 6px;
+  color: #1976d2;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.algorithm-intro-btn:hover {
+  background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.2);
+}
+
+/* 弹窗遮罩 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.2s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* 弹窗内容 */
+.modal-content {
   background: #fff;
-  border-radius: 8px;
-  border: 1px solid #e0e0e0;
-  margin-bottom: 12px;
+  border-radius: 12px;
+  width: 90%;
+  max-width: 500px;
+  max-height: 80vh;
   overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  animation: slideUp 0.3s ease;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.intro-header {
+.modal-header {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 10px 12px;
+  gap: 10px;
+  padding: 16px 20px;
   background: linear-gradient(135deg, #e3f2fd 0%, #fff 100%);
-  cursor: pointer;
-  user-select: none;
-}
-
-.intro-header:hover {
-  background: linear-gradient(135deg, #bbdefb 0%, #e3f2fd 100%);
+  border-bottom: 1px solid #e0e0e0;
 }
 
-.intro-icon {
-  font-size: 16px;
+.modal-icon {
+  font-size: 24px;
 }
 
-.intro-title {
+.modal-title {
   flex: 1;
+  font-size: 18px;
   font-weight: 600;
   color: #1976d2;
-  font-size: 13px;
 }
 
-.toggle-icon {
-  font-size: 10px;
+.modal-close {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
   color: #666;
+  font-size: 18px;
+  cursor: pointer;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
 }
 
-.intro-content {
-  padding: 12px;
-  font-size: 12px;
-  line-height: 1.6;
-  max-height: 280px;
-  overflow-y: auto;
-}
-
-.intro-content::-webkit-scrollbar {
-  width: 4px;
-}
-
-.intro-content::-webkit-scrollbar-track {
+.modal-close:hover {
   background: #f0f0f0;
+  color: #333;
 }
 
-.intro-content::-webkit-scrollbar-thumb {
-  background: #ccc;
-  border-radius: 2px;
+.modal-body {
+  padding: 20px;
+  overflow-y: auto;
+  max-height: calc(80vh - 70px);
 }
 
+/* 内容区域样式 */
 .intro-section {
-  margin-bottom: 12px;
+  margin-bottom: 20px;
 }
 
 .intro-section:last-child {
@@ -68,32 +125,36 @@
 .section-title {
   font-weight: 600;
   color: #333;
-  margin-bottom: 6px;
-  font-size: 12px;
+  margin-bottom: 8px;
+  font-size: 14px;
 }
 
-.intro-content p {
-  margin: 0 0 6px 0;
+.modal-body p {
+  margin: 0 0 8px 0;
   color: #555;
+  font-size: 14px;
+  line-height: 1.6;
 }
 
-.intro-content code {
+.modal-body code {
   background: #f5f5f5;
-  padding: 2px 6px;
-  border-radius: 3px;
+  padding: 2px 8px;
+  border-radius: 4px;
   font-family: 'Monaco', 'Menlo', monospace;
-  font-size: 11px;
+  font-size: 13px;
   color: #d32f2f;
 }
 
 .thought-steps {
-  margin: 6px 0 0 0;
-  padding-left: 20px;
+  margin: 8px 0 0 0;
+  padding-left: 24px;
   color: #555;
+  font-size: 14px;
+  line-height: 1.8;
 }
 
 .thought-steps li {
-  margin-bottom: 4px;
+  margin-bottom: 6px;
 }
 
 .thought-steps strong {
@@ -102,33 +163,35 @@
 
 .key-insight {
   background: #fff8e1;
-  padding: 8px 10px;
-  border-radius: 6px;
-  border-left: 3px solid #ffc107;
+  padding: 12px 16px;
+  border-radius: 8px;
+  border-left: 4px solid #ffc107;
   margin: 0;
+  font-size: 14px;
 }
 
 .key-insight strong {
   color: #f57c00;
 }
 
 .watch-points {
-  margin: 6px 0 0 0;
+  margin: 8px 0 0 0;
   padding: 0;
   list-style: none;
 }
 
 .watch-points li {
   display: flex;
   align-items: center;
-  gap: 6px;
-  margin-bottom: 4px;
+  gap: 8px;
+  margin-bottom: 8px;
   color: #555;
+  font-size: 14px;
 }
 
 .color-dot {
-  width: 10px;
-  height: 10px;
+  width: 12px;
+  height: 12px;
   border-radius: 50%;
   flex-shrink: 0;
 }
@@ -147,12 +210,33 @@
 
 .visual-example {
   background: #fafafa;
-  padding: 10px;
-  border-radius: 6px;
-  margin-top: 8px;
+  padding: 16px;
+  border-radius: 8px;
+}
+
+.shortcut-list {
+  margin: 8px 0 0 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.shortcut-list li {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: #555;
 }
 
-/* 折叠状态 */
-.algorithm-intro.collapsed .intro-content {
-  display: none;
+.shortcut-list kbd {
+  background: #f5f5f5;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 2px 8px;
+  font-family: inherit;
+  font-size: 12px;
+  color: #333;
 }