AgentServer/apps/mobile/src/views/NewTeamView.vue

<script setup lang="ts">
// 新建工作组：标题、组长（可不要）、组员
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import type { BotCard } from '@agent-server/client'
import BotCardItem from '../components/BotCardItem.vue'
import TopBar from '../components/TopBar.vue'
import { botClient, human } from '../lib/config'
import { attempt } from '../lib/ui'

const router = useRouter()
const client = botClient.value!
const cards = ref<BotCard[] | null>(null)
const title = ref('')
const lead = ref('')
const workers = ref<string[]>([])
const creating = ref(false)
const leads = computed(() => cards.value?.filter(b => b.kind === 'lead') ?? [])
const workerCards = computed(() => cards.value?.filter(b => b.kind === 'worker') ?? [])

onMounted(async () => {
  cards.value = (await attempt(() => client.bots())) ?? []
  lead.value = leads.value[0]?.id ?? ''
})

async function create() {
  creating.value = true
  const t = await attempt(() => client.teams.create({
    title: title.value.trim() || undefined, human: human.value,
    leadBotId: lead.value || undefined, workerBotIds: workers.value,
  }))
  creating.value = false
  if (t) await router.replace(`/teams/${t.id}`)
}
</script>

<template>
  <TopBar back title="新建工作组" />
  <div class="m-page flex-1 min-h-0 overflow-y-auto pb-[calc(24px+var(--safe-bottom))]">
    <div class="m-group-title">标题</div>
    <div class="m-group p-3"><input v-model="title" class="m-field" placeholder="可选，不填自动生成"></div>

    <div class="m-group-title">组长：理解需求、拆分任务、分派给组员并汇总</div>
    <div class="m-group m-list">
      <label class="m-row">
        <input v-model="lead" type="radio" value="" class="w-5 h-5 flex-none">
        <span class="flex-1">不要组长（直接 @ 组员）</span>
      </label>
      <label v-for="b in leads" :key="b.id" class="m-row">
        <input v-model="lead" type="radio" :value="b.id" class="w-5 h-5 flex-none">
        <BotCardItem :bot="b" />
      </label>
    </div>

    <div class="m-group-title">组员{{ lead ? '（可以不选，由组长按需申请加入）' : '' }}</div>
    <div class="m-group m-list">
      <div v-if="!cards" class="px-4 py-3 text-fg-muted">加载中…</div>
      <div v-else-if="!workerCards.length" class="px-4 py-3 text-fg-muted">这个 Bot Key 没有可用的组员</div>
      <label v-for="b in workerCards" :key="b.id" class="m-row">
        <input v-model="workers" type="checkbox" :value="b.id" class="w-5 h-5 flex-none">
        <BotCardItem :bot="b" />
      </label>
    </div>

    <div class="px-3 pt-5">
      <button type="button" class="m-btn-primary w-full" :disabled="creating || (!lead && !workers.length)" @click="create">{{ creating ? '创建中…' : '创建' }}</button>
    </div>
  </div>
</template>