From 1be2543d23f1de59388327e9b6168002f87bcfc1 Mon Sep 17 00:00:00 2001
From: Nexmoe <16796652+nexmoe@users.noreply.github.com>
Date: Tue, 7 May 2024 11:37:23 +0800
Subject: [PATCH] refactor: Update link behavior in Header and adjust space
 flow structure

Refactor Header component for links to accommodate different URL structures
based on props.space existence. Update flow structure in SpaceFlow component
to remove unnecessary link tag and adjust accordingly.
---
 components/flow/Header.vue | 12 ++++++++++--
 components/space/Flow.vue  |  7 +++----
 nuxt.config.ts             |  3 ++-
 package.json               |  2 +-
 pages/index.vue            | 21 +++++++++++++++++++--
 pages/space/[id].vue       |  5 +++++
 6 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/components/flow/Header.vue b/components/flow/Header.vue
index df95e6d..9bbac60 100644
--- a/components/flow/Header.vue
+++ b/components/flow/Header.vue
@@ -3,6 +3,7 @@ interface Props {
 	url?: string | null
 	title: string
 	id: string
+	space: boolean
 }
 const props = defineProps<Props>()
 </script>
@@ -18,13 +19,20 @@ const props = defineProps<Props>()
 			</h2>
 		</div>
 		<NuxtLink
-			:to="props.url ? props.url : `/flow/${props.id}`"
+			:to="props.url ? props.url : `/${props.space ? 'space' : 'flow'}/${props.id}`"
 			:target="props.url?.startsWith('https://') ? '_blank' : ''"
 			:title="props.title"
 		>
 			<div class="py-2 px-5 flex items-center gap-1 flex-row bg-white rounded-full">
 				更多
-				<Icon name="i-heroicons-arrow-right-20-solid" />
+				<Icon
+					v-if="props.url"
+					name="mdi:open-in-new"
+				/>
+				<Icon
+					v-else
+					name="i-heroicons-arrow-right-20-solid"
+				/>
 			</div>
 		</NuxtLink>
 	</div>
diff --git a/components/space/Flow.vue b/components/space/Flow.vue
index 25d5f86..7f511da 100644
--- a/components/space/Flow.vue
+++ b/components/space/Flow.vue
@@ -22,17 +22,16 @@ const props = withDefaults(defineProps<Props>(), {
 			v-if="props.header"
 			:id="props.space.id"
 			:title="props.space.title"
+			:space="true"
 		/>
 
 		<div class="flow-body n-grid">
-			<NuxtLink
+			<div
 				v-for="flow in props.space.flows"
 				:key="flow.id"
-				:title="flow.title"
-				target="_blank"
 			>
 				<LazySpaceModule v-bind="{ flow }" />
-			</NuxtLink>
+			</div>
 		</div>
 	</div>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 68dae37..64ed601 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -20,8 +20,9 @@ export default defineNuxtConfig({
 	routeRules: {
 		// generated on demand, revalidates in background, cached until API response changes
 		'/': { swr: true },
-		'/flow': { swr: true },
 		'/flow/**': { swr: true },
+		'/space': { swr: true },
+		'/space/**': { swr: true },
 		// Admin dashboard renders only on client-side
 		'/admin/**': { ssr: false },
 		// Add cors headers on API routes
diff --git a/package.json b/package.json
index 00c54b9..d9ca1e1 100644
--- a/package.json
+++ b/package.json
@@ -78,4 +78,4 @@
 			]
 		}
 	}
-}
+}
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index ab956de..646b6df 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,12 +1,28 @@
 <script setup lang="ts">
 const { $client } = useNuxtApp()
-const flows = await $client.flow.list.query()
+
+const space = await $client.space.get.query({ id: 'bfa294b0-face-4780-bf72-050b5d114bca' })
+const dev = await $client.space.get.query({ id: '76a6249e-ae4e-4adf-9089-a2cd7e25e1ff' })
+
+if (!space || !dev) {
+	throw createError({
+		statusCode: 404,
+	})
+}
+
+const flows = space.flows
+const catalog = flows.map(x => ({ title: x.title, anchor: x.title, active: false }))
+catalog.push({
+	title: dev.title,
+	anchor: dev.title,
+	active: false,
+})
 
 const config = await useGetConfig()
 const globalStore = useGlobalStore()
 
 onMounted(() => {
-	globalStore.setCatalog(flows.map(x => ({ title: x.title, anchor: x.title, active: false })))
+	globalStore.setCatalog(catalog)
 })
 
 provide('flows', flows)
@@ -51,6 +67,7 @@ defineOgImageComponent('NuxtSeo', {
 					v-bind="{ flow }"
 				/>
 			</template>
+			<SpaceFlow v-bind="{ space: dev }" />
 		</div>
 
 		<CustomPoe />
diff --git a/pages/space/[id].vue b/pages/space/[id].vue
index ae9c667..125d699 100644
--- a/pages/space/[id].vue
+++ b/pages/space/[id].vue
@@ -4,6 +4,7 @@ const { $client } = useNuxtApp()
 
 const space = await $client.space.get.query({ id })
 const config = await useGetConfig()
+const globalStore = useGlobalStore()
 
 if (!space) {
 	throw createError({
@@ -11,6 +12,10 @@ if (!space) {
 	})
 }
 
+onMounted(() => {
+	globalStore.setCatalog(space.flows.map(x => ({ title: x.title, anchor: x.title, active: false })))
+})
+
 defineOgImageComponent('NuxtSeo', {
 	theme: config.ogTheme,
 	title: space.title,