admin: Migrate backendClient configurations into app.vue

ThrRip · Dec 4, 2023 · 7ddbcc5 · 7ddbcc5
1 parent 4367ff1
commit 7ddbcc5
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 22 deletions.
diff --git a/packages/admin/app.vue b/packages/admin/app.vue
@@ -4,10 +4,10 @@
       class="grid grid-rows-[auto_1fr_auto] max-lg:landscape:gap-y-2 gap-y-4 self-center
       px-12 max-lg:landscape:py-2 py-7 w-screen sm:w-[26rem] h-2/3 lg:h-[calc(100dvh_-_14rem)]
       text-white transition-[margin-left] duration-300"
-      :class="{ '-ml-[16.5rem]': !showFullNavigationBar, 'z-50': showFullNavigationBar }"
+      :class="{ '-ml-[16.5rem]': !viewShowFullNavigationBar, 'z-50': viewShowFullNavigationBar }"
     >
       <section class="z-50 flex flex-row max-lg:landscape:gap-y-2 gap-y-4 justify-between items-center">
-        <h1 class="min-w-max text-xl sm:text-2xl text-white-alt transition-opacity" :class="{ 'opacity-0': !showFullNavigationBar }">
+        <h1 class="min-w-max text-xl sm:text-2xl text-white-alt transition-opacity" :class="{ 'opacity-0': !viewShowFullNavigationBar }">
           管理面板｜洺知-故犯
         </h1>
         <NuxtLink
@@ -17,7 +17,7 @@
           bg-blue hover:bg-blue-a focus:outline outline-2 outline-offset-3 outline-blue-a rounded-xl
           transition duration-300 active:scale-95"
           :class="{ 'bg-blue-a': route.path === '/' }"
-          @click="showFullNavigationBar = false"
+          @click="viewShowFullNavigationBar = false"
         >
           <ClientOnly>
             <font-awesome-icon :icon="['fas', 'house']" class="max-lg:landscape:!h-4 !h-5" />
@@ -31,10 +31,10 @@
           bg-blue hover:bg-blue-a focus:outline outline-2 outline-offset-3 outline-blue-a rounded-xl
           transition-all duration-300 active:scale-95"
           :class="{
-            '!px-0 !max-w-[3.5rem]': !showFullNavigationBar,
+            '!px-0 !max-w-[3.5rem]': !viewShowFullNavigationBar,
             'bg-blue-a': route.path === '/playlist'
           }"
-          @click="showFullNavigationBar = false"
+          @click="viewShowFullNavigationBar = false"
         >
           <span class="aspect-square flex flex-row justify-center items-center pl-0.5 h-14">
             <ClientOnly>
@@ -48,20 +48,20 @@
       </section>
       <section class="z-50 flex flex-row justify-end">
         <button
-          :title="showFullNavigationBar ? '收起导航栏' : '展开导航栏'"
+          :title="viewShowFullNavigationBar ? '收起导航栏' : '展开导航栏'"
           class="aspect-square flex flex-row justify-center items-center h-14
           bg-blue hover:bg-blue-a focus:outline outline-2 outline-offset-3 outline-blue-a rounded-xl
           transition duration-300 active:scale-95"
-          @click="showFullNavigationBar = !showFullNavigationBar"
+          @click="viewShowFullNavigationBar = !viewShowFullNavigationBar"
         >
           <ClientOnly>
             <font-awesome-icon
               :icon="['fas', 'angle-right']"
               class="max-lg:landscape:!h-4 !h-5"
               :class="{
-                'transition-transform duration-300': toggleFullNavigationBarAnimation !== '',
-                'rotate-180': showFullNavigationBar === true && toggleFullNavigationBarAnimation === 'collapsing',
-                'rotate-[360deg]': showFullNavigationBar === false && toggleFullNavigationBarAnimation === 'collapsing',
+                'transition-transform duration-300': viewToggleFullNavigationBarAnimation !== '',
+                'rotate-180': viewShowFullNavigationBar === true && viewToggleFullNavigationBarAnimation === 'collapsing',
+                'rotate-[360deg]': viewShowFullNavigationBar === false && viewToggleFullNavigationBarAnimation === 'collapsing',
               }"
             />
           </ClientOnly>
