Skip to content

Commit 72a11a8

Browse files
AceCandyAceCandy
committed
style: 优化页面布局、键盘按键拟物化样式与卡片切场动画
1 parent 129dd52 commit 72a11a8

3 files changed

Lines changed: 101 additions & 74 deletions

File tree

‎index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ <h1>Claude Code 中文速查表</h1>
2222
</a>
2323
<div class="header-counter" aria-live="polite">
2424
<span class="header-counter-label">本站访问量</span>
25-
<span id="siteVisitCount" class="visit-count" data-counter-namespace="cc-quick" data-counter-name="site-visits">—</span>
25+
<span id="siteVisitCount" class="visit-count" data-counter-namespace="cc-quick" data-counter-name="site-visits"><span class="visitor-loading-dots">...</span></span>
2626
</div>
2727
</div>
2828
</div>
@@ -55,8 +55,8 @@ <h1>Claude Code 中文速查表</h1>
5555
<div class="changelog-panel" id="changelogPanel" hidden>
5656
<ul class="changelog-list">
5757
<li><a class="changelog-link" href="https://code.claude.com/docs/en/changelog" target="_blank" rel="noreferrer noopener">在写入 shell 启动文件（.zshenv、.bash_login）和构建工具配置（.npmrc、.yarnrc）前显示安全提示（v2.1.160）</a></li>
58-
<li><a class="changelog-link" href="https://code.claude.com/docs/en/changelog" target="_blank" rel="noreferrer noopener">后台会话在重新连接后 այժմ 保留完整聊天历史记录（v2.1.160）</a></li>
59-
<li><a class="changelog-link" href="https://code.claude.com/docs/en/changelog" target="_blank" rel="noreferrer noopener">Opus 4.7 和 4.8 的 Auto mode 现已在 Bedrock、Vertex 和 Foundry 上可用 — 通过 CLAUDE_CODE_ENABLE_AUTO_MODE=1 启用（v2.1.158）</a></li>
58+
<li><a class="changelog-link" href="https://code.claude.com/docs/en/changelog" target="_blank" rel="noreferrer noopener">后台会话在重新连接后现已保留完整聊天历史记录（v2.1.160）</a></li>
59+
<li><a class="changelog-link" href="https://code.claude.com/docs/en/changelog" target="_blank" rel="noreferrer noopener">Opus 4.7 和 4.8 的 Auto mode 现已在 Bedrock、Vertex 和 Foundry 上可用（通过 CLAUDE_CODE_ENABLE_AUTO_MODE=1 启用，v2.1.158）</a></li>
6060
</ul>
6161
</div>
6262
</header>
@@ -214,7 +214,7 @@ <h3 class="group-title" id="section-slash-group-工具">工具</h3>
214214
<div class="row"><span class="key">/agents</span> <span class="desc">管理 agents<span class="badge-new" data-added="2026-04-08">NEW</span></span></div>
215215
<div class="row"><span class="key">/workflows</span> <span class="desc">查看和管理后台多智能体工作流运行<span class="badge-new" data-added="2026-05-28">NEW</span></span></div>
216216
<div class="row"><span class="key">/review [PR]</span> <span class="desc">在本地审查 PR</span></div>
217-
<div class="row"><span class="key">/ultrareview [PR#]</span> <span class="desc">云端代码审查 — 并行多 agent 分析</span></div>
217+
<div class="row"><span class="key">/ultrareview [PR#]</span> <span class="desc">云端代码审查 (并行多 agent 分析)</span></div>
218218
<div class="row"><span class="key">/security-review</span> <span class="desc">对改动做安全分析</span></div>
219219
<div class="row"><span class="key">/loop [interval] [prompt]</span> <span class="desc">周期性任务（/proactive 别名）<span class="badge-new" data-added="2026-04-16">NEW</span></span></div>
220220
<div class="row"><span class="key">/ide</span> <span class="desc">IDE 集成状态</span></div>

‎script.js‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -259,18 +259,26 @@ function initSectionSwitcher() {
259259
function setActivePanel(activePanel, syncHash) {
260260
var activeTarget = getPanelTarget(activePanel);
261261

262-
panels.forEach(function (panel) {
263-
var isActive = panel === activePanel;
262+
function updateDOM() {
263+
panels.forEach(function (panel) {
264+
var isActive = panel === activePanel;
264265

265-
panel.hidden = !isActive;
266-
});
266+
panel.hidden = !isActive;
267+
});
267268

268-
buttons.forEach(function (button) {
269-
var isActive = getButtonTarget(button) === activeTarget;
269+
buttons.forEach(function (button) {
270+
var isActive = getButtonTarget(button) === activeTarget;
270271

271-
button.classList.toggle("active", isActive);
272-
button.setAttribute("aria-pressed", isActive ? "true" : "false");
273-
});
272+
button.classList.toggle("active", isActive);
273+
button.setAttribute("aria-pressed", isActive ? "true" : "false");
274+
});
275+
}
276+
277+
if (document.startViewTransition) {
278+
document.startViewTransition(updateDOM);
279+
} else {
280+
updateDOM();
281+
}
274282

275283
if (syncHash) {
276284
syncHashWithoutScroll(activeTarget);

‎styles.css‎

Lines changed: 80 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
--header-padding: 1rem 1.2rem;
1010
--header-title-size: 1.7rem;
1111
--header-title-max: 22rem;
12-
--section-header-padding: 0.9rem 1.1rem 0.8rem 1.35rem;
12+
--section-header-padding: 0.9rem 1.1rem 0.8rem 1.1rem;
1313
--section-content-padding: 0.86rem 1.1rem 0.98rem;
1414
--section-title-size: 0.96rem;
1515
--group-title-size: 0.68rem;
@@ -19,12 +19,13 @@
1919
--row-gap: 0.65rem 0.9rem;
2020
--row-spacing: 0.42rem;
2121
--key-font-size: 0.72rem;
22-
--key-padding: 0.24rem 0.55rem;
22+
--key-padding: 0.18rem 0.45rem;
2323
--desc-font-size: 0.84rem;
2424
--desc-line-height: 1.45;
2525
--appendix-title-size: 0.88rem;
2626
--footer-font-size: 0.78rem;
2727
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
28+
--key-shadow: 0 1px 0 var(--border-strong), 0 2px 0 color-mix(in srgb, var(--border) 80%, transparent), 0 1.5px 3px rgba(15, 23, 42, 0.08);
2829
--bg: #f3f5f8;
2930
--bg-elevated: #fbfcfe;
3031
--panel: #ffffff;
@@ -53,14 +54,14 @@
5354
--mcp-accent: #0891b2;
5455
--cli-accent: #4b5563;
5556
--config-accent: #c2410c;
56-
--surface-keyboard: #eef5ff;
57-
--surface-slash: #f6f0ff;
58-
--surface-skills: #eefbf6;
59-
--surface-memory: #fffaed;
60-
--surface-workflows: #fff1f2;
61-
--surface-mcp: #eefbfd;
62-
--surface-cli: #f6f8fb;
63-
--surface-config: #fff4ec;
57+
--surface-keyboard: #f8fafc;
58+
--surface-slash: #f8fafc;
59+
--surface-skills: #f8fafc;
60+
--surface-memory: #f8fafc;
61+
--surface-workflows: #f8fafc;
62+
--surface-mcp: #f8fafc;
63+
--surface-cli: #f8fafc;
64+
--surface-config: #f8fafc;
6465
--font-sans: "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
6566
--font-mono: "IBM Plex Mono", "JetBrains Mono", "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
6667
}
@@ -77,6 +78,7 @@
7778
--text-soft: #c6d2e3;
7879
--text-muted: #a0b7d7;
7980
--shadow: 0 2px 8px rgba(2, 6, 23, 0.25);
81+
--key-shadow: 0 1.5px 0 #1b2636, 0 2.5px 0 #090f16, 0 2px 4px rgba(2, 6, 23, 0.4);
8082
--chip-bg: #1b2a3d;
8183
--chip-border: #32485f;
8284
--control-bg: #152233;
@@ -95,14 +97,14 @@
9597
--mcp-accent: #7fdaf0;
9698
--cli-accent: #a8b3c2;
9799
--config-accent: #ffaf79;
98-
--surface-keyboard: #16263d;
99-
--surface-slash: #211b36;
100-
--surface-skills: #152b25;
101-
--surface-memory: #312819;
102-
--surface-workflows: #351d23;
103-
--surface-mcp: #152a34;
104-
--surface-cli: #1a2431;
105-
--surface-config: #322117;
100+
--surface-keyboard: #121b29;
101+
--surface-slash: #121b29;
102+
--surface-skills: #121b29;
103+
--surface-memory: #121b29;
104+
--surface-workflows: #121b29;
105+
--surface-mcp: #121b29;
106+
--surface-cli: #121b29;
107+
--surface-config: #121b29;
106108
}
107109

108110
@media (prefers-color-scheme: dark) {
@@ -118,6 +120,7 @@
118120
--text-soft: #c6d2e3;
119121
--text-muted: #a0b7d7;
120122
--shadow: 0 2px 8px rgba(2, 6, 23, 0.25);
123+
--key-shadow: 0 1.5px 0 #1b2636, 0 2.5px 0 #090f16, 0 2px 4px rgba(2, 6, 23, 0.4);
121124
--chip-bg: #1b2a3d;
122125
--chip-border: #32485f;
123126
--control-bg: #152233;
@@ -136,14 +139,14 @@
136139
--mcp-accent: #7fdaf0;
137140
--cli-accent: #a8b3c2;
138141
--config-accent: #ffaf79;
139-
--surface-keyboard: #16263d;
140-
--surface-slash: #211b36;
141-
--surface-skills: #152b25;
142-
--surface-memory: #312819;
143-
--surface-workflows: #351d23;
144-
--surface-mcp: #152a34;
145-
--surface-cli: #1a2431;
146-
--surface-config: #322117;
142+
--surface-keyboard: #121b29;
143+
--surface-slash: #121b29;
144+
--surface-skills: #121b29;
145+
--surface-memory: #121b29;
146+
--surface-workflows: #121b29;
147+
--surface-mcp: #121b29;
148+
--surface-cli: #121b29;
149+
--surface-config: #121b29;
147150
}
148151
}
149152

@@ -477,6 +480,23 @@ a,
477480
display: none;
478481
}
479482

483+
.changelog-panel:not([hidden]) {
484+
display: block;
485+
animation: changelog-pop-in 0.2s var(--ease-out-quart);
486+
transform-origin: top left;
487+
}
488+
489+
@keyframes changelog-pop-in {
490+
from {
491+
opacity: 0;
492+
transform: scale(0.96) translateY(-4px);
493+
}
494+
to {
495+
opacity: 1;
496+
transform: scale(1) translateY(0);
497+
}
498+
}
499+
480500
.changelog-list {
481501
margin: 0;
482502
padding: 0;
@@ -621,6 +641,7 @@ a,
621641
background: var(--control-active-bg);
622642
color: var(--control-active-text);
623643
box-shadow: 0 0.45rem 1rem color-mix(in srgb, var(--control-active-bg) 16%, transparent);
644+
view-transition-name: active-tab;
624645
}
625646

626647
.section-switcher-btn.active::before {
@@ -739,18 +760,12 @@ a,
739760
.section-header {
740761
position: relative;
741762
padding: var(--section-header-padding);
742-
border-bottom: 1px solid var(--border);
763+
border-bottom: 1px solid color-mix(in srgb, var(--section-accent) 18%, var(--border));
743764
}
744765

745766
.section-header::before {
746767
content: "";
747-
position: absolute;
748-
left: 1rem;
749-
top: 1rem;
750-
bottom: 1rem;
751-
width: 0.28rem;
752-
border-radius: 999px;
753-
background: var(--section-accent);
768+
display: none;
754769
}
755770

756771
.section-title {
@@ -797,7 +812,16 @@ a,
797812
display: grid;
798813
grid-template-columns: minmax(var(--row-key-min), var(--row-key-max)) minmax(0, 1fr);
799814
gap: var(--row-gap);
800-
align-items: start;
815+
align-items: center;
816+
padding: 0.22rem 0.4rem;
817+
margin-inline: -0.4rem;
818+
border-radius: 6px;
819+
transition: background-color 0.15s var(--ease-out-quart), transform 0.15s var(--ease-out-quart);
820+
}
821+
822+
.row:hover {
823+
background-color: color-mix(in srgb, var(--text) 5%, transparent);
824+
transform: translateX(4px);
801825
}
802826

803827
.row + .row {
@@ -817,38 +841,25 @@ a,
817841
word-break: break-word;
818842
}
819843

820-
.keycap {
821-
display: inline-flex;
822-
align-items: flex-start;
823-
justify-content: flex-start;
824-
width: fit-content;
825-
max-width: 100%;
826-
padding: var(--key-padding);
827-
border-radius: 999px;
828-
border: 1px solid var(--chip-border);
829-
background: var(--chip-bg);
830-
color: var(--text);
831-
font-family: var(--font-mono);
832-
font-size: var(--key-font-size);
833-
line-height: 1.45;
834-
font-weight: 600;
835-
}
836-
844+
.keycap,
837845
.key {
838846
display: inline-flex;
839-
align-items: flex-start;
840-
justify-content: flex-start;
847+
align-items: center;
848+
justify-content: center;
841849
width: fit-content;
842850
max-width: 100%;
843851
padding: var(--key-padding);
844-
border-radius: 999px;
852+
border-radius: 6px;
845853
border: 1px solid var(--chip-border);
854+
border-bottom: 2px solid var(--chip-border);
846855
background: var(--chip-bg);
847856
color: var(--text);
848857
font-family: var(--font-mono);
849858
font-size: var(--key-font-size);
850-
line-height: 1.45;
859+
line-height: 1.25;
851860
font-weight: 600;
861+
box-shadow: var(--key-shadow);
862+
vertical-align: middle;
852863
}
853864

854865
.key.key-chord {
@@ -960,6 +971,18 @@ a,
960971
font-weight: 500;
961972
}
962973

974+
.visitor-loading-dots {
975+
opacity: 0.5;
976+
animation: visitor-pulse 1.4s infinite ease-in-out;
977+
display: inline-block;
978+
font-family: var(--font-sans);
979+
}
980+
981+
@keyframes visitor-pulse {
982+
0%, 100% { opacity: 0.3; }
983+
50% { opacity: 0.8; }
984+
}
985+
963986
@media (max-width: 760px) {
964987
.page-shell {
965988
grid-template-columns: minmax(0, 1fr);
@@ -1198,11 +1221,7 @@ a,
11981221
}
11991222

12001223
.section-header {
1201-
padding: 1rem 1rem 0.8rem 1.3rem;
1202-
}
1203-
1204-
.section-header::before {
1205-
left: 0.8rem;
1224+
padding: 1rem 1rem 0.8rem 1rem;
12061225
}
12071226

12081227
.section-content,

0 commit comments

Comments
 (0)