Skip to content

Commit 7db29de

Browse files
letsohyeahletsohyeah
committed
[init] 更新模板
1 parent f139bc8 commit 7db29de

File tree

3,510 files changed

+1292683
-29514
lines changed

Some content is hidden

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

3,510 files changed

+1292683
-29514
lines changed

‎.env

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
COMPOSE_PROJECT_NAME=es_nuxt
1+
COMPOSE_PROJECT_NAME=es-template
22

33
WP_PORT=9000
44
WP_PORT_PHP_MY_ADMIN=9080

‎db/backup/wp-2022-09-01-16:56:13.sql

+586
Large diffs are not rendered by default.

‎db/backup/wp-2022-09-01-18:54:49.sql

+585
Large diffs are not rendered by default.

‎db/default/wp.sql

+17-18
Large diffs are not rendered by default.

‎docker-compose.yaml

+2-2
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ services:
2525
WORDPRESS_DB_NAME: $WP_MYSQL_DATABASE
2626
WORDPRESS_DEBUG: $WP_DEBUG
2727
WORDPRESS_CONFIG_EXTRA: |
28-
define('WP_SITEURL', 'http://192.168.50.5:$WP_PORT');
29-
define('WP_HOME', 'http://192.168.50.5:$WP_PORT');
28+
define('WP_SITEURL', 'http://localhost:$WP_PORT');
29+
define('WP_HOME', 'http://localhost:$WP_PORT');
3030
3131
phpmyadmin:
3232
container_name: ${COMPOSE_PROJECT_NAME}_phpmyadmin

‎nuxt-app/.env

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
APP_NAME = ES Template
2+
API_DEV_URL = http://localhost:9000
3+
API_DEPLOY_URL = http://localhost:9000

‎nuxt-app/.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
*.log*
3+
.nuxt
4+
.nitro
5+
.cache

‎nuxt-app/README.md

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# Nuxt 3 Minimal Starter
2+
3+
Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more.
4+
5+
## Setup
6+
7+
Make sure to install the dependencies:
8+
9+
```bash
10+
# yarn
11+
yarn install
12+
13+
# npm
14+
npm install
15+
16+
# pnpm
17+
pnpm install --shamefully-hoist
18+
```
19+
20+
## Development Server
21+
22+
Start the development server on http://localhost:3000
23+
24+
```bash
25+
npm run dev
26+
```
27+
28+
## Production
29+
30+
Build the application for production:
31+
32+
```bash
33+
npm run build
34+
```
35+
36+
Locally preview production build:
37+
38+
```bash
39+
npm run preview
40+
```
41+
42+
Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information.
43+
# es-template

‎nuxt-app/app.vue

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<template>
2+
<div>
3+
<div class="loading">
4+
<div class="container">
5+
<div class="loading__logo">
6+
<h2>Loading</h2>
7+
</div>
8+
</div>
9+
</div>
10+
<NuxtLayout name="default">
11+
<NuxtPage />
12+
</NuxtLayout>
13+
</div>
14+
</template>
15+
<script setup>
16+
import useStore from "~~/store"
17+
18+
const store = useStore()
19+
</script>
20+
<style lang="scss">
21+
$class-name: loading;
22+
.#{$class-name} {
23+
@include size(100vw, 100vh);
24+
25+
position: fixed;
26+
top: 0;
27+
left: 0;
28+
z-index: 999;
29+
background-color: map-get($colors, theme);
30+
opacity: 1;
31+
transition: opacity .6s;
32+
33+
@include media-breakpoint-down(tablet) {
34+
@include size(100vw, 100%);
35+
}
36+
37+
&__logo {
38+
@include size(144px, auto);
39+
40+
position: absolute;
41+
bottom: 80px;
42+
43+
@include media-breakpoint-down(tablet) {
44+
@include size(104px, auto);
45+
46+
bottom: 19px;
47+
}
48+
}
49+
50+
.landed & {
51+
pointer-events: none;
52+
opacity: 0;
53+
}
54+
}
55+
</style>

