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

@@ -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,