agentworkshop 0.2.1

package/app/components/workshop/ChannelSessionList.vue

@@ -0,0 +1,593 @@
+<script setup lang="ts">
+/**
+ * 左栏 Channel 会话列表(Zcode session 栏):workspace 内挂载的 channel,
+ * 实时状态徽标(忙碌成员数/活跃任务数),点击聚焦;挂载/移出/设置操作。
+ * v10 模板化:
+ *  - 「从模板挂载」:选择 Channel 模板 → 实例化 + 挂载一步完成(替代"挂载已有 Channel");
+ *  - 「设置」:热修改当前 Channel 实例的场景描述与工作目录(成员运行时自动回收重装配);
+ *  - 「保存为模板」:把当前 Channel 实例捕获为可复用模板(场景/目录/团队快照)。
+ */
+import { message } from 'ant-design-vue'
+import { useWorkspacesStore } from '@/app/stores/workshop/workspaces'
+import { useEntitiesStore } from '@/app/stores/workshop/entities'
+import { useWorkshopApi, type ChannelDto, type ChannelTemplateDto } from '@/app/composables/workshop/useWorkshopApi'
+
+const { t } = useI18n()
+
+const props = defineProps<{ wsId: string }>()
+const wsStore = useWorkspacesStore()
+const entities = useEntitiesStore()
+const api = useWorkshopApi()
+
+const workspace = computed(() => wsStore.workspaces.find(w => w.id === props.wsId))
+
+const channels = ref<ChannelDto[]>([])
+const channelTemplates = ref<ChannelTemplateDto[]>([])
+const refreshChannels = async (): Promise<void> => {
+  // SSR 守卫:axios 相对 baseURL 仅客户端有效(服务端拉取会 Invalid URL)
+  if (typeof window === 'undefined') return
+  const [ch, tpl] = await Promise.all([
+    api.listChannels(),
+    api.listChannelTemplates().catch(() => null),
+  ])
+  channels.value = (ch as unknown as { data?: ChannelDto[] })?.data ?? []
+  channelTemplates.value = (tpl as unknown as { data?: ChannelTemplateDto[] } | null)?.data ?? []
+}
+void refreshChannels()
+
+const mountedChannels = computed(() =>
+  (workspace.value?.channelIds ?? [])
+    .map(id => ({ id, meta: channels.value.find(c => c.id === id), entity: entities.channels[id] }))
+    .map(({ id, meta, entity }) => ({
+      id,
+      name: entity?.name ?? meta?.name ?? id.slice(0, 8),
+      /** 实体基线(WS 快照)是否已到达:未到时计数不可信,展示"同步中"而非误导性的 0 */
+      synced: entity !== undefined,
+      busy: entities.busyCount(id),
+      agents: entities.agents[id]?.length ?? 0,
+      activeTasks: (entities.tasks[id] ?? []).filter(t => !['COMPLETED', 'CANCELED', 'FAILED'].includes(t.state)).length,
+      workspace: meta?.workspace ?? '',
+    })),
+)
+
+const select = (channelId: string): void => {
+  wsStore.setActiveChannel(props.wsId, channelId)
+}
+
+/** 点击工作目录行:复制完整路径到剪贴板(有真实作用;title 提示全路径) */
+const copyWorkspace = async (path: string): Promise<void> => {
+  try {
+    await navigator.clipboard.writeText(path)
+    message.success(t('channelSessionList.kud74vg040', { p0: path }))
+  }
+  catch {
+    message.error(t('channelSessionList.krij3gg026'))
+  }
+}
+/** 路径显示 basename(E:\codes\AgentWorkShop → AgentWorkShop),全路径在 title/复制 */
+const baseName = (path: string): string => path.replace(/[\\/]+$/, '').split(/[\\/]/).pop() ?? path
+/** 默认目录(data/workspaces/<uuid>)的 basename 是 36 位裸 UUID,对用户零信息量 → 不展示该行 */
+const UUID_RE = /^[\da-f]{8}-[\da-f]{4}-[\da-f]{4}-[\da-f]{4}-[\da-f]{12}$/i
+const displayWorkspace = (path: string): string => {
+  const base = baseName(path)
+  return UUID_RE.test(base) ? '' : base
+}
+
+// ===== 新建 Channel 并挂载(空团队) =====
+const mountModal = ref(false)
+const mountForm = reactive({ name: '', description: '', workspace: '', scenarioPrompt: '' })
+const mountSubmitting = ref(false)
+/** FileSelector 弹窗(选择服务器目录作为 workspace) */
+const fileSelectorOpen = ref(false)
+const createAndMount = async (): Promise<void> => {
+  if (!mountForm.name.trim()) {
+    message.warning('Channel 名称必填')
+    return
+  }
+  mountSubmitting.value = true
+  try {
+    const res = await api.createChannel({
+      name: mountForm.name.trim(),
+      description: mountForm.description || undefined,
+      scenarioPrompt: mountForm.scenarioPrompt.trim() || undefined,
+      workspace: mountForm.workspace.trim() || undefined,
+    })
+    const created = (res as unknown as { data?: { channelId?: string } })?.data
+    const channelId = created?.channelId
+    if (!channelId) throw new Error(t('channelSessionList.k1bg6shc027'))
+    await wsStore.mountChannel(props.wsId, channelId)
+    mountModal.value = false
+    mountForm.name = ''
+    mountForm.description = ''
+    mountForm.workspace = ''
+    mountForm.scenarioPrompt = ''
+    void refreshChannels()
+    message.success(t('channelSessionList.kn89jvs028'))
+  }
+  catch (e) {
+    message.error(t('channelSessionList.k1x2th9e041', { p0: e instanceof Error ? e.message : String(e) }))
+  }
+  finally {
+    mountSubmitting.value = false
+  }
+}
+
+// ===== 从 Channel 模板挂载(实例化 + mount 一步) =====
+const templateMountId = ref<string | undefined>()
+const templateMounting = ref(false)
+const mountFromTemplate = async (): Promise<void> => {
+  if (!templateMountId.value) return
+  templateMounting.value = true
+  try {
+    const res = await api.mountChannelTemplate(props.wsId, templateMountId.value)
+    const data = (res as unknown as { data?: { agentCount?: number } })?.data
+    message.success(t('channelSessionList.kai50qc042', { p0: data?.agentCount ?? 0 }))
+    templateMountId.value = undefined
+    void refreshChannels()
+  }
+  catch (e) {
+    const err = e as { data?: { message?: string }, message?: string }
+    message.error(err?.data?.message ?? err?.message ?? t('channelSessionList.k97xi7u029'))
+  }
+  finally {
+    templateMounting.value = false
+  }
+}
+
+const unmount = (channelId: string): void => {
+  wsStore.unmountChannel(props.wsId, channelId)
+    .catch((e: { data?: { message?: string }, message?: string }) => { message.error(e?.data?.message ?? e?.message ?? t('channelSessionList.k1hgfvdc030')) })
+}
+
+// ===== Channel 实例设置(场景/工作目录热更新)+ 保存为模板 =====
+const settingsOpen = ref(false)
+const settingsChannelId = ref<string>('')
+const settingsForm = reactive({ name: '', scenarioPrompt: '', workspace: '' })
+const settingsSaving = ref(false)
+const fileSelectorOpen2 = ref(false)
+const openSettings = (channelId: string): void => {
+  const meta = channels.value.find(c => c.id === channelId)
+  settingsChannelId.value = channelId
+  settingsForm.name = meta?.name ?? ''
+  settingsForm.scenarioPrompt = meta?.scenarioPrompt ?? ''
+  settingsForm.workspace = meta?.workspace ?? ''
+  settingsOpen.value = true
+}
+const saveSettings = async (): Promise<void> => {
+  settingsSaving.value = true
+  try {
+    await api.patchChannel(settingsChannelId.value, {
+      scenarioPrompt: settingsForm.scenarioPrompt,
+      workspace: settingsForm.workspace.trim() || undefined,
+    })
+    message.success(t('channelSessionList.kvsxlu6031'))
+    settingsOpen.value = false
+    void refreshChannels()
+  }
+  catch (e) {
+    message.error(e instanceof Error ? e.message : String(e))
+  }
+  finally {
+    settingsSaving.value = false
+  }
+}
+
+// 保存为模板(捕获当前 channel 的场景/目录/团队)
+const saveTplOpen = ref(false)
+const saveTplForm = reactive({ name: '', description: '', visibility: 'private' as 'private' | 'public' })
+const saveTplSubmitting = ref(false)
+const openSaveTemplate = (): void => {
+  saveTplForm.name = t('channelSessionList.k2hfym5043', { p0: settingsForm.name || 'channel' })
+  saveTplForm.description = ''
+  saveTplForm.visibility = 'private'
+  saveTplOpen.value = true
+}
+const saveAsTemplate = async (): Promise<void> => {
+  if (!saveTplForm.name.trim()) {
+    message.warning(t('channelSessionList.k1i0ji0y032'))
+    return
+  }
+  saveTplSubmitting.value = true
+  try {
+    await api.captureChannelTemplate({
+      channelId: settingsChannelId.value,
+      name: saveTplForm.name.trim(),
+      description: saveTplForm.description || undefined,
+      visibility: saveTplForm.visibility,
+    })
+    message.success(t('channelSessionList.kjpguxw033'))
+    saveTplOpen.value = false
+    void refreshChannels()
+  }
+  catch (e) {
+    message.error(e instanceof Error ? e.message : String(e))
+  }
+  finally {
+    saveTplSubmitting.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="channel-list">
+    <div class="list-head">
+      <span class="title">Channels</span>
+      <span class="head-actions">
+        <button
+          class="head-op im"
+          type="button"
+          title="Channel 模板中心"
+          @click="navigateTo('/workshop/channel-templates')"
+        >
+          <span class="i-tabler-layout-grid-add im-pop" />
+        </button>
+        <button
+          class="head-op im"
+          type="button"
+          title="新建 Channel"
+          @click="mountModal = true"
+        >
+          <span class="i-tabler-plus im-pop" />
+        </button>
+      </span>
+    </div>
+
+    <!-- 频道列表主体:数据源(REST channels + WS entities)均为客户端态,
+         SSR 首帧为空 → 硬刷新水合时结构与客户端首渲染不一致,节点会错配到
+         相邻 antd Select 的 DOM 上(行内 .row1 布局丢失、按钮错位)。
+         ClientOnly 隔离:SSR 输出空壳,客户端一次性渲染,无水合配对。 -->
+    <ClientOnly>
+      <div
+        v-if="mountedChannels.length === 0"
+        class="empty"
+      >
+        {{ $t('channelSessionList.kkv789s014') }}
+      </div>
+
+      <div
+        v-for="ch in mountedChannels"
+        :key="ch.id"
+        class="channel-item"
+        :class="{ active: workspace?.activeChannelId === ch.id }"
+        @click="select(ch.id)"
+      >
+        <div class="row1">
+          <span
+            class="dot"
+            :class="{ live: ch.activeTasks > 0 }"
+          />
+          <span class="ch-name">{{ ch.name }}</span>
+          <button
+            class="op im"
+            type="button"
+            :title="$t('channelSessionList.kne35ug001')"
+            :aria-label="$t('channelSessionList.kjmldih035', { p0: ch.name })"
+            @click.stop="openSettings(ch.id)"
+          >
+            <span class="i-tabler-settings2 im-pop" />
+          </button>
+          <button
+            class="op im"
+            type="button"
+            title="移出 workspace"
+            :aria-label="$t('channelSessionList.k1yurooi036', { p0: ch.name })"
+            @click.stop="unmount(ch.id)"
+          >
+            <span class="i-tabler-x im-pop" />
+          </button>
+        </div>
+        <div class="row2">
+          <!-- 快照未到达:计数不可信,显示同步占位(不呈现误导性的"0 成员") -->
+          <span
+            v-if="!ch.synced"
+            class="meta syncing"
+          >{{ $t('channelSessionList.k1bst7s9015') }}</span>
+          <span
+            v-else
+            class="meta"
+          >{{ ch.agents }} {{ $t('channelSessionList.k1ggoa45025') }} {{ ch.busy }} / {{ $t('channelSessionList.k3wcox034') }} {{ ch.activeTasks }}</span>
+        </div>
+        <button
+          v-if="displayWorkspace(ch.workspace)"
+          class="row2 ws im"
+          type="button"
+          :title="$t('channelSessionList.kfe4pzq037', { p0: ch.workspace })"
+          @click.stop="copyWorkspace(ch.workspace)"
+        >
+          <span class="i-tabler-folder" /> {{ displayWorkspace(ch.workspace) }}
+        </button>
+      </div>
+    </ClientOnly>
+
+    <div class="mount-template">
+      <a-select
+        v-model:value="templateMountId"
+        size="small"
+        :placeholder="'从 Channel 模板挂载'"
+        class="select"
+        :loading="templateMounting"
+        :options="channelTemplates.map(t => ({
+          value: t.id,
+          label: $t('channelSessionList.k1oes209038', { p0: t.isBuiltin ? '内置 · ' : t.visibility === 'public' ? '公开 · ' : '', p1: t.name, p2: (t.lead ? 1 : 0) + t.members.length }),
+        }))"
+        @change="mountFromTemplate"
+      />
+      <div class="tpl-hint">
+        {{ $t('channelSessionList.k18ppu31016') }}
+      </div>
+    </div>
+
+    <a-modal
+      v-model:open="mountModal"
+      :title="$t('channelSessionList.k1qjyl6l002')"
+      :confirm-loading="mountSubmitting"
+      ok-text="创建"
+      cancel-text="取消"
+      @ok="createAndMount"
+    >
+      <a-form layout="vertical">
+        <a-form-item label="Channel 名称">
+          <a-input v-model:value="mountForm.name" />
+        </a-form-item>
+        <a-form-item :label="$t('channelSessionList.k40gkk003')">
+          <a-input v-model:value="mountForm.description" />
+        </a-form-item>
+        <a-form-item :label="$t('channelSessionList.k1wj4f38004')">
+          <a-textarea
+            v-model:value="mountForm.scenarioPrompt"
+            :rows="4"
+            :placeholder="$t('channelSessionList.k1098zie005')"
+          />
+          <template #extra>
+            <span class="ws-hint">{{ $t('channelSessionList.k1u3zsr5017') }}</span>
+          </template>
+        </a-form-item>
+        <a-form-item :label="$t('channelSessionList.kmgv4h5006')">
+          <a-input-group compact>
+            <a-input
+              v-model:value="mountForm.workspace"
+              style="width: 70%"
+              placeholder="留空 = data/workspaces/<channelId>"
+              allow-clear
+              @press-enter="createAndMount"
+            />
+            <a-button
+              style="width: 30%"
+              @click="fileSelectorOpen = true"
+            >
+              {{ $t('channelSessionList.k3pz0ma018') }}
+            </a-button>
+          </a-input-group>
+          <template #extra>
+            <span class="ws-hint">{{ $t('channelSessionList.kucq30k019') }}</span>
+          </template>
+        </a-form-item>
+        <a-form-item>
+          <span class="ws-hint">{{ $t('channelSessionList.k1ful761020') }}</span>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+
+    <!-- Channel 实例设置:场景/工作目录热更新 + 保存为模板 -->
+    <a-modal
+      v-model:open="settingsOpen"
+      :title="$t('channelSessionList.k1pmemvt039', { p0: settingsForm.name })"
+      :confirm-loading="settingsSaving"
+      ok-text="保存"
+      cancel-text="取消"
+      @ok="saveSettings"
+    >
+      <a-form layout="vertical">
+        <a-form-item :label="$t('channelSessionList.k1i8q46x007')">
+          <a-textarea
+            v-model:value="settingsForm.scenarioPrompt"
+            :rows="4"
+            :placeholder="$t('channelSessionList.ku3ugac008')"
+          />
+        </a-form-item>
+        <a-form-item :label="$t('channelSessionList.k67dzev009')">
+          <a-input-group compact>
+            <a-input
+              v-model:value="settingsForm.workspace"
+              style="width: 70%"
+              placeholder="data/workspaces/<channelId>"
+              allow-clear
+            />
+            <a-button
+              style="width: 30%"
+              @click="fileSelectorOpen2 = true"
+            >
+              {{ $t('channelSessionList.k3pz0ma018') }}
+            </a-button>
+          </a-input-group>
+        </a-form-item>
+        <a-form-item>
+          <a-button
+            size="small"
+            @click="openSaveTemplate"
+          >
+            <span class="i-tabler-template" />
+            {{ $t('channelSessionList.k6kpql010') }}
+          </a-button>
+          <span class="ws-hint">{{ $t('channelSessionList.k1x6kznr021') }}</span>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+
+    <!-- 保存为模板 -->
+    <a-modal
+      v-model:open="saveTplOpen"
+      :title="$t('channelSessionList.k6kpql010')"
+      :confirm-loading="saveTplSubmitting"
+      ok-text="保存模板"
+      cancel-text="取消"
+      @ok="saveAsTemplate"
+    >
+      <a-form layout="vertical">
+        <a-form-item :label="$t('channelSessionList.k1f55q76011')">
+          <a-input v-model:value="saveTplForm.name" />
+        </a-form-item>
+        <a-form-item :label="$t('channelSessionList.k40gkk003')">
+          <a-input v-model:value="saveTplForm.description" />
+        </a-form-item>
+        <a-form-item :label="$t('channelSessionList.k3lrqn0012')">
+          <a-radio-group v-model:value="saveTplForm.visibility">
+            <a-radio value="private">
+              {{ $t('channelSessionList.k1otvrfv022') }}
+            </a-radio>
+            <a-radio value="public">
+              {{ $t('channelSessionList.k1cc399s023') }}
+            </a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item>
+          <span class="ws-hint">{{ $t('channelSessionList.kl9btf7024') }}</span>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+
+    <!-- FileSelector:服务器目录选择 -> 回填工作目录 -->
+    <workshop-file-selector-modal
+      v-model:open="fileSelectorOpen"
+      :title="$t('channelSessionList.kbdp56k013')"
+      :initial-path="mountForm.workspace || undefined"
+      @select="(p) => { mountForm.workspace = p }"
+    />
+    <workshop-file-selector-modal
+      v-model:open="fileSelectorOpen2"
+      :title="$t('channelSessionList.kbdp56k013')"
+      :initial-path="settingsForm.workspace || undefined"
+      @select="(p) => { settingsForm.workspace = p }"
+    />
+  </div>
+</template>
+
+<style scoped>
+.channel-list {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  padding: 12px 10px 8px;
+}
+.list-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px 8px;
+}
+.title {
+  font-family: var(--font-display);
+  font-size: 16px;
+  letter-spacing: -0.01em;
+  color: var(--ink);
+}
+.head-actions { display: inline-flex; gap: 2px; }
+.head-op {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  font-size: 14px;
+  color: var(--ink-faint);
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-chip);
+  transition: background var(--transition-fast), color var(--transition-fast);
+}
+.head-op:hover { color: var(--ink); background: var(--paper-deep); }
+.empty {
+  padding: 14px 10px;
+  font-size: 12px;
+  color: var(--ink-faint);
+}
+.channel-item {
+  padding: 7px 9px;
+  margin: 1px 0;
+  cursor: pointer;
+  border-radius: var(--radius-panel-sm);
+  transition: background var(--transition-fast);
+}
+.channel-item:hover { background: var(--paper-deep); }
+.channel-item.active { background: var(--paper-deep); box-shadow: inset 2px 0 0 var(--accent); }
+.row1 {
+  display: flex;
+  gap: 7px;
+  align-items: center;
+  font-size: 13px;
+  color: var(--ink-soft);
+}
+.channel-item.active .row1 { color: var(--ink); font-weight: 500; }
+.dot {
+  flex: 0 0 auto;
+  width: 7px;
+  height: 7px;
+  background: var(--tone-neutral-dot);
+  opacity: 0.55;
+  border-radius: 50%;
+}
+.dot.live {
+  background: var(--tone-success-dot);
+  opacity: 1;
+}
+.ch-name {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.op {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  font-size: 13px;
+  color: var(--ink-fainter);
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-chip);
+  /* 常显(低透明度):不再 hover-only——行级操作入口不应时隐时现 */
+  opacity: 0.55;
+  transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
+}
+.channel-item:hover .op,
+.channel-item.active .op { opacity: 0.9; }
+.op:hover { opacity: 1; color: var(--ink); background: var(--paper-deep); }
+.op:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.row2 { padding-left: 14px; font-size: 11px; color: var(--ink-faint); }
+.meta.syncing { font-style: italic; opacity: 0.6; }
+.row2.ws {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  overflow: hidden;
+  max-width: 100%;
+  padding: 0 2px 0 14px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ink-fainter);
+  text-align: left;
+  cursor: copy; /* 点击复制完整路径(title 提示) */
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-chip);
+  transition: color var(--transition-fast), background var(--transition-fast);
+}
+.row2.ws:hover { color: var(--ink-soft); background: color-mix(in srgb, currentColor 6%, transparent); }
+.row2.ws:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.mount-template { padding: 12px 6px 6px; border-top: 1px solid var(--line); margin-top: 10px; }
+.select { width: 100%; }
+.tpl-hint {
+  padding: 5px 2px 0;
+  font-size: 10.5px;
+  color: var(--ink-fainter);
+}
+.ws-hint { font-size: 11px; color: var(--ink-faint); }
+</style>