‎nuxt-app/assets/img/es-sample.png

119 KB
Loading

‎nuxt-app/components/Icon.vue

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<svg class="icon">
3+
<use :xlink:href="'#' + name" />
4+
</svg>
5+
</template>
6+
7+
<script>
8+
9+
export default {
10+
name: 'Icon',
11+
props: {
12+
name: {
13+
type: String,
14+
required: true,
15+
},
16+
},
17+
}
18+
</script>
19+
20+
<style lang='scss'>
21+
.icon {
22+
@include size(1rem);
23+
24+
overflow: hidden;
25+
fill: currentColor;
26+
}
27+
</style>

‎nuxt-app/components/page/dev.vue

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<template>
2+
<div
3+
class="dev container"
4+
data-scroll
5+
data-scroll-sticky
6+
data-scroll-target="#wrapper"
7+
>
8+
<div class="dev__wrapper">
9+
<div class="dev__grid">
10+
<div v-for="num in 12" :key="num" class="dev__grid-col -desktop" />
11+
<div v-for="num in 8" :key="num" class="dev__grid-col -tablet" />
12+
<div v-for="num in 4" :key="num" class="dev__grid-col -mobile" />
13+
</div>
14+
</div>
15+
</div>
16+
</template>
17+
<style lang="scss">
18+
.dev {
19+
@include size(100vw, 100vh);
20+
21+
position: fixed;
22+
display: flex;
23+
flex-direction: column;
24+
top: 0;
25+
left: 50%;
26+
transform: translateX(-50%);
27+
pointer-events: none;
28+
29+
&__wrapper {
30+
@include size(100%);
31+
32+
position: relative;
33+
34+
> * {
35+
margin-bottom: 24px;
36+
}
37+
}
38+
39+
&__grid {
40+
@include size(100%);
41+
42+
position: absolute;
43+
top: 0;
44+
left: 0;
45+
display: flex;
46+
justify-content: space-between;
47+
pointer-events: none;
48+
49+
&-col {
50+
background-color: #555555;
51+
opacity: 0.1;
52+
53+
&.-desktop {
54+
@include size(calc((100% - (11 * 24px)) / 12), 100%);
55+
56+
@include media-breakpoint-down(medium) {
57+
display: none;
58+
}
59+
}
60+
61+
&.-tablet {
62+
@include size(calc((100% - (7 * 24px)) / 8), 100%);
63+
64+
display: none;
65+
66+
@include media-breakpoint-down(medium) {
67+
@include media-breakpoint-up(tablet) {
68+
display: block;
69+
70+
}
71+
}
72+
}
73+
74+
&.-mobile {
75+
@include size(calc((100% - (3 * 24px)) / 4), 100%);
76+
77+
display: none;
78+
79+
@include media-breakpoint-down(tablet) {
80+
display: block;
81+
}
82+
}
83+
}
84+
}
85+
}
86+
</style>

‎nuxt-app/components/page/pagination.vue

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<div
3+
class="page-pagination"
4+
v-if="length > 1"
5+
>
6+
<ul class="page-pagination__list">
7+
<li
8+
class="page-pagination__list-item -en"
9+
:class="{ '-active': store.globalState.currentPage === key }"
10+
v-for="(item, key) in length"
11+
:key="key"
12+
@mouseover="store.changeCursorState('hover', '')"
13+
@mouseleave="store.changeCursorState('default', '')"
14+
@click="store.changeCurrentPage(key)"
15+
>
16+
{{ key + 1 }}
17+
</li>
18+
</ul>
19+
</div>
20+
</template>
21+
<script setup>
22+
import useStore from "~~/store"
23+
24+
const store = useStore()
25+
const props = defineProps({
26+
length: {
27+
type: Number,
28+
default: 1,
29+
}
30+
})
31+
</script>
32+
<style lang="scss">
33+
$class-name: page-pagination;
34+
.#{$class-name} {
35+
display: flex;
36+
justify-content: center;
37+
38+
&__list {
39+
display: flex;
40+
41+
&-item {
42+
@include typo('heading', 2);
43+
44+
margin-right: 12px;
45+
opacity: 0.5;
46+
transition: opacity 0.3s;
47+
cursor: pointer;
48+
49+
&:last-child {
50+
margin-right: 0;
51+
}
52+
53+
&:hover {
54+
opacity: 1;
55+
}
56+
57+
&.-active {
58+
opacity: 1;
59+
}
60+
}
61+
}
62+
}
63+
</style>

