feat: add messagebox component

frontend/package.json

@@ -17,7 +17,7 @@
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
     "@fortawesome/free-solid-svg-icons": "^7.2.0",
     "@fortawesome/vue-fontawesome": "^3.2.0",
-    "bulma": "^1.0.4",
+    "bulma": "0.9.1",
     "pinia": "^3.0.4",
     "pinia-plugin-persistedstate": "^4.7.1",
     "vue": "^3.5.32",
@@ -35,7 +35,6 @@
     "jiti": "^2.6.1",
     "npm-run-all2": "^8.0.4",
     "oxlint": "~1.60.0",
-    "sass": "^1.99.0",
     "typescript": "~6.0.0",
     "vite": "^8.0.8",
     "vite-plugin-vue-devtools": "^8.1.1",

frontend/pnpm-lock.yaml

@@ -18,8 +18,8 @@ importers:
         specifier: ^3.2.0
         version: 3.2.0(@fortawesome/fontawesome-svg-core@7.2.0)(vue@3.5.33(typescript@6.0.3))
       bulma:
-        specifier: ^1.0.4
-        version: 1.0.4
+        specifier: 0.9.1
+        version: 0.9.1
       pinia:
         specifier: ^3.0.4
         version: 3.0.4(typescript@6.0.3)(vue@3.5.33(typescript@6.0.3))
@@ -66,9 +66,6 @@ importers:
       oxlint:
         specifier: ~1.60.0
         version: 1.60.0
-      sass:
-        specifier: ^1.99.0
-        version: 1.99.0
       typescript:
         specifier: ~6.0.0
         version: 6.0.3
@@ -907,8 +904,8 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
-  bulma@1.0.4:
-    resolution: {integrity: sha512-Ffb6YGXDiZYX3cqvSbHWqQ8+LkX6tVoTcZuVB3lm93sbAVXlO0D6QlOTMnV6g18gILpAXqkG2z9hf9z4hCjz2g==}
+  bulma@0.9.1:
+    resolution: {integrity: sha512-LSF69OumXg2HSKl2+rN0/OEXJy7WFEb681wtBlNS/ulJYR27J3rORHibdXZ6GVb/vyUzzYK/Arjyh56wjbFedA==}
 
   bundle-name@4.1.0:
     resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
@@ -2599,7 +2596,7 @@ snapshots:
       node-releases: 2.0.38
       update-browserslist-db: 1.2.3(browserslist@4.28.2)
 
-  bulma@1.0.4: {}
+  bulma@0.9.1: {}
 
   bundle-name@4.1.0:
     dependencies:
@@ -2610,6 +2607,7 @@ snapshots:
   chokidar@4.0.3:
     dependencies:
       readdirp: 4.1.2
+    optional: true
 
   chokidar@5.0.0:
     dependencies:
@@ -2813,7 +2811,8 @@ snapshots:
 
   ignore@7.0.5: {}
 
-  immutable@5.1.5: {}
+  immutable@5.1.5:
+    optional: true
 
   imurmurhash@0.1.4: {}
 
@@ -3112,7 +3111,8 @@ snapshots:
       json-parse-even-better-errors: 4.0.0
       npm-normalize-package-bin: 4.0.0
 
-  readdirp@4.1.2: {}
+  readdirp@4.1.2:
+    optional: true
 
   readdirp@5.0.0: {}
 
@@ -3154,6 +3154,7 @@ snapshots:
       source-map-js: 1.2.1
     optionalDependencies:
       '@parcel/watcher': 2.5.6
+    optional: true
 
   scule@1.3.0: {}
 

frontend/public/index.scss

@@ -1,2 +1,3 @@
 // 导入 Bulma
-@use "bulma/sass"
+@charset "utf-8";
+@import "bulma/bulma.sass";

frontend/src/components/MessageBox.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const isVisible = ref(false);
+const title = ref<string>("");
+const content = ref<string>("");
+
+const show = (_content: string, _title?: string) => {
+  title.value = _title ?? "Notification";
+  content.value = _content;
+  isVisible.value = true;
+}
+
+const hide = () => {
+  isVisible.value = false;
+}
+
+defineExpose({
+  show
+})
+</script>
+
+<template>
+  <div class="modal" :class="{ 'is-active': isVisible }" style="float: left; position: fixed; top: 0; bottom: 0; left: 0; right: 0;">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title">{{ title }}</p>
+        <button class="delete" aria-label="close" @click="hide"></button>
+      </header>
+      <div class="modal-card-body">
+        <p>{{ content }}</p>
+      </div>
+      <footer class="modal-card-foot">
+        <button class="button is-success" @click="hide">OK</button>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

frontend/src/views/Login.vue

@@ -1,4 +1,14 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import MessageBox from '@/components/MessageBox.vue';
+import { ref } from 'vue';
+
+const messagebox = ref<InstanceType<typeof MessageBox> | null>(null);
+
+const login = () => {
+  messagebox.value?.show("Fail to login. Please check your username or password.")
+}
+
+</script>
 
 <template>
   <div style="margin-top: 1.25rem; width: 100%; display: flex; justify-content: center; align-items: center;">
@@ -23,11 +33,13 @@
       </div>
 
       <div class="control">
-        <button class="button is-primary">Login</button>
+        <button class="button is-primary" @click="login">Login</button>
       </div>
 
     </div>
   </div>
+
+  <MessageBox ref="messagebox"/>
 </template>
 
 <style scoped></style>