Skip to content

Commit aefb860

Browse files
lisongelisonge
committed
pref: css + icon
1 parent db7b142 commit aefb860

File tree

8 files changed

+172
-149
lines changed

8 files changed

+172
-149
lines changed

‎src/App.vue‎

Lines changed: 0 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -33,21 +33,6 @@ useEventListener('click', () => {
3333
<ScrollbarWrapper />
3434
</template>
3535
<style lang="scss">
36-
$winMinWidth: 1200px;
37-
$winMinHeight: 700px;
38-
39-
:root {
40-
--gkd-w: max(#{$winMinWidth}, 100vw);
41-
--gkd-h: max(#{$winMinHeight}, 100vh);
42-
}
43-
44-
body {
45-
width: var(--gkd-w);
46-
&.body-auto-w {
47-
--gkd-w: 100vw;
48-
}
49-
}
50-
5136
#app {
5237
display: flex;
5338
flex-direction: column;
@@ -56,65 +41,4 @@ body {
5641
--gkd-h: auto;
5742
}
5843
}
59-
.gkd_code,
60-
[gkd_code] {
61-
font-family:
62-
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
63-
'Courier New', monospace !important;
64-
}
65-
66-
[direction-rtl],
67-
.direction-rtl {
68-
direction: rtl;
69-
}
70-
71-
.box-shadow-dim,
72-
[box-shadow-dim] {
73-
box-shadow:
74-
0 3px 6px -4px rgba(0, 0, 0, 0.12),
75-
0 6px 16px 0 rgba(0, 0, 0, 0.08),
76-
0 9px 28px 8px rgba(0, 0, 0, 0.05);
77-
}
78-
@media (prefers-color-scheme: dark) {
79-
.box-shadow-dim,
80-
[box-shadow-dim] {
81-
box-shadow:
82-
0 3px 6px -4px rgba(0, 0, 0, 0.24),
83-
0 6px 12px 0 rgba(0, 0, 0, 0.16),
84-
0 9px 18px 8px rgba(0, 0, 0, 0.1);
85-
}
86-
}
87-
88-
// 移除 inline 元素的空白间隙
89-
img,
90-
svg,
91-
video,
92-
canvas,
93-
audio,
94-
iframe,
95-
embed,
96-
object {
97-
display: block;
98-
}
99-
100-
.scrollbar-hidden,
101-
[scrollbar-hidden] {
102-
scrollbar-width: none;
103-
&::-webkit-scrollbar {
104-
display: none;
105-
}
106-
}
107-
108-
html,
109-
body,
110-
#app {
111-
/* 禁止 iOS/Edge 滚动回弹效果 */
112-
overscroll-behavior: none;
113-
}
114-
115-
html,
116-
body {
117-
font-size: 14px;
118-
line-height: 20px;
119-
}
12044
</style>

‎src/assets/svg/discussion.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/main.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import 'normalize.css';
22
import 'uno.css';
3+
import '@/style/index.scss';
34
import App from './App.vue';
45
import router from './router';
56
import commitLog from './utils/commit.data';

‎src/style/atom.scss‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.gkd_code,
2+
[gkd_code] {
3+
font-family:
4+
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
5+
'Courier New', monospace !important;
6+
}
7+
8+
[direction-rtl],
9+
.direction-rtl {
10+
direction: rtl;
11+
}
12+
13+
.box-shadow-dim,
14+
[box-shadow-dim] {
15+
box-shadow:
16+
0 3px 6px -4px rgba(0, 0, 0, 0.12),
17+
0 6px 16px 0 rgba(0, 0, 0, 0.08),
18+
0 9px 28px 8px rgba(0, 0, 0, 0.05);
19+
}
20+
@media (prefers-color-scheme: dark) {
21+
.box-shadow-dim,
22+
[box-shadow-dim] {
23+
box-shadow:
24+
0 3px 6px -4px rgba(0, 0, 0, 0.24),
25+
0 6px 12px 0 rgba(0, 0, 0, 0.16),
26+
0 9px 18px 8px rgba(0, 0, 0, 0.1);
27+
}
28+
}
29+
30+
.scrollbar-hidden,
31+
[scrollbar-hidden] {
32+
scrollbar-width: none;
33+
&::-webkit-scrollbar {
34+
display: none;
35+
}
36+
}

‎src/style/html-reset.scss‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// 移除 inline 元素的空白间隙
2+
img,
3+
svg,
4+
video,
5+
canvas,
6+
audio,
7+
iframe,
8+
embed,
9+
object {
10+
display: block;
11+
}
12+
13+
a {
14+
color: inherit;
15+
}
16+
17+
* {
18+
/* 禁止 iOS/Edge 滚动回弹效果 */
19+
overscroll-behavior: none;
20+
}
21+
22+
html,
23+
body {
24+
font-size: 14px;
25+
line-height: 20px;
26+
}

‎src/style/index.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@import './html-reset.scss';
2+
@import './atom.scss';
3+
4+
$winMinWidth: 1200px;
5+
$winMinHeight: 700px;
6+
7+
:root {
8+
--gkd-w: max(#{$winMinWidth}, 100vw);
9+
--gkd-h: max(#{$winMinHeight}, 100vh);
10+
}
11+
12+
body {
13+
width: var(--gkd-w);
14+
&.body-auto-w {
15+
--gkd-w: 100vw;
16+
}
17+
}

‎src/views/home/HomePage.vue‎

Lines changed: 55 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -291,31 +291,29 @@ const settingsDlgShow = shallowRef(false);
291291
</template>
292292
</NSpace>
293293
<div flex-1></div>
294-
<div flex gap-24px items-center pr-8px>
295-
<NButton text title="设置" @click="settingsDlgShow = true">
296-
<template #icon>
297-
<NIcon :size="24">
294+
<div flex gap-24px items-center pr-8px class="[--svg-h:24px]">
295+
<NTooltip>
296+
<template #trigger>
297+
<NButton text @click="settingsDlgShow = true">
298298
<SvgIcon name="settings" />
299-
</NIcon>
299+
</NButton>
300300
</template>
301-
</NButton>
302-
<RouterLink flex to="/selector" title="测试选择器">
303-
<NButton text>
304-
<template #icon>
305-
<NIcon :size="24">
301+
设置
302+
</NTooltip>
303+
<NTooltip>
304+
<template #trigger>
305+
<RouterLink flex to="/selector">
306+
<NButton text>
306307
<SvgIcon name="terminal" />
307-
</NIcon>
308-
</template>
309-
</NButton>
310-
</RouterLink>
308+
</NButton>
309+
</RouterLink>
310+
</template>
311+
测试选择器
312+
</NTooltip>
311313
<NPopover>
312314
<template #trigger>
313315
<NButton text>
314-
<template #icon>
315-
<NIcon :size="24">
316-
<SvgIcon name="import" />
317-
</NIcon>
318-
</template>
316+
<SvgIcon name="import" />
319317
</NButton>
320318
</template>
321319
<NSpace vertical>
@@ -327,29 +325,46 @@ const settingsDlgShow = shallowRef(false);
327325
</NButton>
328326
</NSpace>
329327
</NPopover>
330-
<RouterLink flex to="/device" title="连接设备">
331-
<NButton text>
332-
<template #icon>
333-
<NIcon :size="24">
328+
<NTooltip>
329+
<template #trigger>
330+
<RouterLink flex to="/device">
331+
<NButton text>
334332
<SvgIcon name="device" />
335-
</NIcon>
336-
</template>
337-
</NButton>
338-
</RouterLink>
339-
<a
340-
flex
341-
href="https://github.com/gkd-kit/inspect"
342-
target="_blank"
343-
rel="noopener noreferrer"
344-
>
345-
<NButton text>
346-
<template #icon>
347-
<NIcon :size="24">
333+
</NButton>
334+
</RouterLink>
335+
</template>
336+
连接设备
337+
</NTooltip>
338+
<NTooltip>
339+
<template #trigger>
340+
<a
341+
flex
342+
href="https://github.com/orgs/gkd-kit/discussions"
343+
target="_blank"
344+
rel="noopener noreferrer"
345+
>
346+
<NButton text>
347+
<SvgIcon name="discussion" />
348+
</NButton>
349+
</a>
350+
</template>
351+
讨论交流
352+
</NTooltip>
353+
<NTooltip>
354+
<template #trigger>
355+
<a
356+
flex
357+
href="https://github.com/gkd-kit/inspect"
358+
target="_blank"
359+
rel="noopener noreferrer"
360+
>
361+
<NButton text>
348362
<SvgIcon name="github" />
349-
</NIcon>
350-
</template>
351-
</NButton>
352-
</a>
363+
</NButton>
364+
</a>
365+
</template>
366+
Github
367+
</NTooltip>
353368
</div>
354369
</div>
355370
<NDataTable

0 commit comments

Comments
 (0)
⚡