Merge branch 'fix/bugs'

src/assets/base.css

@@ -10,6 +10,7 @@
   --base: #6B7280;
   --danger: #ec3c5c;
   --warning: #f2c97d;
+  --action: #70C0E8;
 }
 
 

src/components/Modal/SignoutModal.vue

@@ -5,11 +5,11 @@
     </header>
     <main class="modal-content">確認登出？</main>
     <footer class="modal-footer">
-      <n-button class="flex-1" ghost @click="onCancel">取消</n-button>
+      <n-button class="flex-1" secondary @click="onCancel">取消</n-button>
       <n-button
         class="flex-1"
-        ghost
-        type="primary"
+        secondary
+        type="error"
         :loading="loading"
         @click="onSignout"
       >

src/components/NavBar/NavBar.vue

@@ -12,7 +12,7 @@ import NavbarMobile from './components/NavbarMobile.vue'
 
 <style scoped lang="postcss">
 .navbar {
-  @apply fixed top-0 left-0 right-0 z-10;
+  @apply fixed top-0 left-0 right-0 z-10 max-w-[2080px] m-auto;
 }
 
 .nav-wrapper {

src/components/NavBar/components/UserOptions.vue

@@ -25,14 +25,14 @@
 
 <script setup lang="ts">
 import LoginBtn from './LoginBtn.vue'
-import { computed, h } from 'vue'
-import { RouterLink } from 'vue-router'
+import { computed } from 'vue'
 import { NButton, NDropdown, NIcon, NAvatar } from 'naive-ui'
 import { useOauthStore } from '@/stores/oauth'
-import { ChevronDown, WarningFilled } from '@vicons/carbon'
+import { ChevronDown, WarningFilled, Campsite, Logout } from '@vicons/carbon'
 import { get } from 'lodash-es'
 import { useAppStore } from '@/stores/app'
 import router from '@/router'
+import { renderIcon } from '@/utils/helper'
 
 const emits = defineEmits(['close'])
 
@@ -41,7 +41,6 @@ const { setSignal } = useAppStore()
 
 const dcUser = computed(() => oauthStore.user.discord)
 const userAvatar = computed(() => oauthStore.userAvatar)
-const dcUserName = computed(() => get(dcUser.value, 'username'))
 const szUserProfile = computed(() => get(oauthStore.user, 'sz.UserProfile'))
 
 const logout = () => {
@@ -53,10 +52,14 @@ const options = computed(() => {
     {
       label: '個人避難所',
       key: 'user-profile',
+      icon: !szUserProfile.value
+        ? renderIcon(WarningFilled, { color: 'var(--warning)' })
+        : renderIcon(Campsite),
     },
     {
       label: '登出',
       key: 'logout',
+      icon: renderIcon(Logout),
     },
   ]
   return options

src/components/StatusMask.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="overlay">
+    <div v-if="show" class="overlay-status abs-center f-col-center">
+      <div class="f-row-center gap-[10px]">
+        <n-icon
+          v-if="status !== 'disabled'"
+          :size="iconSize"
+          :color="iconProps.color"
+        >
+          <component :is="iconProps.icon" />
+        </n-icon>
+        <p
+          v-if="text"
+          :style="`color: ${iconProps.color}; font-size: ${iconSize / 1.5}px`"
+        >
+          {{ text }}
+        </p>
+      </div>
+    </div>
+    <div :class="{ 'overlay-mask': show }">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NIcon } from 'naive-ui'
+import { CheckmarkFilled, ErrorFilled, WarningHexFilled } from '@vicons/carbon'
+import { computed } from 'vue'
+import { get } from 'lodash-es'
+
+export interface StatusMaskProps {
+  status: string
+  iconSize: number
+  text?: string
+  show?: boolean
+}
+const props = withDefaults(defineProps<StatusMaskProps>(), {
+  status: 'disabled',
+  iconSize: 24,
+  show: true,
+})
+
+const statusConfig = {
+  complete: { icon: CheckmarkFilled, color: 'var(--primary)' },
+  error: { icon: ErrorFilled, color: 'var(--danger)' },
+  blocked: { icon: WarningHexFilled, color: 'var(--warning)' },
+}
+
+const iconProps = computed(() => {
+  return {
+    icon: get(statusConfig, `${props.status}.icon`),
+    color: get(statusConfig, `${props.status}.color`),
+  }
+})
+</script>
+
+<style scoped lang="postcss">
+.overlay {
+  @apply relative select-none;
+}
+.overlay-mask {
+  @apply opacity-30 pointer-events-none select-none;
+}
+</style>

src/layouts/default.vue

@@ -29,8 +29,22 @@ import RequestSigninModal from '@/components/Modal/RequestSigninModal.vue'
 import SignoutModal from '@/components/Modal/SignoutModal.vue'
 import { RouterView } from 'vue-router'
 import { includes } from 'lodash-es'
+import { onMounted } from 'vue'
+import { useMessage } from 'naive-ui'
 
-const navBarBlockList = ['RegisterProfile']
+const navBarBlockList = ['RegisterProfile', 'discord callback']
+const message = useMessage()
+
+onMounted(() => {
+  message.warning('網站目前正在建構中，諸多畫面與功能尚未完善，請多見諒', {
+    duration: 0,
+    closable: true,
+  })
+  message.info('目前可進行基本的註冊及登入', {
+    duration: 0,
+    closable: true,
+  })
+})
 </script>
 
 <style scoped lang="postcss">

src/styles/index.css

@@ -4,7 +4,14 @@
     @apply text-[30px] tracking-[2.5px] font-medium;
 }
 
+/* position */
 
+.abs-center {
+    @apply absolute top-0 bottom-0 left-0 right-0 m-auto;
+}
+
+
+/* layouts */
 .f-col {
     @apply flex flex-col justify-center;
 }

src/use/useErrorPage.ts

@@ -2,17 +2,22 @@ import localStoreKey from '@/configs/localStoreKey'
 import { useStorage } from '@vueuse/core'
 import { get } from 'lodash-es'
 import dayjs from 'dayjs'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
 export const useErrorPage = () => {
   const route = useRoute()
+  const router = useRouter()
 
   const errorPageData = useStorage<{
     code?: string
     message?: string
     [propName: string]: any
   }>(localStoreKey.errorPageData, {}, sessionStorage)
 
+  const routeToErrorPage = (errorType?: string) => {
+    router.replace({ name: 'error', query: { errorType } })
+  }
+
   const rawErrorDataFormat = (rawErr: Error) => {
     if (!rawErr) return {}
     return {
@@ -27,5 +32,32 @@ export const useErrorPage = () => {
     }
   }
 
-  return { errorPageData, rawErrorDataFormat }
+  const handleToErrorPage = ({
+    errData,
+    rawErr,
+    context,
+    errorType,
+  }: {
+    errData: any
+    rawErr?: any
+    context?: string
+    errorType?: string
+  }) => {
+    errorPageData.value = {
+      status: errData.status || rawErr.status || '-',
+      code: errData.code || rawErr.code || '-',
+      message: errData.message || rawErr.message || '-',
+      context: context || '-',
+      ...rawErrorDataFormat(rawErr),
+    }
+
+    routeToErrorPage(errorType)
+  }
+
+  return {
+    errorPageData,
+    rawErrorDataFormat,
+    routeToErrorPage,
+    handleToErrorPage,
+  }
 }

src/utils/helper.ts

@@ -1,6 +1,8 @@
 import { get } from 'lodash-es'
 import { useAppStore } from '@/stores/app'
 import dayjs from 'dayjs'
+import { h } from 'vue'
+import { NIcon } from 'naive-ui'
 
 export const getHost = (hostName: string) => {
   const appStore = useAppStore()
@@ -21,3 +23,11 @@ export const wait = (ms: number): Promise<void> => {
     }, ms)
   })
 }
