Skip to content

Commit 5249669

Browse files
DoroWolfDoroWolf
committed
update
1 parent 20cefee commit 5249669

10 files changed

Lines changed: 131 additions & 78 deletions

File tree

‎src/App.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -136,9 +136,9 @@ const {
136136
stopClock,
137137
} = game
138138
139-
// ---- 远程对战 ----
139+
// ---- 远程对局 ----
140140
const handleRemoteGame = () => {
141-
// TODO: 后续实现远程对战功能
141+
// TODO: 后续实现远程对局功能
142142
showSetup.value = true
143143
}
144144
@@ -158,7 +158,7 @@ onUnmounted(() => {
158158
box-sizing: border-box;
159159
padding: 20px;
160160
font-family: 'Unifont', system-ui, -apple-system, sans-serif;
161-
color: #222;
161+
color: var(--color-text-primary);
162162
gap: 1rem;
163163
flex-wrap: wrap;
164164
cursor: auto;
@@ -186,7 +186,7 @@ onUnmounted(() => {
186186
border-radius: 50%;
187187
border: none;
188188
background: transparent;
189-
color: #212529;
189+
color: var(--color-text-primary);
190190
font-size: 1.4rem;
191191
cursor: pointer;
192192
display: inline-flex;
@@ -202,7 +202,7 @@ onUnmounted(() => {
202202
}
203203
204204
.fab-btn:focus-visible {
205-
outline: 2px solid #ffd33d;
205+
outline: 2px solid var(--color-focus-ring);
206206
outline-offset: 2px;
207207
}
208208

‎src/assets/colors.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/* ============================================================
2+
* ChessDragon 设计令牌 - 颜色系统
3+
*
4+
* 所有颜色统一使用 CSS 自定义属性，方便未来添加暗色模式。
5+
* 暗色模式只需复制 :root 块到 [data-theme="dark"] 选择器并调整值即可。
6+
* ============================================================ */
7+
8+
:root {
9+
/* ===== 页面背景 ===== */
10+
--color-page-bg: #f0f0f0;
11+
12+
/* ===== 表面 / 卡片 ===== */
13+
--color-surface: #ffffff;
14+
--color-surface-border: #212529;
15+
--color-surface-shadow: #909294;
16+
17+
/* ===== 文本 ===== */
18+
--color-text-primary: #212529;
19+
--color-text-secondary: #333333;
20+
--color-text-muted: #666666;
21+
--color-text-on-primary: #ffffff;
22+
--color-text-inverse: #F3F9FC;
23+
24+
/* ===== 棋盘 ===== */
25+
--color-board-light: #F3F9FC;
26+
--color-board-dark: #484A4B;
27+
28+
/* ===== 按钮 ===== */
29+
--color-btn-bg: #e7e7e7;
30+
--color-btn-primary: #209cee;
31+
--color-btn-danger: #e76e55;
32+
--color-btn-warning: #deca14;
33+
--color-btn-success: #1cb221;
34+
35+
/* ===== 边框 ===== */
36+
--color-border-light: #d0d0d0;
37+
--color-border-medium: #adafbc;
38+
--color-border-secondary: #888888;
39+
40+
/* ===== 强调 / 焦点 ===== */
41+
--color-focus-ring: #ffd33d;
42+
--color-highlight-gold: #B79227;
43+
44+
/* ===== 错误 ===== */
45+
--color-error: #cc3333;
46+
47+
/* ===== 遮罩 ===== */
48+
--color-overlay-hover: rgba(0, 0, 0, 0.08);
49+
--color-overlay-medium: rgba(0, 0, 0, 0.45);
50+
--color-overlay-heavy: rgba(0, 0, 0, 0.5);
51+
}

‎src/assets/styles.css‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1+
@import './colors.css';
2+
13
body, html {
24
margin: 0;
35
padding: 0;
46
width: 100%;
57
height: 100%;
6-
background-color: #f0f0f0;
8+
background-color: var(--color-page-bg);
79
-webkit-user-select: none;
810
user-select: none;
911
}
@@ -35,10 +37,10 @@ textarea,
3537
}
3638

3739
.card {
38-
border: 2px solid #212529;
39-
background-color: #fff;
40+
border: 2px solid var(--color-surface-border);
41+
background-color: var(--color-surface);
4042
padding: 1rem;
41-
box-shadow: 2px 2px 0 #909294;
43+
box-shadow: 2px 2px 0 var(--color-surface-shadow);
4244
}
4345

4446
.card.with-title {
@@ -50,32 +52,32 @@ textarea,
5052
font-family: 'Unifont', system-ui, -apple-system, sans-serif;
5153
font-size: 0.8rem;
5254
white-space: nowrap;
53-
border: 2px solid #212529;
54-
background-color: #e7e7e7;
55-
color: #212529;
55+
border: 2px solid var(--color-surface-border);
56+
background-color: var(--color-btn-bg);
57+
color: var(--color-text-primary);
5658
cursor: pointer;
5759
text-align: center;
58-
box-shadow: 2px 2px 0 #909294;
60+
box-shadow: 2px 2px 0 var(--color-surface-shadow);
5961
}
6062

6163
.btn-primary {
62-
background-color: #209cee;
63-
color: #fff;
64+
background-color: var(--color-btn-primary);
65+
color: var(--color-text-on-primary);
6466
}
6567

6668
.btn-danger {
67-
background-color: #e76e55;
68-
color: #fff;
69+
background-color: var(--color-btn-danger);
70+
color: var(--color-text-on-primary);
6971
}
7072

7173
.btn-warning {
72-
background-color: #deca14;
73-
color: #fff;
74+
background-color: var(--color-btn-warning);
75+
color: var(--color-text-on-primary);
7476
}
7577

7678
.btn-success {
77-
background-color: #1cb221;
78-
color: #fff;
79+
background-color: var(--color-btn-success);
80+
color: var(--color-text-on-primary);
7981
}
8082

8183
.btn:disabled {
@@ -85,7 +87,7 @@ textarea,
8587

8688
.btn:not(:disabled):hover {
8789
transform: translateY(1px);
88-
box-shadow: 1px 1px 0 #909294;
90+
box-shadow: 1px 1px 0 var(--color-surface-shadow);
8991
}
9092

9193
.btn:focus {
@@ -95,4 +97,4 @@ textarea,
9597
.btn:disabled {
9698
opacity: 0.5;
9799
cursor: not-allowed;
98-
}
100+
}

‎src/components/BoardPanel.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,7 @@ watch(pieceScale, (val) => {
247247
}
248248
249249
.board-square:focus-visible {
250-
outline: 2px solid #ffd33d;
250+
outline: 2px solid var(--color-focus-ring);
251251
outline-offset: -2px;
252252
z-index: 10;
253253
}
@@ -332,15 +332,15 @@ watch(pieceScale, (val) => {
332332
position: absolute;
333333
transform: translateX(-50%);
334334
font-size: 0.85rem;
335-
color: #333;
335+
color: var(--color-text-secondary);
336336
text-align: center;
337337
}
338338
339339
.coordinate-label.outer-rank {
340340
position: absolute;
341341
transform: translateY(-50%);
342342
font-size: 0.85rem;
343-
color: #333;
343+
color: var(--color-text-secondary);
344344
text-align: center;
345345
width: 100%;
346346
}
@@ -356,17 +356,17 @@ watch(pieceScale, (val) => {
356356
}
357357
358358
.coordinate-label.text-black {
359-
color: #484A4B;
359+
color: var(--color-board-dark);
360360
}
361361
362362
.coordinate-label.text-white {
363-
color: #F3F9FC;
363+
color: var(--color-board-light);
364364
}
365365
366366
.promotion-overlay {
367367
position: absolute;
368368
inset: 0;
369-
background: rgba(0, 0, 0, 0.45);
369+
background: var(--color-overlay-medium);
370370
z-index: 50;
371371
}
372372
</style>

‎src/components/ChessClock.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -63,26 +63,26 @@ const formattedBlackTime = computed(() => formatTime(props.blackTimeSeconds))
6363
justify-content: center;
6464
align-items: center;
6565
padding: 6px;
66-
border: 2px solid #adafbc;
67-
box-shadow: 2px 2px 0 #909294;
66+
border: 2px solid var(--color-border-medium);
67+
box-shadow: 2px 2px 0 var(--color-surface-shadow);
6868
transition: all 0.2s ease;
6969
}
7070
7171
/* 白色方容器 */
7272
.clock-side.side-white {
73-
background-color: #F3F9FC;
74-
color: #484A4B;
73+
background-color: var(--color-board-light);
74+
color: var(--color-board-dark);
7575
}
7676
7777
/* 黑色方容器 */
7878
.clock-side.side-black {
79-
background-color: #484A4B;
80-
color: #F3F9FC;
79+
background-color: var(--color-board-dark);
80+
color: var(--color-board-light);
8181
}
8282
8383
/* 激活状态的高亮指示 */
8484
.clock-side.is-active {
85-
border-color: #B79227;
85+
border-color: var(--color-highlight-gold);
8686
}
8787
8888
.clock-time {

‎src/components/GameSetup.vue‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
<img :src="titleImg" alt="Chess Dragon" class="title-img" />
88
</div>
99
<div class="home-buttons">
10-
<button class="btn btn-home" @click="startSetup('ai')">人机对战</button>
11-
<button class="btn btn-home" @click="startSetup('human')">双人对战</button>
12-
<button class="btn btn-home btn-home--secondary" @click="handleRemote">远程对战</button>
10+
<button class="btn btn-home" @click="startSetup('ai')">人机对局</button>
11+
<button class="btn btn-home" @click="startSetup('human')">双人对局</button>
12+
<button class="btn btn-home btn-home--secondary" @click="handleRemote">远程对局</button>
1313
</div>
1414
</section>
1515

@@ -52,7 +52,7 @@
5252
</label>
5353
</div>
5454

55-
<!-- 强度设置（仅人机对战） -->
55+
<!-- 强度设置（仅人机对局） -->
5656
<div v-if="gameMode === 'ai'" class="setup-section">
5757
<h3>强度</h3>
5858
<div class="option-group">
@@ -64,7 +64,7 @@
6464
</div>
6565
</div>
6666

67-
<!-- AI 风格设置（仅人机对战） -->
67+
<!-- AI 风格设置（仅人机对局） -->
6868
<div v-if="gameMode === 'ai'" class="setup-section">
6969
<h3>AI 风格</h3>
7070
<div class="option-group">
@@ -303,7 +303,7 @@ const handleStart = () => {
303303
justify-content: center;
304304
align-items: center;
305305
padding: 20px;
306-
background-color: #f0f0f0;
306+
background-color: var(--color-page-bg);
307307
}
308308
309309
.home-panel {
@@ -341,35 +341,35 @@ const handleStart = () => {
341341
padding: 14px 0;
342342
font-size: 1.15rem;
343343
font-weight: 600;
344-
border: 2px solid #212529;
345-
background: #fff;
346-
color: #212529;
344+
border: 2px solid var(--color-surface-border);
345+
background: var(--color-surface);
346+
color: var(--color-text-primary);
347347
cursor: pointer;
348348
transition: background-color 0.15s, color 0.15s;
349349
}
350350
351351
.btn-home:hover {
352-
background: #212529;
353-
color: #fff;
352+
background: var(--color-surface-border);
353+
color: var(--color-text-on-primary);
354354
}
355355
356356
.btn-home--secondary {
357-
border-color: #888;
358-
color: #666;
357+
border-color: var(--color-border-secondary);
358+
color: var(--color-text-muted);
359359
}
360360
361361
.btn-home--secondary:hover {
362-
background: #888;
363-
color: #fff;
362+
background: var(--color-border-secondary);
363+
color: var(--color-text-on-primary);
364364
}
365365
366366
.setup-panel {
367367
width: min(560px, 100%);
368368
max-height: 90vh;
369369
overflow: auto;
370370
padding: 20px;
371-
background: #fff;
372-
box-shadow: 2px 2px 0 #909294;
371+
background: var(--color-surface);
372+
box-shadow: 2px 2px 0 var(--color-surface-shadow);
373373
}
374374
375375
.title {
@@ -399,7 +399,7 @@ const handleStart = () => {
399399
align-items: center;
400400
gap: 6px;
401401
padding: 8px 10px;
402-
border: 1px solid #d0d0d0;
402+
border: 1px solid var(--color-border-light);
403403
cursor: pointer;
404404
}
405405
@@ -413,22 +413,22 @@ const handleStart = () => {
413413
}
414414
415415
.difficulty-card.active {
416-
border-color: #212529;
417-
background: #212529;
418-
color: #fff;
416+
border-color: var(--color-surface-border);
417+
background: var(--color-surface-border);
418+
color: var(--color-text-on-primary);
419419
}
420420
421421
.fen-input {
422422
width: 100%;
423423
box-sizing: border-box;
424424
margin-top: 8px;
425425
padding: 8px;
426-
border: 1px solid #d0d0d0;
426+
border: 1px solid var(--color-border-light);
427427
}
428428
429429
.fen-hint {
430430
margin: 4px 0 0;
431-
color: #c33;
431+
color: var(--color-error);
432432
font-size: 0.85rem;
433433
}
434434
@@ -442,7 +442,7 @@ const handleStart = () => {
442442
443443
.error-message {
444444
margin: 0 0 12px;
445-
color: #c33;
445+
color: var(--color-error);
446446
font-size: 0.95rem;
447447
}
448448

0 commit comments

Comments
 (0)