From 09d6ac57fee36cc2599f55249eabf2039bdf46a5 Mon Sep 17 00:00:00 2001
From: 05412 <chuan-xin.wu@spchemicals.com>
Date: Fri, 2 Aug 2024 17:43:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=A1=B5=E8=84=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/items/NotFound.vue    |  6 +++++-
 src/components/views/HomeView.vue    | 11 ++++++++++-
 src/components/views/ServiceView.vue |  8 ++++++--
 src/router.ts                        |  4 ++++
 src/style.css                        |  3 +++
 5 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/components/items/NotFound.vue b/src/components/items/NotFound.vue
index 8f1f6d8..6588ac8 100644
--- a/src/components/items/NotFound.vue
+++ b/src/components/items/NotFound.vue
@@ -3,7 +3,11 @@
 </script>
 
 <template>
-404 NOT FOUND
+  <v-empty-state
+      icon="mdi-magnify"
+      text="Try adjusting your search terms or filters. Sometimes less specific terms or broader queries can help you find what you're looking for."
+      title="We couldn't find a match."
+  ></v-empty-state>
 </template>
 
 <style scoped>
diff --git a/src/components/views/HomeView.vue b/src/components/views/HomeView.vue
index 4e8fd6e..f359c2f 100644
--- a/src/components/views/HomeView.vue
+++ b/src/components/views/HomeView.vue
@@ -98,7 +98,11 @@ function toggleTheme() {
       <v-main class="px-10">
         <router-view/>
       </v-main>
-      <v-footer>footer</v-footer>
+      <v-footer class="home-footer align-center border-t">
+        <v-row>
+          <v-col class="text-center">powered by @S-URL</v-col>
+        </v-row>
+      </v-footer>
     </v-app>
   </v-responsive>
   <v-dialog v-model="showLoginDialog" persistent width="400">
@@ -150,4 +154,9 @@ function toggleTheme() {
 .home-menu-button {
   width: 120px;
 }
+
+.home-footer {
+  max-height: 100px;
+  min-height: 100px;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/views/ServiceView.vue b/src/components/views/ServiceView.vue
index 4ef779d..e1053f5 100644
--- a/src/components/views/ServiceView.vue
+++ b/src/components/views/ServiceView.vue
@@ -15,6 +15,10 @@ interface Surls {
 
 const urls = ref<Urls[]>([])
 const selected = ref([])
+const tableHeaderConfig = ref([
+  {title: 'KEY1', value: 'key', key: 'key'},
+  {title: 'URL', value: 'value', key: 'value'}
+])
 
 watch(selected, () => console.log(selected.value))
 
@@ -33,8 +37,8 @@ async function getSurl() {
 <template>
   <v-btn @click="getSurl">get</v-btn>
   <v-data-table :items="urls" :item-value="item => item" show-select v-model="selected"
-                v-slot:header.data-table-select height="400" fixed-header
-                :headers="[{title: 'KEY', value: 'key', key: 'key', align: 'center'}, {title: 'URL', value: 'value', key: 'value'}]">
+                v-slot:header.data-table-select fixed-header density="compact"
+                :headers="tableHeaderConfig" :header-props="{color: 'purple'}">
   </v-data-table>
 </template>
 
diff --git a/src/router.ts b/src/router.ts
index 95a24f6..7b62a3a 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -4,6 +4,7 @@ import InputBox from "./components/items/InputBox.vue";
 import IntroView from "./components/views/IntroView.vue";
 import TestView from "./components/views/TestView.vue";
 import ServiceView from "./components/views/ServiceView.vue";
+import NotFound from "./components/items/NotFound.vue";
 
 const routes = [
     {
@@ -21,6 +22,9 @@ const routes = [
     }, {
         path: '/services',
         component: ServiceView
+    }, {
+        path: '/404',
+        component: NotFound
     }
 ]
 export const router = createRouter({
diff --git a/src/style.css b/src/style.css
index 67c7401..a4f7a51 100644
--- a/src/style.css
+++ b/src/style.css
@@ -11,4 +11,7 @@
 }
 .v-overlay.v-dialog{
   backdrop-filter: blur(6px);
+}
+.v-data-table-footer__items-per-page {
+  width: 200px;
 }
\ No newline at end of file