Vibe Coding Wallpaper
开始体验
全部场景
智能体工作区

并行构建

orbit-workspace / feat/live-collaborators
PROMPT · 0%
智能体推理
拆分功能在线状态、头像界面和顶部集成可以独立推进。
WorkspaceHeader.vue prompt
WorkspaceHeader.vueTSuseWorkspacePresence.tsTSpresence.ts
1<script setup lang="ts">
2import { computed } from 'vue'
3import { Bell, ChevronDown, Search } from 'lucide-vue-next'
4import { useWorkspacePresence } from '@/composables/useWorkspacePresence'
5import PresenceStack from '@/components/presence/PresenceStack.vue'
6
7const props = defineProps<{ workspaceId: string; projectName: string }>()
8const { members, status } = useWorkspacePresence(props.workspaceId)
9
10const connectionLabel = computed(() => {
11 if (status.value === 'connected') return 'Live'
12 if (status.value === 'reconnecting') return 'Reconnecting…'
13 return 'Offline'
14})
15</script>
16
17<template>
18 <header class="workspace-header">
19 <div class="project-identity">
20 <span class="project-mark">V</span>
21 <div><small>WORKSPACE</small><strong>{{ projectName }}</strong></div>
22 <ChevronDown :size="14" />
23 </div>
24
25 <div class="header-actions">
26 <button class="search"><Search :size="15" /> Search project</button>
27 <span class="connection" :data-status="status">
28 <i /> {{ connectionLabel }}
29 </span>
30 <PresenceStack :members="members" :max-visible="4" />
31 <button aria-label="Notifications"><Bell :size="16" /></button>
32 </div>
33 </header>
34</template>
35
36<style scoped>
37.workspace-header { display:flex; align-items:center; justify-content:space-between; }
38.connection[data-status="connected"] i { background:#49d7a6; }
39.header-actions { display:flex; align-items:center; gap:12px; }
40</style>
⑂ feat/live-collaboratorsTypeScriptUTF-8
Codex task streamPROMPT
TASK

在项目顶部加入实时协作成员状态

Map header and presence API

·Create realtime composable

·Build collaborator stack

·Verify responsive header

·Run production build

Understanding header composition

Read WorkspaceHeader.vue and presence API

Created useWorkspacePresence.ts

Created PresenceStack.vue

Member avatarUrl may be undefined

Added avatar fallback and accessible label

Property 'avatarUrl' does not exist on type 'WorkspaceMember'

localhost:7001 / workspace HMR
V

LIVE PROJECTOrbit Workspace

PROJECT OVERVIEW

Ship together,
without losing flow.

Realtime changes, focused conversations, and a shared sense of progress.

AKMRJLPSCYNO6 collaborators online
working alone
6 collaborators online
agent
Realtime collaborator presence shipped to the workspace headerproduction build · 842ms
关于此场景

并行构建

编辑器、Codex 风格任务流与预览面板协同运转的动态工作区。

适合深度工作、直播背景,也适合静静看着软件逐步成形。

Codex 灵感多面板构建模式