feat: lab04 done

src/components/Board/BoardForm.vue

@@ -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>

src/components/Board/BoardMessage.vue

@@ -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>

src/components/Footer.vue

@@ -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>

src/components/HelloWorld.vue

@@ -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>

src/components/Home/BlankSlate.vue

@@ -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>

src/components/Navbar.vue

@@ -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>