refactor: Update link behavior in Header and adjust space flow struct…

…ure (#125)

* 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.

* fix(tsconfig): update tsconfig to exclude node_modules and components/ui

Update tsconfig to exclude "node_modules" and "components/ui" for better
TypeScript compilation. This helps to improve build performance and avoid
unnecessary files in the compilation process.

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>

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>

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

package.json

@@ -78,4 +78,4 @@
 			]
 		}
 	}
-}
+}

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 />

pages/space/[id].vue

@@ -4,13 +4,18 @@ const { $client } = useNuxtApp()
 
 const space = await $client.space.get.query({ id })
 const config = await useGetConfig()
+const globalStore = useGlobalStore()
 
 if (!space) {
 	throw createError({
 		statusCode: 404,
 	})
 }
 
+onMounted(() => {
+	globalStore.setCatalog(space.flows.map(x => ({ title: x.title, anchor: x.title, active: false })))
+})
+
 defineOgImageComponent('NuxtSeo', {
 	theme: config.ogTheme,
 	title: space.title,

tsconfig.json

@@ -1,4 +1,8 @@
 {
 	// https://nuxt.com/docs/guide/concepts/typescript
-	"extends": "./.nuxt/tsconfig.json"
-}
+	"extends": "./.nuxt/tsconfig.json",
+	"exclude": [
+		"node_modules",
+		"components/ui"
+	]
+}