Skip to content

Commit b54cf2f

Browse files
urzeyeurzeye
committed
fix(ui): improve dark mode styling for history modals and result buttons
1 parent b771b00 commit b54cf2f

4 files changed

Lines changed: 153 additions & 53 deletions

File tree

‎frontend/src/components/history/ImageGalleryModal.vue‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -294,7 +294,7 @@ const formattedDate = computed(() => {
294294
295295
/* 模态框主体 */
296296
.modal-body {
297-
background: white;
297+
background: var(--bg-card);
298298
width: 100%;
299299
max-width: 1000px;
300300
height: 90vh;
@@ -307,7 +307,7 @@ const formattedDate = computed(() => {
307307
/* 头部区域 */
308308
.modal-header {
309309
padding: 20px;
310-
border-bottom: 1px solid #eee;
310+
border-bottom: 1px solid var(--border-color);
311311
display: flex;
312312
justify-content: space-between;
313313
align-items: flex-start;
@@ -329,7 +329,7 @@ const formattedDate = computed(() => {
329329
font-size: 18px;
330330
font-weight: 600;
331331
line-height: 1.4;
332-
color: #1a1a1a;
332+
color: var(--text-main);
333333
word-break: break-word;
334334
transition: max-height 0.3s ease;
335335
}
@@ -350,7 +350,8 @@ const formattedDate = computed(() => {
350350
border-radius: 4px;
351351
cursor: pointer;
352352
font-size: 11px;
353-
color: #666;
353+
color: var(--text-sub);
354+
background: var(--bg-elevated);
354355
transition: all 0.2s;
355356
margin-top: 2px;
356357
}
@@ -363,7 +364,7 @@ const formattedDate = computed(() => {
363364
/* 元信息 */
364365
.modal-meta {
365366
font-size: 12px;
366-
color: #999;
367+
color: var(--text-sub);
367368
display: flex;
368369
align-items: center;
369370
gap: 12px;
@@ -376,12 +377,12 @@ const formattedDate = computed(() => {
376377
align-items: center;
377378
gap: 4px;
378379
padding: 4px 10px;
379-
background: white;
380-
border: 1px solid #dee2e6;
380+
background: var(--bg-elevated);
381+
border: 1px solid var(--border-color);
381382
border-radius: 4px;
382383
cursor: pointer;
383384
font-size: 12px;
384-
color: #495057;
385+
color: var(--text-main);
385386
transition: all 0.2s;
386387
}
387388
@@ -411,13 +412,13 @@ const formattedDate = computed(() => {
411412
border: none;
412413
font-size: 24px;
413414
cursor: pointer;
414-
color: #666;
415+
color: var(--text-sub);
415416
padding: 0;
416417
line-height: 1;
417418
}
418419
419420
.close-icon:hover {
420-
color: #333;
421+
color: var(--text-main);
421422
}
422423
423424
/* 图片网格 */
@@ -497,11 +498,11 @@ const formattedDate = computed(() => {
497498
gap: 6px;
498499
padding: 8px 16px;
499500
background: white;
500-
border: none;
501501
border-radius: 6px;
502502
cursor: pointer;
503503
font-size: 13px;
504-
color: #333;
504+
color: var(--text-main);
505+
background: var(--bg-elevated);
505506
transition:
506507
background-color 0.2s,
507508
color 0.2s,
@@ -525,12 +526,12 @@ const formattedDate = computed(() => {
525526
.placeholder {
526527
width: 100%;
527528
aspect-ratio: 3/4;
528-
background: #f5f5f5;
529+
background: var(--bg-elevated);
529530
border-radius: 8px;
530531
display: flex;
531532
align-items: center;
532533
justify-content: center;
533-
color: #999;
534+
color: var(--text-placeholder);
534535
font-size: 14px;
535536
}
536537
@@ -540,7 +541,7 @@ const formattedDate = computed(() => {
540541
display: flex;
541542
justify-content: space-between;
542543
font-size: 12px;
543-
color: #666;
544+
color: var(--text-sub);
544545
}
545546
546547
.download-link {

‎frontend/src/components/history/OutlineModal.vue‎

Lines changed: 75 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,40 @@
3434
<span class="word-count">{{ page.content.length }} 字</span>
3535
</div>
3636
<div class="outline-page-card-content">{{ page.content }}</div>
37+
38+
<div
39+
v-if="page.image_suggestion"
40+
class="image-suggestion-card"
41+
>
42+
<div class="suggestion-title">
43+
<svg
44+
width="14"
45+
height="14"
46+
viewBox="0 0 24 24"
47+
fill="none"
48+
stroke="currentColor"
49+
stroke-width="2"
50+
>
51+
<rect
52+
x="3"
53+
y="3"
54+
width="18"
55+
height="18"
56+
rx="2"
57+
></rect>
58+
<circle
59+
cx="8.5"
60+
cy="8.5"
61+
r="1.5"
62+
></circle>
63+
<polyline points="21 15 16 10 5 21"></polyline>
64+
</svg>
65+
配图建议
66+
</div>
67+
<div class="suggestion-content">
68+
{{ page.image_suggestion }}
69+
</div>
70+
</div>
3771
</div>
3872
</div>
3973
</div>
@@ -55,6 +89,7 @@
5589
interface Page {
5690
type: "cover" | "content" | "summary";
5791
content: string;
92+
image_suggestion?: string;
5893
}
5994
6095
// 定义 Props
@@ -96,7 +131,7 @@ function getPageTypeName(type: string): string {
96131
97132
/* 模态框内容容器 */
98133
.outline-modal-content {
99-
background: white;
134+
background: var(--bg-card);
100135
width: 100%;
101136
max-width: 800px;
102137
max-height: 85vh;
@@ -110,7 +145,7 @@ function getPageTypeName(type: string): string {
110145
/* 模态框头部 */
111146
.outline-modal-header {
112147
padding: 20px 24px;
113-
border-bottom: 1px solid #eee;
148+
border-bottom: 1px solid var(--border-color);
114149
display: flex;
115150
justify-content: space-between;
116151
align-items: center;
@@ -130,27 +165,27 @@ function getPageTypeName(type: string): string {
130165
border: none;
131166
font-size: 24px;
132167
cursor: pointer;
133-
color: #666;
168+
color: var(--text-sub);
134169
padding: 0;
135170
line-height: 1;
136171
transition: color 0.2s;
137172
}
138173
139174
.close-icon:hover {
140-
color: #333;
175+
color: var(--text-main);
141176
}
142177
143178
/* 模态框主体（可滚动） */
144179
.outline-modal-body {
145180
flex: 1;
146181
overflow-y: auto;
147182
padding: 20px 24px;
148-
background: #f9fafb;
183+
background: var(--bg-body);
149184
}
150185
151186
/* 大纲页面卡片 */
152187
.outline-page-card {
153-
background: #ffffff;
188+
background: var(--bg-card);
154189
border-radius: 12px;
155190
padding: 20px;
156191
margin-bottom: 16px;
@@ -202,8 +237,8 @@ function getPageTypeName(type: string): string {
202237
border-radius: 4px;
203238
font-size: 11px;
204239
font-weight: 600;
205-
background: #e9ecef;
206-
color: #6c757d;
240+
background: var(--bg-elevated);
241+
color: var(--text-sub);
207242
}
208243
209244
.page-type-badge.cover {
@@ -225,18 +260,46 @@ function getPageTypeName(type: string): string {
225260
.word-count {
226261
margin-left: auto;
227262
font-size: 11px;
228-
color: #999;
263+
color: var(--text-sub);
229264
}
230265
231266
/* 卡片内容 */
232267
.outline-page-card-content {
233268
font-size: 14px;
234269
line-height: 1.8;
235-
color: #374151;
270+
color: var(--text-main);
236271
white-space: pre-wrap;
237272
word-break: break-word;
238-
font-family:
239-
-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
273+
}
274+
275+
/* 配图建议卡片 */
276+
.image-suggestion-card {
277+
margin-top: 16px;
278+
padding: 12px 14px;
279+
background: var(--bg-hover);
280+
border-radius: 8px;
281+
border: 1px dashed var(--border-color);
282+
font-size: 13px;
283+
}
284+
285+
.suggestion-title {
286+
display: flex;
287+
align-items: center;
288+
gap: 6px;
289+
color: var(--color-rose, #f43f5e);
290+
font-weight: 600;
291+
margin-bottom: 8px;
292+
font-size: 13px;
293+
}
294+
295+
.suggestion-content {
296+
line-height: 1.6;
297+
color: var(--text-sub);
298+
word-break: break-word;
299+
padding: 8px 10px;
300+
border-radius: 10px;
301+
border: 1px solid rgba(255, 95, 109, 0.18);
302+
background: rgba(255, 255, 255, 0.02);
240303
}
241304
242305
/* 响应式布局 */

‎frontend/src/components/history/StatsOverview.vue‎

Lines changed: 60 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,37 @@
11
<template>
22
<!-- 统计概览卡片 -->
3-
<div class="stats-overview" v-if="stats">
3+
<div
4+
class="stats-overview"
5+
v-if="stats"
6+
>
47
<div class="stat-box">
58
<div class="stat-icon-circle blue">
6-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
7-
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
9+
<svg
10+
width="24"
11+
height="24"
12+
viewBox="0 0 24 24"
13+
fill="none"
14+
stroke="currentColor"
15+
stroke-width="2"
16+
stroke-linecap="round"
17+
stroke-linejoin="round"
18+
>
19+
<path
20+
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
21+
></path>
822
<polyline points="14 2 14 8 20 8"></polyline>
9-
<line x1="16" y1="13" x2="8" y2="13"></line>
10-
<line x1="16" y1="17" x2="8" y2="17"></line>
23+
<line
24+
x1="16"
25+
y1="13"
26+
x2="8"
27+
y2="13"
28+
></line>
29+
<line
30+
x1="16"
31+
y1="17"
32+
x2="8"
33+
y2="17"
34+
></line>
1135
<polyline points="10 9 9 9 8 9"></polyline>
1236
</svg>
1337
</div>
@@ -19,7 +43,16 @@
1943

2044
<div class="stat-box">
2145
<div class="stat-icon-circle green">
22-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
46+
<svg
47+
width="24"
48+
height="24"
49+
viewBox="0 0 24 24"
50+
fill="none"
51+
stroke="currentColor"
52+
stroke-width="2"
53+
stroke-linecap="round"
54+
stroke-linejoin="round"
55+
>
2356
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
2457
<polyline points="22 4 12 14.01 9 11.01"></polyline>
2558
</svg>
@@ -32,9 +65,20 @@
3265

3366
<div class="stat-box">
3467
<div class="stat-icon-circle orange">
35-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
68+
<svg
69+
width="24"
70+
height="24"
71+
viewBox="0 0 24 24"
72+
fill="none"
73+
stroke="currentColor"
74+
stroke-width="2"
75+
stroke-linecap="round"
76+
stroke-linejoin="round"
77+
>
3678
<path d="M12 20h9"></path>
37-
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
79+
<path
80+
d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"
81+
></path>
3882
</svg>
3983
</div>
4084
<div class="stat-content">
@@ -57,17 +101,17 @@
57101
58102
// 定义 Props
59103
interface Stats {
60-
total?: number
104+
total?: number;
61105
by_status?: {
62-
completed?: number
63-
draft?: number
64-
generating?: number
65-
}
106+
completed?: number;
107+
draft?: number;
108+
generating?: number;
109+
};
66110
}
67111
68112
defineProps<{
69-
stats: Stats | null
70-
}>()
113+
stats: Stats | null;
114+
}>();
71115
</script>
72116

73117
<style scoped>
@@ -85,7 +129,7 @@ defineProps<{
85129
align-items: center;
86130
gap: 16px;
87131
padding: 20px 24px;
88-
background: white;
132+
background: var(--bg-card);
89133
border-radius: 12px;
90134
border: 1px solid var(--border-color);
91135
transition: all 0.2s ease;

0 commit comments

Comments
 (0)