feat: catalog (#109)

* feat: catalog * chore: active * chore: lint * chore: shadcn-nuxt * Revert "chore: shadcn-nuxt" This reverts commit c31a134.
nexmoe · Apr 24, 2024 · a637270 · a637270
1 parent 070c776
commit a637270
Show file tree

Hide file tree

Showing 12 changed files with 8,158 additions and 6,400 deletions.
diff --git a/components/flow/Index.vue b/components/flow/Index.vue
@@ -21,11 +21,15 @@ provide('flow', props.flow)
 	<div class="flow">
 		<FlowHeader v-if="props.header" :id="props.flow!.id" :title="props.flow!.title" :url="props.flow!.homepage" />
 
-		<div class="flow-body" :class="[
-			props.flow!.configCard === 'gallery' ? 'n-gallery' : 'n-grid',
-		]">
-			<NuxtLink v-for="(module) in props.flow!.module" :key="module.url" :title="module.title" :to="module.url"
-				target="_blank">
+		<div
+			class="flow-body" :class="[
+				props.flow!.configCard === 'gallery' ? 'n-gallery' : 'n-grid',
+			]"
+		>
+			<NuxtLink
+				v-for="(module) in props.flow!.module" :key="module.url" :title="module.title" :to="module.url"
+				target="_blank"
+			>
 				<ModuleList v-if="props.flow!.configCard === 'list'" v-bind="{ module }" />
 				<ModuleProject v-else-if="props.flow!.configCard === 'project'" v-bind="{ module }" />
 				<ModuleGallery v-else-if="props.flow!.configCard === 'gallery'" v-bind="{ module }" />

diff --git a/components/module/Image.vue b/components/module/Image.vue
@@ -5,7 +5,7 @@ import type { AppRouter } from '@/server/trpc/routers'
 type RouterOutput = inferRouterOutputs<AppRouter>
 type ModuleOutput = RouterOutput['module']['get']
 type FlowOutput = RouterOutput['flow']['get']
