Skip to content

Commit 590a82c

Browse files
haoqunjianghaoqunjiang
committed
feat: router templates
1 parent 8533c36 commit 590a82c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+1507
-162
lines changed

‎template/code/router/cypress/integration/example.spec.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
describe('My First Test', () => {
44
it('visits the app root url', () => {
55
cy.visit('/')
6-
cy.contains('h1', 'Hello Vue 3 + Vite')
6+
cy.contains('h1', 'You did it!')
77
})
88

99
it('navigates to the about page', () => {

‎template/code/router/src/App.vue

Lines changed: 104 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,120 @@
1+
<script setup>
2+
import HelloWorld from '@/components/HelloWorld.vue'
3+
import ColorSchemeSwitch from '@/components/ColorSchemeSwitch.vue'
4+
</script>
5+
16
<template>
2-
<div id="nav">
3-
<router-link to="/">Home</router-link> |
4-
<router-link to="/about">About</router-link>
5-
</div>
7+
<header>
8+
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
9+
10+
<div class="wrapper">
11+
<HelloWorld msg="You did it!" />
12+
<ColorSchemeSwitch />
13+
14+
<div id="nav">
15+
<router-link to="/">Home</router-link>
16+
<router-link to="/about">About</router-link>
17+
</div>
18+
</div>
19+
</header>
20+
621
<router-view />
722
</template>
823

924
<style>
25+
@import '@/assets/base.css';
26+
1027
#app {
11-
font-family: Avenir, Helvetica, Arial, sans-serif;
12-
-webkit-font-smoothing: antialiased;
13-
-moz-osx-font-smoothing: grayscale;
14-
text-align: center;
15-
color: #2c3e50;
28+
max-width: 1280px;
29+
margin: 0 auto;
30+
padding: 2rem;
31+
32+
font-weight: normal;
33+
}
34+
35+
header {
36+
line-height: 1.5;
37+
max-height: 100vh;
38+
}
39+
40+
.logo {
41+
display: block;
42+
margin: 0 auto 2rem;
43+
}
44+
45+
a,
46+
.green {
47+
text-decoration: none;
48+
color: hsla(160, 100%, 37%, 1);
49+
transition: 0.4s;
50+
}
51+
52+
@media (hover: hover) {
53+
a:hover {
54+
background-color: hsla(160, 100%, 37%, 0.2);
55+
}
1656
}
1757
1858
#nav {
19-
padding: 30px;
59+
width: 100%;
60+
font-size: 12px;
61+
text-align: center;
62+
margin-top: 2rem;
63+
}
64+
65+
#nav a.router-link-exact-active {
66+
color: var(--color-text);
67+
}
68+
69+
#nav a.router-link-exact-active:hover {
70+
background-color: transparent;
2071
}
2172
2273
#nav a {
23-
font-weight: bold;
24-
color: #2c3e50;
74+
display: inline-block;
75+
padding: 0 1rem;
76+
border-left: 1px solid var(--color-border);
2577
}
2678
27-
#nav a.router-link-exact-active {
28-
color: #42b983;
79+
#nav a:first-of-type {
80+
border: 0;
81+
}
82+
83+
@media (min-width: 1024px) {
84+
body {
85+
display: flex;
86+
place-items: center;
87+
}
88+
89+
#app {
90+
display: grid;
91+
grid-template-columns: 1fr 1fr;
92+
padding: 0 2rem;
93+
}
94+
95+
header {
96+
display: flex;
97+
place-items: center;
98+
padding-right: calc(var(--section-gap) / 2);
99+
}
100+
101+
header .wrapper {
102+
display: flex;
103+
place-items: flex-start;
104+
flex-wrap: wrap;
105+
}
106+
107+
.logo {
108+
margin: 0 2rem 0 0;
109+
}
110+
111+
#nav {
112+
text-align: left;
113+
margin-left: -1rem;
114+
font-size: 1rem;
115+
116+
padding: 1rem 0;
117+
margin-top: 1rem;
118+
}
29119
}
30120
</style>

‎template/code/router/src/assets/base.css

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/* color palette from <https://github.com/vuejs/theme> */
2+
:root {
3+
--vt-c-white: #ffffff;
4+
--vt-c-white-soft: #f8f8f8;
5+
--vt-c-white-mute: #f2f2f2;
6+
7+
--vt-c-black: #181818;
8+
--vt-c-black-soft: #222222;
9+
--vt-c-black-mute: #282828;
10+
11+
--vt-c-indigo: #2c3e50;
12+
13+
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
14+
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
15+
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
16+
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
17+
18+
--vt-c-text-light-1: var(--vt-c-indigo);
19+
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
20+
--vt-c-text-dark-1: var(--vt-c-white);
21+
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
22+
}
23+
24+
/* semantic color variables for this project */
25+
:root {
26+
--color-background: var(--vt-c-white);
27+
--color-background-soft: var(--vt-c-white-soft);
28+
--color-background-mute: var(--vt-c-white-mute);
29+
30+
--color-border: var(--vt-c-divider-light-2);
31+
--color-border-hover: var(--vt-c-divider-light-1);
32+
33+
--color-heading: var(--vt-c-text-light-1);
34+
--color-text: var(--vt-c-text-light-1);
35+
36+
--section-gap: 160px;
37+
}
38+
39+
[data-color-scheme='dark'] {
40+
--color-background: var(--vt-c-black);
41+
--color-background-soft: var(--vt-c-black-soft);
42+
--color-background-mute: var(--vt-c-black-mute);
43+
44+
--color-border: var(--vt-c-divider-dark-2);
45+
--color-border-hover: var(--vt-c-divider-dark-1);
46+
47+
--color-heading: var(--vt-c-text-dark-1);
48+
--color-text: var(--vt-c-text-dark-2);
49+
}
50+
51+
*,
52+
*::before,
53+
*::after {
54+
box-sizing: border-box;
55+
margin: 0;
56+
position: relative;
57+
font-weight: normal;
58+
}
59+
60+
body {
61+
min-height: 100vh;
62+
color: var(--color-text);
63+
background: var(--color-background);
64+
transition: color 0.5s, background-color 0.5s;
65+
line-height: 1.6;
66+
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
67+
Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
68+
font-size: 15px;
69+
text-rendering: optimizeLegibility;
70+
-webkit-font-smoothing: antialiased;
71+
-moz-osx-font-smoothing: grayscale;
72+
}