@@ -71,18 +71,24 @@
     <div
       class="z-10 grid grid-areas-stack justify-items-center items-center
       -ml-[13.5rem] sm:-ml-[13rem] w-[52rem] h-full transition-[margin-left] duration-300"
-      :class="{ '!-ml-[30rem] sm:!-ml-[29rem]': !showFullNavigationBar }"
+      :class="{ '!-ml-[30rem] sm:!-ml-[29rem]': !viewShowFullNavigationBar }"
     >
       <div class="w-full h-full backdrop-blur-[3rem]" />
       <div class="w-[85vw] sm:w-1/2 h-2/3 lg:h-[calc(100dvh_-_14rem)] bg-blue-l" />
     </div>
     <main class="overflow-x-clip overflow-y-auto lg:overflow-y-hidden grid grid-cols-[1fr] grid-rows-[1fr] h-full bg-white-alt">
-      <NuxtPage class="z-20 transition-opacity duration-300 delay-150" :class="{ 'opacity-0 !delay-0': showFullNavigationBar }" />
+      <NuxtPage
+        :backend-client="backendClient"
+        class="z-20 transition-opacity duration-300 delay-150"
+        :class="{ 'opacity-0 !delay-0': viewShowFullNavigationBar }"
+      />
     </main>
   </div>
 </template>
 
 <script setup lang="ts">
+import { Client } from 'appwrite'
+
 const route = useRoute()
 
 if (route.query.entrytoken) {
@@ -91,17 +97,23 @@ if (route.query.entrytoken) {
   await navigateTo({ path: route.path, query: entryRouteQueries })
 }
 
-const showFullNavigationBar = ref<Boolean>(false)
-const toggleFullNavigationBarAnimation = ref<'' | 'expanding' | 'collapsing'>('expanding')
-watch(showFullNavigationBar, (value) => {
+// Backend
+const backendClient = new Client()
+backendClient.setEndpoint(useAppConfig().backendBase)
+  .setProject(useAppConfig().backendProjectId)
+
+// View
+const viewShowFullNavigationBar = ref<Boolean>(false)
+const viewToggleFullNavigationBarAnimation = ref<'' | 'expanding' | 'collapsing'>('expanding')
+watch(viewShowFullNavigationBar, (value) => {
   if (value) {
-    toggleFullNavigationBarAnimation.value = 'collapsing'
+    viewToggleFullNavigationBarAnimation.value = 'collapsing'
   } else {
     setTimeout(() => {
-      toggleFullNavigationBarAnimation.value = ''
+      viewToggleFullNavigationBarAnimation.value = ''
     }, 300)
     setTimeout(() => {
-      toggleFullNavigationBarAnimation.value = 'expanding'
+      viewToggleFullNavigationBarAnimation.value = 'expanding'
     }, 350)
   }
 })

diff --git a/packages/admin/pages/playlist.vue b/packages/admin/pages/playlist.vue
@@ -36,15 +36,16 @@
 import { Client, Databases, Query } from 'appwrite'
 import { pinyin } from 'pinyin-pro'
 
+const props = defineProps<{
+  backendClient: Client
+}>()
+
 useHead({
   title: '歌单编辑 - 管理面板 | 洺知-故犯'
 })
 
 // Backend
-const backendClient = new Client()
-const backendDatabases = new Databases(backendClient)
-backendClient.setEndpoint(useAppConfig().backendBase)
-  .setProject(useAppConfig().backendProjectId)
+const backendDatabases = new Databases(props.backendClient)
 
 export interface Song {
   hidden?: boolean