Skip to content

Commit 36051ad

Browse files
CC11001100CC11001100
committed
feat: 添加所有UI组件
1 parent 01bae3d commit 36051ad

File tree

22 files changed

+1998
-0
lines changed

22 files changed

+1998
-0
lines changed

‎src/components/AlgorithmIdeaModal/AlgorithmIdeaModal.css‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
.modal-overlay {
2+
position: fixed;
3+
top: 0;
4+
left: 0;
5+
right: 0;
6+
bottom: 0;
7+
background: rgba(0, 0, 0, 0.5);
8+
display: flex;
9+
align-items: center;
10+
justify-content: center;
11+
z-index: 1000;
12+
padding: var(--spacing-lg);
13+
}
14+
15+
.modal-content {
16+
background: var(--bg-primary);
17+
border-radius: var(--border-radius-lg);
18+
max-width: 800px;
19+
max-height: 90vh;
20+
width: 100%;
21+
overflow: hidden;
22+
display: flex;
23+
flex-direction: column;
24+
box-shadow: var(--shadow-lg);
25+
}
26+
27+
.modal-header {
28+
display: flex;
29+
align-items: center;
30+
justify-content: space-between;
31+
padding: var(--spacing-md) var(--spacing-lg);
32+
border-bottom: 1px solid var(--border-color);
33+
}
34+
35+
.modal-header h2 {
36+
font-size: 18px;
37+
font-weight: 600;
38+
color: var(--text-primary);
39+
}
40+
41+
.modal-close {
42+
width: 32px;
43+
height: 32px;
44+
display: flex;
45+
align-items: center;
46+
justify-content: center;
47+
font-size: 24px;
48+
color: var(--text-secondary);
49+
border-radius: var(--border-radius);
50+
transition: all var(--transition-fast);
51+
}
52+
53+
.modal-close:hover {
54+
background: var(--bg-tertiary);
55+
color: var(--text-primary);
56+
}
57+
58+
.modal-body {
59+
flex: 1;
60+
overflow-y: auto;
61+
padding: var(--spacing-lg);
62+
}
63+
64+
.idea-section {
65+
margin-bottom: var(--spacing-lg);
66+
}
67+
68+
.idea-section:last-child {
69+
margin-bottom: 0;
70+
}
71+
72+
.idea-section h3 {
73+
font-size: 16px;
74+
font-weight: 600;
75+
color: var(--text-primary);
76+
margin-bottom: var(--spacing-sm);
77+
}
78+
79+
.idea-section p {
80+
color: var(--text-secondary);
81+
line-height: 1.7;
82+
margin-bottom: var(--spacing-sm);
83+
}
84+
85+
.idea-content {
86+
background: var(--bg-secondary);
87+
border-radius: var(--border-radius);
88+
padding: var(--spacing-md);
89+
}
90+
91+
.idea-content ul {
92+
margin: var(--spacing-sm) 0;
93+
padding-left: var(--spacing-lg);
94+
}
95+
96+
.idea-content li {
97+
color: var(--text-secondary);
98+
line-height: 1.7;
99+
margin-bottom: var(--spacing-xs);
100+
}
101+
102+
.idea-content code {
103+
display: block;
104+
background: var(--code-bg);
105+
color: #e2e8f0;
106+
padding: var(--spacing-sm) var(--spacing-md);
107+
border-radius: var(--border-radius);
108+
font-family: var(--font-mono);
109+
font-size: 13px;
110+
margin-top: var(--spacing-sm);
111+
}
112+
113+
.complexity-table {
114+
width: 100%;
115+
border-collapse: collapse;
116+
margin-top: var(--spacing-sm);
117+
}
118+
119+
.complexity-table th,
120+
.complexity-table td {
121+
padding: var(--spacing-sm) var(--spacing-md);
122+
text-align: left;
123+
border: 1px solid var(--border-color);
124+
}
125+
126+
.complexity-table th {
127+
background: var(--bg-tertiary);
128+
font-weight: 600;
129+
color: var(--text-primary);
130+
}
131+
132+
.complexity-table td {
133+
color: var(--text-secondary);
134+
}

