feat: lab04 done
This commit is contained in:
Tony Yang
+19
-1
@@ -1,7 +1,25 @@
|
||||
<script setup>
|
||||
import { ref, KeepAlive } from 'vue';
|
||||
import { RouterView } from 'vue-router';
|
||||
|
||||
import router from './router';
|
||||
|
||||
import Navbar from './components/Navbar.vue';
|
||||
import Footer from './components/Footer.vue';
|
||||
|
||||
const visitCount = ref(1);
|
||||
router.afterEach(() => {
|
||||
visitCount.value++;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RouterView />
|
||||
<Navbar />
|
||||
<RouterView v-slot="{ Component }">
|
||||
<KeepAlive>
|
||||
<component :is="Component" v-if="$route.meta.keepAlive" />
|
||||
</KeepAlive>
|
||||
<component :is="Component" v-if="!$route.meta.keepAlive" />
|
||||
</RouterView>
|
||||
<Footer :visitCount="visitCount" />
|
||||
</template>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 284 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 496 B |
@@ -0,0 +1,47 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const emit = defineEmits(['new-message']);
|
||||
|
||||
const name = ref('');
|
||||
const message = ref('');
|
||||
|
||||
function submit() {
|
||||
if (!name || !message) {
|
||||
return;
|
||||
}
|
||||
|
||||
emit('new-message', { name: name.value, message: message.value });
|
||||
name.value = '';
|
||||
message.value = '';
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form @submit.prevent="submit">
|
||||
<fieldset class="ts-fieldset">
|
||||
<legend class="ts-legend">New Message</legend>
|
||||
<div class="ts-wrap is-vertical">
|
||||
<div class="ts-control">
|
||||
<div class="label">Name</div>
|
||||
<div class="content is-fluid">
|
||||
<div class="ts-input">
|
||||
<input name="name" type="text" placeholder="Name" v-model="name" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ts-control">
|
||||
<div class="label">Message</div>
|
||||
<div class="content is-fluid">
|
||||
<div class="ts-input">
|
||||
<textarea name="message" placeholder="Message" v-model="message"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ts-wrap has-top-spaced is-end-aligned">
|
||||
<button class="ts-button" type="submit" :class="{'is-disabled': name === '' || message === '' }">Submit</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</template>
|
||||
@@ -0,0 +1,23 @@
|
||||
<script setup>
|
||||
defineProps(['message']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ts-conversation">
|
||||
<div class="avatar">
|
||||
<img src="../../assets/user.png" alt="Avatar" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="bubble">
|
||||
<div class="author">{{ message.name }}</div>
|
||||
<div class="text">{{ message.message }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ts-conversation > .content {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,11 @@
|
||||
<script setup>
|
||||
defineProps(['visitCount']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ts-content is-center-aligned is-vertically-very-padded">
|
||||
<div class="ts-container">
|
||||
<div class="ts-text is-secondary">Total Visitor: {{ visitCount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,43 +0,0 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps({
|
||||
msg: String,
|
||||
})
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ msg }}</h1>
|
||||
|
||||
<div class="card">
|
||||
<button type="button" @click="count++">count is {{ count }}</button>
|
||||
<p>
|
||||
Edit
|
||||
<code>components/HelloWorld.vue</code> to test HMR
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out
|
||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
||||
>create-vue</a
|
||||
>, the official Vue + Vite starter
|
||||
</p>
|
||||
<p>
|
||||
Learn more about IDE Support for Vue in the
|
||||
<a
|
||||
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
|
||||
target="_blank"
|
||||
>Vue Docs Scaling up Guide</a
|
||||
>.
|
||||
</p>
|
||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div class="ts-blankslate is-large">
|
||||
<div class="ts-image is-circular">
|
||||
<img src="../../assets/avatar.png" alt="Avatar" width="200">
|
||||
</div>
|
||||
<div class="header has-top-spaced">
|
||||
R13922074
|
||||
</div>
|
||||
<div class="description">
|
||||
楊東翰
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,38 @@
|
||||
<script>
|
||||
import { RouterLink } from 'vue-router';
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav>
|
||||
<div class="ts-container navbar-container">
|
||||
<div class="ts-wrap">
|
||||
<RouterLink class="ts-header is-brand" to="/">網路攻防實習</RouterLink>
|
||||
<div class="ts-tab is-tall">
|
||||
<RouterLink class="item" to="/" :class="{'is-active': $route.path == '/'}">關於</RouterLink>
|
||||
<RouterLink class="item" to="/board" :class="{'is-active': $route.path == '/board'}">留言板</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="ts-button is-disabled" disabled>登入</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
nav {
|
||||
background-color: var(--ts-gray-100);
|
||||
color: var(--ts-white-100);
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ts-header.is-brand {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
@@ -1,11 +1,20 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import HomeView from '../views/HomeView.vue';
|
||||
import BoardView from '../views/BoardView.vue';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: HomeView
|
||||
},
|
||||
{
|
||||
path: '/board',
|
||||
name: 'Board',
|
||||
component: BoardView,
|
||||
meta: {
|
||||
keepAlive: true
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
@@ -1,79 +0,0 @@
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
<script setup>
|
||||
import BoardForm from '../components/Board/BoardForm.vue';
|
||||
import BoardMessage from '../components/Board/BoardMessage.vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const messages = ref([]);
|
||||
|
||||
const onSubmit = (message) => {
|
||||
messages.value.push(message);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ts-container">
|
||||
<BoardForm @new-message="onSubmit" />
|
||||
<div class="ts-content is-horizontally-fitted is-vertically-padded">
|
||||
<div class="ts-wrap is-vertical">
|
||||
<BoardMessage :message="message" v-for="message in messages" :key="message.id" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
+10
-21
@@ -1,30 +1,19 @@
|
||||
<script setup>
|
||||
import HelloWorld from '../components/HelloWorld.vue';
|
||||
import BlankSlate from '../components/Home/BlankSlate.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a href="https://vite.dev" target="_blank">
|
||||
<img src="/vite.svg" class="logo" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://vuejs.org/" target="_blank">
|
||||
<img src="../assets/vue.svg" class="logo vue" alt="Vue logo" />
|
||||
</a>
|
||||
<div class="ts-container">
|
||||
<BlankSlate />
|
||||
<div class="ts-content is-center-aligned">
|
||||
<p>
|
||||
我是楊東翰，目前就讀於國立臺灣大學資訊工程學系，這是我的個人網站，歡迎來到我的小天地！
|
||||
</p>
|
||||
<span class="ts-icon is-envelope-icon"></span> <a href="mailto:r13922074@csie.ntu.edu.tw" class="ts-link">r13922074@csie.ntu.edu.tw</a>
|
||||
</div>
|
||||
</div>
|
||||
<HelloWorld msg="Vite + Vue" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.vue:hover {
|
||||
filter: drop-shadow(0 0 2em #42b883aa);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user