+
+export const renderIcon = (icon: Component, props: any = null) => {
+  return () => {
+    return h(NIcon, props, {
+      default: () => h(icon),
+    })
+  }
+}

src/views/About/About.vue

@@ -1,13 +1,16 @@
 <template>
   <main class="about">
     <PageTitle />
-    <History />
+    <StatusMask text="施工中" status="blocked" :iconSize="30">
+      <History />
+    </StatusMask>
   </main>
 </template>
 
 <script setup>
 import PageTitle from '@/components/Title/PageTitle.vue'
 import History from './components/History.vue'
+import StatusMask from '@/components/StatusMask.vue'
 </script>
 
 <style scoped lang="postcss">

src/views/Callback/Callback.vue

@@ -38,6 +38,7 @@ const statusMessage = ref('')
 const emitError = (errorData: {
   code?: string
   message?: string
+  function: string
   [propName: string]: any
 }) => {
   errorPageData.value = errorData
@@ -80,6 +81,7 @@ const handleLogin = async () => {
       status: errorStatus,
       code: errorCode,
       message: errorMessage,
+      function: 'handleLogin',
       requestUrl: `${get(error, 'config.method')} | ${get(
         error,
         'config.url',

src/views/Ecosystem/Ecosystem.vue

@@ -1,32 +1,37 @@
 <template>
   <main class="ecosystem">
-    <section class="resource-section">
-      <h3 class="resource-section-title">
-        <n-icon><ApplicationWeb /></n-icon>
-        <p>Applications</p>
-      </h3>
-      <div class="resource-list">
-        <ResourceCard
-          v-for="item in applications"
-          :key="item.name"
-          :data="item"
-        />
-      </div>
-    </section>
+    <StatusMask text="施工中" status="blocked" :iconSize="30">
+      <div class="f-col gap-[30px]">
+        <section class="resource-section">
+          <h3 class="resource-section-title">
+            <n-icon><ApplicationWeb /></n-icon>
+            <p>Applications</p>
+          </h3>
+          <div class="resource-list">
+            <ResourceCard
+              v-for="item in applications"
+              :key="item.name"
+              :data="item"
+            />
+          </div>
+        </section>
 
-    <section class="resource-section">
-      <h3 class="resource-section-title">
-        <n-icon><Bookmark /></n-icon>
-        <p>Document</p>
-      </h3>
-      <div class="resource-list">
-        <ResourceCard v-for="item in docs" :key="item.name" :data="item" />
+        <section class="resource-section">
+          <h3 class="resource-section-title">
+            <n-icon><Bookmark /></n-icon>
+            <p>Document</p>
+          </h3>
+          <div class="resource-list">
+            <ResourceCard v-for="item in docs" :key="item.name" :data="item" />
+          </div>
+        </section>
       </div>
-    </section>
+    </StatusMask>
   </main>
 </template>
 
 <script setup>
+import StatusMask from '@/components/StatusMask.vue'
 import ResourceCard from './components/ResourceCard.vue'
 import { NIcon } from 'naive-ui'
 import {