feat: Upload layout done.

src/assets/vendors.css

@@ -9,6 +9,13 @@
   'GRAD' 0,
   'opsz' 40
 }
+.material-fill {
+  font-variation-settings:
+  'FILL' 1,
+  'wght' 400,
+  'GRAD' 0,
+  'opsz' 40
+}
 
 /* vue-toast-notification */
 .v-toast__item {

src/components/File/UploadModal.vue

@@ -8,7 +8,7 @@
       <IconUploarding class="loader-arrow-upward"></IconUploarding>
       <p class="text-neutral-900">Click or drag a file here.</p>
       <p class="text-neutral-500">(Only <span class="text-primary">.csv</span> is supported)</p>
-      <p class="btn btn-lg btn-c-primary">下一頁</p>
+      <router-link class="btn btn-lg btn-c-primary" :to="{name: 'Upload', replace: true}">下一頁，路徑不添進歷史紀錄</router-link>
       <p class="btn btn-lg btn-c-primary" @click="uploadFailde">上傳失敗 Modal</p>
       <p class="btn btn-lg btn-c-primary" @click="uploadSuccess">上傳成功 Modal</p>
       <p class="btn btn-lg btn-c-primary" @click="uploadConfirm">是否上傳 Modal</p>
@@ -33,7 +33,7 @@ export default {
     uploadFailde,
     uploadSuccess,
     uploadConfirm,
-  }
+  },
 }
 </script>
 <style scoped>

src/components/Navbar.vue

@@ -37,6 +37,8 @@
             <UploadModal :visible="uploadModal" @closeModal="uploadModal = $event"></UploadModal>
           </div>
         </div>
+        <!-- Upload 無按鈕行為 -->
+        <div v-else-if="navViewName === 'UPLOAD'"></div>
         <!-- Other Page: Save and Download -->
         <!-- Save 有 data 跳重新命名，沒有 data 跳要不要儲存，沒有動都不跳 -->
         <div v-else class="space-x-4">

src/router/index.js

@@ -3,6 +3,7 @@ import AuthContainer from '@/views/AuthContainer.vue';
 import MainContainer from '@/views/MainContainer.vue';
 import Login from '@/views/Login/index.vue';
 import Files from '@/views/Files/index.vue';
+import Upload from '@/views/Upload/index.vue';
 import Map from '@/views/Discover/Map/index.vue';
 import Conformance from '@/views/Discover/Conformance/index.vue';
 import MemberArea from '@/views/MemberArea/index.vue';
@@ -44,6 +45,11 @@ const routes = [
         name: "Files",
         component: Files,
       },
+      {
+        path: "/upload", // router.push({ replace: true }) 路徑不添進歷史紀錄
+        name: "Upload",
+        component: Upload
+      },
       {
         path: "/discover",
         name: "Discover",

src/views/MainContainer.vue

@@ -3,10 +3,9 @@
       <Header/>
       <Navbar/>
   </header>
-  <main>
+  <main class="w-full">
     <Loading v-if="loadingStore.isLoading" />
-    <router-view>
+    <router-view></router-view>
-    </router-view>
   </main>
 </template>
 

src/views/Upload/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <section class="h-screen-main w-full px-4 flex flex-col justify-between items-start">
+    <!-- Upload Content -->
+    <div class="w-full">
+      <!-- File name -->
+      <p class="font-bold text-base leading-[48px] border-b border-neutral-300">File Name(點擊可以改名字)</p>
+      <!-- Upload notification -->
+      <div class="flex justify-start items-center space-x-2 ml-2 py-2">
+        <span class="material-symbols-outlined text-neutral-700" v-tooltip.right="tooltipUpload">info</span>
+        <span class="w-px h-7 bg-neutral-300"></span>
+        <div class="flex items-center">
+          <span class="material-symbols-outlined text-primary">notifications</span>
+          <span class="material-symbols-outlined material-fill text-danger">warning</span>
+        </div>
+        <!-- Upload text -->
+        <div class="flex justify-start items-center">
+          <p class="text-primary text-sm">
+            Please verify the label for each column before uploading.
+          </p>
+          <p class="text-danger text-sm">
+            Need to select [A], [B], [C].
+          </p>
+          <div class=" space-y-1">
+            <p class="text-danger text-sm">
+              [Case ID] has been assigned.
+            </p>
+            <p class="text-danger text-sm">
+              [Case ID], [Activity] have been assigned.
+            </p>
+          </div>
+        </div>
+      </div>
+      <!-- Upload table -->
+    </div>
+    <!-- Upload button -->
+    <div class="w-full text-right space-x-4 px-8 py-4">
+        <button type="button" class="btn btn-sm btn-neutral" @click="reset">Cancel</button>
+        <button type="button" class="btn btn-sm" @click="submit" :disabled="isDisabled" :class="isDisabled ? 'btn-disable' : 'btn-neutral'">Upload</button>
+      </div>
+  </section>
+</template>
+<script>
+import { storeToRefs } from 'pinia';
+import LoadingStore from '@/stores/loading.js';
+
+export default {
+  setup() {
+    const loadingStore = LoadingStore();
+    const { isLoading } = storeToRefs(loadingStore);
+
+    return { isLoading }
+  },
+  data() {
+    return {
+      isDisabled: true,
+      tooltipUpload: {
+        value: `1. Case ID: A unique identifier for each case.
+          2. Activity: A process step executed by either a system (automated) or humans (manual).
+          3. Activity Instance ID: A unique identifier for a single occurrence of an activity.
+          4. Timestamp: The time of occurrence of a particular event, such as the start or end of an activity.
+          5. Status: Activity status, such as Start or Complete.
+          6. Attribute: A property that can be associated with a case to provide additional information about that case.
+          7. Resource: A resource refers to any entity that is required to carry out a business process. This can include people, equipment, software, or any other type of asset.`,
+       class: '!max-w-[400px] !text-[10px]',
+       autoHide: false,
+      }
+    }
+  },
+  methods: {
+    /**
+     * Cancel Button
+     */
+    reset() {},
+    /**
+     * Upload Button
+     */
+    submit() {},
+  },
+  mounted() {
+    this.isLoading = false;
+  },
+}
+// beforeRouteUpdate(){}
+</script>
+<style scoped>
+</style>