‎template/code/router/src/assets/logo.png

-6.69 KB
Binary file not shown.

‎template/code/router/src/assets/logo.svg

Lines changed: 1 addition & 0 deletions
Loading

‎template/code/router/src/components/ColorSchemeSwitch.vue

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<script setup>
2+
import IconMoon from './icons/Moon.vue'
3+
import IconSun from './icons/Sun.vue'
4+
5+
import { watchEffect } from 'vue'
6+
import useColorScheme from '@/composables/useColorScheme'
7+
8+
const { isDark, toggle } = useColorScheme()
9+
watchEffect(() => {
10+
if (isDark.value) {
11+
window.document.body.setAttribute('data-color-scheme', 'dark')
12+
} else {
13+
window.document.body.setAttribute('data-color-scheme', 'light')
14+
}
15+
})
16+
</script>
17+
18+
<template>
19+
<label class="color-scheme-switch-wrapper">
20+
<span class="text">Color Scheme:</span>
21+
22+
<button class="color-scheme-switch" @click="toggle">
23+
<div class="color-scheme-switch-check">
24+
<div class="color-scheme-switch-icon">
25+
<IconSun class="color-scheme-switch-svg is-sun" title="light" />
26+
<IconMoon class="color-scheme-switch-svg is-moon" title="dark" />
27+
</div>
28+
</div>
29+
</button>
30+
</label>
31+
</template>
32+
33+
<style>
34+
.color-scheme-switch-wrapper {
35+
background-color: var(--color-background-soft);
36+
border-radius: 8px;
37+
38+
display: flex;
39+
justify-content: space-between;
40+
41+
margin-top: 2em;
42+
padding: 12px 14px 12px 16px;
43+
line-height: 22px;
44+
45+
cursor: pointer;
46+
}
47+
48+
.color-scheme-switch-wrapper .text {
49+
font-weight: 500;
50+
font-size: 12px;
51+
}
52+
53+
.color-scheme-switch {
54+
position: relative;
55+
margin-left: 1em;
56+
57+
border-radius: 11px;
58+
width: 40px;
59+
height: 22px;
60+
flex-shrink: 0;
61+
border: 1px solid var(--color-border);
62+
background-color: var(--color-background-mute);
63+
transition: border-color 0.25s, background-color 0.25s;
64+
65+
cursor: pointer;
66+
}
67+
68+
.color-scheme-switch:hover {
69+
border-color: var(--color-border-hover);
70+
}
71+
72+
.color-scheme-switch-check {
73+
position: absolute;
74+
top: 1px;
75+
left: 1px;
76+
width: 18px;
77+
height: 18px;
78+
border-radius: 50%;
79+
background-color: var(--color-background);
80+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
81+
transition: background-color 0.25s, transform 0.25s;
82+
}
83+
84+
[data-color-scheme='dark'] .color-scheme-switch-check {
85+
transform: translateX(18px);
86+
}
87+
88+
.color-scheme-switch-icon {
89+
position: relative;
90+
width: 18px;
91+
height: 18px;
92+
border-radius: 50%;
93+
overflow: hidden;
94+
}
95+
96+
.color-scheme-switch-svg {
97+
position: absolute;
98+
top: 3px;
99+
left: 3px;
100+
width: 12px;
101+
height: 12px;
102+
color: var(--color-heading);
103+
}
104+
105+
.color-scheme-switch-svg.is-sun {
106+
opacity: 1;
107+
}
108+
.color-scheme-switch-svg.is-moon {
109+
opacity: 0;
110+
}
111+
112+
[data-color-scheme='dark'] .color-scheme-switch-svg.is-sun {
113+
opacity: 0;
114+
}
115+
[data-color-scheme='dark'] .color-scheme-switch-svg.is-moon {
116+
opacity: 1;
117+
}
118+
119+
[data-color-scheme='dark'] .color-scheme-switch-svg {
120+
transition: opacity 0.25s;
121+
}
122+
123+
@media (min-width: 1024px) {
124+
.color-scheme-switch-wrapper {
125+
justify-content: left;
126+
border: none;
127+
background-color: inherit;
128+
padding: 0;
129+
margin-top: 1.2em;
130+
}
131+
132+
.color-scheme-switch-wrapper .text {
133+
font-size: 1.2rem;
134+
font-weight: normal;
135+
}
136+
}
137+
</style>

0 commit comments

Comments
 (0)