‎nuxt-app/composables/esFetch.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import type { FetchOptions } from 'ohmyfetch'
2+
// 教學 https://github.com/nuxt/framework/discussions/3828
3+
export const esFetch = (path: string, opts?: FetchOptions) => {
4+
const config = useRuntimeConfig()
5+
return $fetch(path, { baseURL: config.public.apiBase, ...(opts && { ...opts }) })
6+
}

‎nuxt-app/composables/esTools.ts

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
export const esNotification = (data: {
2+
type: '', title: '', message: ''
3+
}) => {
4+
if (document.querySelector('.es_notification')) {return false}
5+
const div = document.createElement('div')
6+
div.innerHTML = '<div class="inner"><h2>' + data.title + '</h2><p>' + data.message + '</p></div>'
7+
div.classList.add('esNotification')
8+
div.classList.add(data.type)
9+
document.body.appendChild(div)
10+
11+
setTimeout(() => {
12+
const noti = document.querySelector('.esNotification')
13+
noti.classList.add('out')
14+
setTimeout(() => {noti.remove()}, 200)
15+
}, 2000)
16+
}
17+
18+
export const esShareTo = ( data:{ url: String, socialMedia: String }) => {
19+
let shareUrl
20+
switch (data.socialMedia) {
21+
case 'Facebook' :
22+
shareUrl = 'https://facebook.com/sharer.php?u=' + data.url
23+
break
24+
case 'Line' :
25+
shareUrl = 'https://social-plugins.line.me/lineit/share?url=' + data.url + '&amp;via=esdesign'
26+
break
27+
case 'Twitter' :
28+
shareUrl = 'https://twitter.com/intent/tweet?url=' + data.url + '&amp;via=esdesign'
29+
}
30+
window.open(
31+
shareUrl,
32+
'shareWindow',
33+
'menubar=0,location=0,toolbar=0,status=0,scrollbars=1,width=800,height=600'
34+
)
35+
}

‎nuxt-app/composables/global.ts

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
import useStore from "~~/store"
3+
4+
export const ESinit = (data:{ scroll: Function }) => {
5+
const store = useStore()
6+
const route = useRoute()
7+
const { hook } = useNuxtApp()
8+
9+
watch(route, () => {
10+
data.value.destroy()
11+
})
12+
hook('page:start', () => {
13+
data.value.init()
14+
})
15+
hook('page:finish', () => {
16+
store.changeCursorState('default', '')
17+
setTimeout(() => {
18+
data.value.update()
19+
document.body.classList.add('landed')
20+
}, 700) // 暫時找不到為什麼 page:finish 同樣不是在 dom ready，可能還是測試功能
21+
})
22+
}

‎nuxt-app/composables/hint.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
Nuxt will soon support a composables/ directory to auto import your
2+
Vue composables into your application when used, learn more on the
3+
https://github.com/nuxt/framework/issues/639

‎nuxt-app/composables/loadimage.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import ImagesLoaded from 'imagesloaded'
2+
3+
export const loadImage = () => {
4+
return new Promise((resolve) => {
5+
new ImagesLoaded('#__nuxt', (instance) => {
6+
resolve(instance)
7+
}).on('progress', (instance, image) => {
8+
console.log(instance.progressedCount / instance.images.length)
9+
})
10+
})
11+
}

0 commit comments

Comments
 (0)