‎src/components/AlgorithmIdeaModal/AlgorithmIdeaModal.tsx‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import './AlgorithmIdeaModal.css';
2+
3+
interface AlgorithmIdeaModalProps {
4+
isOpen: boolean;
5+
onClose: () => void;
6+
}
7+
8+
export function AlgorithmIdeaModal({ isOpen, onClose }: AlgorithmIdeaModalProps) {
9+
if (!isOpen) return null;
10+
11+
return (
12+
<div className="modal-overlay" onClick={onClose}>
13+
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
14+
<div className="modal-header">
15+
<h2>算法思路</h2>
16+
<button className="modal-close" onClick={onClose}>×</button>
17+
</div>
18+
19+
<div className="modal-body">
20+
<section className="idea-section">
21+
<h3>📌 问题描述</h3>
22+
<p>
23+
给定一个整数数组 nums，找到其中最长严格递增子序列的长度。
24+
子序列是由数组派生而来的序列，删除（或不删除）数组中的元素而不改变其余元素的顺序。
25+
</p>
26+
</section>
27+
28+
<section className="idea-section">
29+
<h3>🎯 方法一：动态规划 O(n²)</h3>
30+
<div className="idea-content">
31+
<p><strong>核心思想：</strong></p>
32+
<ul>
33+
<li>定义 dp[i] 为以 nums[i] 结尾的最长递增子序列的长度</li>
34+
<li>对于每个位置 i，遍历所有 j &lt; i 的位置</li>
35+
<li>如果 nums[i] &gt; nums[j]，则 dp[i] = max(dp[i], dp[j] + 1)</li>
36+
<li>最终答案为 max(dp[0], dp[1], ..., dp[n-1])</li>
37+
</ul>
38+
<p><strong>状态转移方程：</strong></p>
39+
<code>dp[i] = max(dp[j] + 1) for all j &lt; i where nums[j] &lt; nums[i]</code>
40+
</div>
41+
</section>
42+
43+
<section className="idea-section">
44+
<h3>🚀 方法二：贪心 + 二分查找 O(n log n)</h3>
45+
<div className="idea-content">
46+
<p><strong>核心思想：</strong></p>
47+
<ul>
48+
<li>维护一个 tails 数组，tails[i] 表示长度为 i+1 的递增子序列的最小末尾元素</li>
49+
<li>tails 数组始终保持单调递增</li>
50+
<li>对于每个新元素，使用二分查找找到它应该插入的位置</li>
51+
<li>如果新元素大于 tails 的所有元素，追加到末尾（子序列长度+1）</li>
52+
<li>否则，替换第一个大于等于它的元素（保持最小末尾）</li>
53+
</ul>
54+
<p><strong>贪心策略：</strong></p>
55+
<p>让递增子序列的末尾元素尽可能小，这样后续元素更容易接上去，从而获得更长的子序列。</p>
56+
</div>
57+
</section>
58+
59+
<section className="idea-section">
60+
<h3>💡 示例演示</h3>
61+
<div className="idea-content">
62+
<p>以 nums = [10, 9, 2, 5, 3, 7, 101, 18] 为例：</p>
63+
<p><strong>动态规划过程：</strong></p>
64+
<ul>
65+
<li>dp[0] = 1 (以10结尾)</li>
66+
<li>dp[1] = 1 (以9结尾，9 &lt; 10)</li>
67+
<li>dp[2] = 1 (以2结尾)</li>
68+
<li>dp[3] = 2 (以5结尾，5 &gt; 2，dp[3] = dp[2] + 1)</li>
69+
<li>dp[4] = 2 (以3结尾，3 &gt; 2，dp[4] = dp[2] + 1)</li>
70+
<li>dp[5] = 3 (以7结尾，7 &gt; 5，dp[5] = dp[3] + 1)</li>
71+
<li>dp[6] = 4 (以101结尾，101 &gt; 7，dp[6] = dp[5] + 1)</li>
72+
<li>dp[7] = 4 (以18结尾，18 &gt; 7，dp[7] = dp[5] + 1)</li>
73+
</ul>
74+
<p>最长递增子序列长度为 4，例如 [2, 5, 7, 101] 或 [2, 3, 7, 101]</p>
75+
</div>
76+
</section>
77+
78+
<section className="idea-section">
79+
<h3>📊 复杂度分析</h3>
80+
<table className="complexity-table">
81+
<thead>
82+
<tr>
83+
<th>方法</th>
84+
<th>时间复杂度</th>
85+
<th>空间复杂度</th>
86+
</tr>
87+
</thead>
88+
<tbody>
89+
<tr>
90+
<td>动态规划</td>
91+
<td>O(n²)</td>
92+
<td>O(n)</td>
93+
</tr>
94+
<tr>
95+
<td>贪心+二分</td>
96+
<td>O(n log n)</td>
97+
<td>O(n)</td>
98+
</tr>
99+
</tbody>
100+
</table>
101+
</section>
102+
</div>
103+
</div>
104+
</div>
105+
);
106+
}

‎src/components/AlgorithmIdeaModal/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { AlgorithmIdeaModal } from './AlgorithmIdeaModal';

‎src/components/Canvas/Canvas.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
.canvas-container {
2+
position: relative;
3+
flex: 1;
4+
background: var(--bg-primary);
5+
border-radius: var(--border-radius-lg);
6+
overflow: hidden;
7+
}
8+
9+
.canvas-svg {
10+
width: 100%;
11+
height: 100%;
12+
display: block;
13+
}
14+
15+
.canvas-controls {
16+
position: absolute;
17+
top: var(--spacing-md);
18+
right: var(--spacing-md);
19+
display: flex;
20+
align-items: center;
21+
gap: var(--spacing-sm);
22+
z-index: 10;
23+
}
24+
25+
.canvas-btn {
26+
padding: var(--spacing-xs) var(--spacing-sm);
27+
background: var(--bg-primary);
28+
border: 1px solid var(--border-color);
29+
border-radius: var(--border-radius);
30+
font-size: 12px;
31+
color: var(--text-secondary);
32+
transition: all var(--transition-fast);
33+
box-shadow: var(--shadow-sm);
34+
}
35+
36+
.canvas-btn:hover {
37+
background: var(--bg-tertiary);
38+
color: var(--text-primary);
39+
}
40+
41+
.zoom-level {
42+
padding: var(--spacing-xs) var(--spacing-sm);
43+
background: var(--bg-primary);
44+
border: 1px solid var(--border-color);
45+
border-radius: var(--border-radius);
46+
font-size: 12px;
47+
color: var(--text-secondary);
48+
box-shadow: var(--shadow-sm);
49+
}
50+
51+
.canvas-hint {
52+
position: absolute;
53+
bottom: var(--spacing-md);
54+
left: 50%;
55+
transform: translateX(-50%);
56+
padding: var(--spacing-xs) var(--spacing-md);
57+
background: rgba(0, 0, 0, 0.6);
58+
color: var(--text-light);
59+
border-radius: var(--border-radius);
60+
font-size: 12px;
61+
pointer-events: none;
62+
}

0 commit comments

Comments
 (0)