-type Module = Exclude<ModuleOutput, null>;
+type Module = Exclude<ModuleOutput, null>
 
 interface Props {
 	module: Module
@@ -28,8 +28,10 @@ const text = computed(() => extractTextFromHTML(props.module.content))
 				</div>
 			</div>
 			<div v-if="props.module.image" class="shadow-sm max-h-96 rounded-xl relative overflow-hidden">
-				<NuxtImg class="w-full" format="webp" :src="props.module!.image" :alt="module.title"
-					referrerpolicy="no-referrer" loading="lazy" width="420px" />
+				<NuxtImg
+					class="w-full" format="webp" :src="props.module!.image" :alt="module.title"
+					referrerpolicy="no-referrer" loading="lazy" width="420px"
+				/>
 			</div>
 		</div>
 		<div class="space-y-4 px-3 pb-3">
@@ -39,11 +41,15 @@ const text = computed(() => extractTextFromHTML(props.module.content))
 			<div v-if="!flow?.configNoContent && text !== ' '" class="line-clamp-3">
 				<div v-html="text" />
 			</div>
-			<div v-if="!props.module.image || (props.module.platform?.length || 0) > 1"
-				class="flex flex-row items-center gap-1">
+			<div
+				v-if="!props.module.image || (props.module.platform?.length || 0) > 1"
+				class="flex flex-row items-center gap-1"
+			>
 				<template v-if="(props.module.platform?.length || 0) > 1">
-					<div v-for="platform in props.module.platform" :key="platform" class="w-7 h-7 block"
-						@click="navigateTo(platform, { open: { target: '_blank' }, external: true })">
+					<div
+						v-for="platform in props.module.platform" :key="platform" class="w-7 h-7 block"
+						@click="navigateTo(platform, { open: { target: '_blank' }, external: true })"
+					>
 						<LinkIcon :url="platform" />
 					</div>
 				</template>

diff --git a/components/public/Catalog.vue b/components/public/Catalog.vue
@@ -21,20 +21,15 @@ function scrollToTitle(anchor: string) {
 }
 
 function updateActiveSection() {
-  const scrollTop = window.pageYOffset || document.documentElement.scrollTop
   const screenHeight = window.innerHeight
 
-  let minDistanceToCenter = Number.POSITIVE_INFINITY
-
   props.list.forEach((section, index) => {
     const element = document.getElementById(section.title)
     if (element) {
       const rect = element.getBoundingClientRect()
-      const distanceToCenter = Math.abs(rect.top + rect.height / 2 - (scrollTop + screenHeight / 2))
 
-      if (distanceToCenter < minDistanceToCenter) {
+      if (rect.top < screenHeight / 2) {
         activeSectionIndex = index
-        minDistanceToCenter = distanceToCenter
       }
     }
   })
@@ -54,25 +49,25 @@ onUnmounted(() => {
 </script>
 
 <template>
-	<div class="hidden md:flex py-6 px-4 items-center h-full shu-card !rounded-none">
-		<div class="space-y-1 w-full">
-			<div v-for="item in list" :key="item.title" class="item" :class="{
-				active: item.active,
-			}" @click="scrollToTitle(`#${item.anchor}`)">
-				<div class="text-base truncate">
-					{{ item.title }}
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="hidden md:flex py-6 px-4 items-center h-full shu-card !rounded-none">
+    <div class="space-y-1 w-full">
+      <div v-for="item in list" :key="item.title" class="item" :class="{
+        active: item.active,
+      }" @click="scrollToTitle(`#${item.anchor}`)">
+        <div class="text-base truncate">
+          {{ item.title }}
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
 .item {
-	@apply flex flex-row justify-between text-base cursor-pointer transition-all hover:bg-gray-100 w-full space-x-3 items-center py-3 px-5 overflow-hidden rounded-xl;
+  @apply flex flex-row justify-between text-base cursor-pointer transition-all hover:bg-gray-100 w-full space-x-3 items-center py-3 px-5 overflow-hidden rounded-xl;
 }
 
 .active {
-	@apply bg-black text-white hover:bg-black;
+  @apply bg-black text-white hover:bg-black;
 }
 </style>
diff --git a/components/public/Tool.vue b/components/public/Tool.vue
@@ -2,6 +2,7 @@
 import { onMounted, onUnmounted, ref } from 'vue'
 
 const showButton = ref(false)
+const globalStore = useGlobalStore()
 
 function handleScroll() {
 	showButton.value = window.scrollY > window.innerHeight
@@ -27,6 +28,7 @@ onUnmounted(() => {
 	<div
 		class="fixed z-50 flex flex-col text-2xl space-y-4 bottom-8 right-8 md:bottom-16 md:right-16"
 	>
+		<!-- <PublicCatalog :list="globalStore.catalog" v-if="globalStore.catalog.length > 0" /> -->
 		<transition name="fade">
 			<button
 				v-if="showButton"

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -20,6 +20,15 @@ export default defineNuxtConfig({
 		'nuxt-icon',
 		'@nuxtjs/seo',
 		'@nuxtjs/tailwindcss',
+		[
+			'@pinia/nuxt',
+			{
+				autoImports: [
+					// 自动引入 `defineStore()`
+					'defineStore',
+				],
+			},
+		],
 	],
 	ogImage: {
 		googleFontMirror: true,

diff --git a/package.json b/package.json
@@ -17,12 +17,14 @@
 	},
 	"dependencies": {
 		"@nuxt/image": "^1.5.0",
+		"@pinia/nuxt": "^0.5.1",
 		"@prisma/client": "^5.12.1",
 		"@sidebase/core": "^0.1.4",
 		"@trpc/client": "^10.45.2",
 		"@trpc/server": "^10.45.2",
 		"@vitest/coverage-v8": "^1.4.0",
 		"consola": "^3.2.3",
+		"pinia": "^2.1.7",
 		"sharp": "^0.33.3",
 		"trpc-nuxt": "^0.10.21",
 		"zod": "^3.22.4"
@@ -66,4 +68,4 @@
 			]
 		}
 	}
-}
+}
diff --git a/pages/index.vue b/pages/index.vue
@@ -3,6 +3,9 @@ const { $client } = useNuxtApp()
 const flows = await $client.flow.list.query()
 
 const config = await useGetConfig()
+const globalStore = useGlobalStore()
+
+globalStore.setCatalog(flows.map(x => ({ title: x.title, anchor: x.title, active: false })))
 
 provide('flows', flows)