agentworkshop 0.2.1

package/app/components/AppSidebar.vue

@@ -0,0 +1,286 @@
+<script setup lang="ts">
+const { t } = useI18n()
+const route = useRoute()
+const site = useSiteConfig()
+const store = useAppStore()
+
+interface MenuItem {
+  key: string
+  icon: string
+  label: string
+  /** 图标微动效类(im-*) */
+  motion?: string
+}
+
+const menuItems = computed<MenuItem[]>(() => [
+  { key: '/', icon: 'i-tabler-layout-dashboard', label: t('menu.dashboard'), motion: 'im-pop' },
+  { key: '/workshop', icon: 'i-tabler-box', label: t('menu.workshop'), motion: 'im-pop' },
+  { key: '/town', icon: 'i-tabler-map-2', label: t('menu.town'), motion: 'im-pop' },
+  { key: '/tokens', icon: 'i-tabler-key', label: t('menu.tokens'), motion: 'im-nudge-up' },
+  { key: '/daq', icon: 'i-tabler-activity', label: t('menu.daq'), motion: 'im-pop' },
+  { key: '/dcw', icon: 'i-tabler-settings-automation', label: t('menu.dcw'), motion: 'im-pop' },
+  { key: '/logs', icon: 'i-tabler-list-details', label: t('menu.logs'), motion: 'im-pop' },
+  { key: '/users', icon: 'i-tabler-users-group', label: t('menu.users'), motion: 'im-pop' },
+  { key: '/monitor', icon: 'i-tabler-cpu', label: t('menu.monitor'), motion: 'im-pulse' },
+  { key: '/settings', icon: 'i-tabler-settings', label: t('menu.settings'), motion: 'im-rotate' },
+])
+
+const isActive = (key: string): boolean =>
+  key === '/' ? route.path === '/' : route.path.startsWith(key)
+
+const go = (key: string) => {
+  if (!isActive(key)) navigateTo(key)
+}
+</script>
+
+<template>
+  <a-layout-sider
+    v-model:collapsed="store.sidebarCollapsed"
+    :trigger="null"
+    collapsible
+    breakpoint="lg"
+    :width="228"
+    :collapsed-width="64"
+    class="app-sider"
+  >
+    <!-- 品牌区:AwLogo 六边形标志(绿→青渐变 + 孪生虚影 + 三节点互连,与 favicon 同源) -->
+    <div class="logo">
+      <div
+        class="logo-mark"
+        aria-hidden="true"
+      >
+        <AwLogo :size="30" />
+      </div>
+      <transition name="slide-fade">
+        <div
+          v-show="!store.sidebarCollapsed"
+          class="logo-text"
+        >
+          <span class="logo-title">{{ site.name }}</span>
+          <span class="logo-sub">digital twin</span>
+        </div>
+      </transition>
+    </div>
+
+    <div
+      v-show="!store.sidebarCollapsed"
+      class="sider-section-label"
+    >
+      {{ t('menu.system') }}
+    </div>
+
+    <nav class="app-menu">
+      <button
+        v-for="item in menuItems"
+        :key="item.key"
+        type="button"
+        class="menu-item im"
+        :class="{ active: isActive(item.key) }"
+        :title="store.sidebarCollapsed ? item.label : undefined"
+        @click="go(item.key)"
+      >
+        <span
+          class="menu-icon"
+          :class="[item.icon, item.motion]"
+        />
+        <span
+          v-show="!store.sidebarCollapsed"
+          class="menu-label"
+        >{{ item.label }}</span>
+      </button>
+    </nav>
+
+    <!-- 底部铭牌:版本与运行模式 -->
+    <div
+      v-show="!store.sidebarCollapsed"
+      class="sider-footer"
+    >
+      <div class="footer-line">
+        <span>v{{ site.version }}</span>
+        <span class="sep">/</span>
+        <span>{{ site.mode }}</span>
+      </div>
+    </div>
+  </a-layout-sider>
+</template>
+
+<style scoped>
+.app-sider {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow: hidden auto;
+  background: var(--frost-bg);
+  backdrop-filter: var(--aurora-blur);
+  -webkit-backdrop-filter: var(--aurora-blur);
+  border-right: 1px solid var(--glass-line);
+  z-index: 20;
+}
+
+.app-sider::-webkit-scrollbar {
+  width: 0;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 58px;
+  padding: 0 16px;
+  overflow: hidden;
+  border-bottom: 1px solid var(--line);
+}
+
+/* 品牌标志:AwLogo SVG 直渲染(渐变六边形自带描边),微辉光点缀 */
+.logo-mark {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 36px;
+  filter: drop-shadow(0 0 6px rgb(53 224 160 / 30%));
+}
+
+.logo-text {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.25;
+  white-space: nowrap;
+}
+
+.logo-title {
+  font-family: var(--font-mono);
+  font-size: 13.5px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--ink);
+}
+
+.logo-sub {
+  font-family: var(--font-mono);
+  font-size: 8.5px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--sider-ink-faint);
+}
+
+.sider-section-label {
+  padding: 18px 20px 6px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--sider-ink-faint);
+}
+
+.app-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding: 2px 10px 0;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 36px;
+  padding: 0 10px;
+  font-family: var(--font-body);
+  font-size: 13.5px;
+  font-weight: 500;
+  color: var(--sider-ink);
+  text-align: left;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-panel-sm);
+  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
+}
+
+.menu-item:hover {
+  color: var(--ink);
+  background: var(--paper-deep);
+}
+
+.menu-item:active {
+  transform: scale(0.98);
+}
+
+/* 当前页:控制室绿洗 + 左缘品牌绿标记(导航定位态,替代旧墨色药丸) */
+.menu-item.active {
+  color: var(--accent-strong);
+  background: var(--accent-soft);
+  box-shadow: inset 2px 0 0 var(--accent);
+}
+.menu-item.active:hover {
+  background: var(--tone-success-bg);
+}
+
+.menu-icon {
+  flex: 0 0 20px;
+  font-size: 16px;
+}
+
+.menu-item .menu-icon {
+  color: var(--sider-ink-faint);
+}
+
+.menu-item:hover .menu-icon {
+  color: var(--ink);
+}
+
+/* 当前页图标:品牌绿 */
+.menu-item.active .menu-icon {
+  color: var(--accent-strong);
+}
+
+.menu-label {
+  overflow: hidden;
+  padding-left: 10px;
+  white-space: nowrap;
+  transition: opacity var(--transition-fast);
+}
+
+.menu-item.active .menu-label {
+  font-weight: 600;
+}
+
+.sider-footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 14px 18px 18px;
+}
+
+.footer-line {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  color: var(--sider-ink-faint);
+}
+
+.footer-line .sep {
+  color: var(--ink-fainter);
+}
+
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition:
+    opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1),
+    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  opacity: 0;
+  transform: translateX(-8px);
+}
+</style>

package/app/components/AwChart.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { BarChart, GaugeChart, LineChart, PieChart } from 'echarts/charts'
+import {
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+} from 'echarts/components'
+import VChart from 'vue-echarts'
+import type { PropType } from 'vue'
+import type { EChartsOption } from 'echarts'
+
+// 按需注册 ECharts 模块(必须在 <ClientOnly> 内使用:canvas 仅客户端可渲染)
+use([
+  CanvasRenderer,
+  BarChart,
+  LineChart,
+  PieChart,
+  GaugeChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent,
+  DataZoomComponent,
+])
+
+defineProps({
+  option: {
+    type: Object as PropType<EChartsOption>,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <VChart
+    v-bind="$attrs"
+    :option="option"
+    autoresize
+  />
+</template>

package/app/components/AwLogo.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+/**
+ * AwLogo —— 项目标志。
+ * 六边形品牌壳(绿→青渐变,与数据宪法主色同源)+ 内衬虚线六边形(数字孪生影子)
+ * + 三节点互连三角(数采 · 数控 · 产线 三环互连)。
+ * public/favicon.svg 与本组件同源;渐变 id 固定,多实例同屏渲染等价。
+ */
+withDefaults(defineProps<{ size?: number }>(), { size: 32 })
+</script>
+
+<template>
+  <svg
+    :width="size"
+    :height="size"
+    viewBox="0 0 64 64"
+    fill="none"
+    aria-hidden="true"
+  >
+    <defs>
+      <linearGradient
+        id="aw-logo-gradient"
+        x1="0"
+        y1="0"
+        x2="1"
+        y2="1"
+      >
+        <stop
+          offset="0"
+          stop-color="#35e0a0"
+        />
+        <stop
+          offset="1"
+          stop-color="#41c8f4"
+        />
+      </linearGradient>
+    </defs>
+    <path
+      d="M32 4 L56 18 V46 L32 60 L8 46 V18 Z"
+      stroke="url(#aw-logo-gradient)"
+      stroke-width="4"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M32 15 L46.7 23.5 V40.5 L32 49 L17.3 40.5 V23.5 Z"
+      stroke="#41c8f4"
+      stroke-opacity="0.45"
+      stroke-width="1.8"
+      stroke-dasharray="4 3"
+    />
+    <path
+      d="M32 23 L25 38 M32 23 L39 38 M25 38 L39 38"
+      stroke="#35e0a0"
+      stroke-width="1.8"
+      stroke-opacity="0.75"
+    />
+    <circle
+      cx="32"
+      cy="23"
+      r="3.4"
+      fill="#35e0a0"
+    />
+    <circle
+      cx="25"
+      cy="38"
+      r="3.4"
+      fill="#41c8f4"
+    />
+    <circle
+      cx="39"
+      cy="38"
+      r="3.4"
+      fill="#41c8f4"
+    />
+  </svg>
+</template>

package/app/components/workshop/A2aRpcDebugger.vue

@@ -0,0 +1,237 @@
+<script setup lang="ts">
+/**
+ * A2A JSON-RPC/SSE 调试器(P2):对 channel 内 agent 实例直发 JSON-RPC 2.0。
+ * - 普通方法(tasks/send 等):POST /a2a/:agentId/rpc → 结果 JSON
+ * - tasks/sendSubscribe:消费 SSE 流,事件逐条实时渲染(task/status-update/artifact-update/message/error)
+ * - message/send 需 Bearer token(可选填)
+ */
+import { message } from 'ant-design-vue'
+import { useStorage } from '@vueuse/core'
+import { useEntitiesStore } from '@/app/stores/workshop/entities'
+
+const { t } = useI18n()
+
+const props = defineProps<{ channelId: string }>()
+const open = defineModel<boolean>('open', { default: false })
+
+// 抽屉宽度拖拽调节(PaneSplitter;持久化,双击复位)
+const DRAWER_W_DEFAULT = 600
+const drawerWidth = useStorage('aw.drawer.a2aW', DRAWER_W_DEFAULT)
+const resizeDrawer = (d: number): void => {
+  drawerWidth.value = Math.min(1040, Math.max(420, drawerWidth.value - d))
+}
+
+const entities = useEntitiesStore()
+const agents = computed(() => entities.agents[props.channelId] ?? [])
+const agentId = ref('')
+watch(agents, (list) => {
+  if (!agentId.value && list.length > 0) agentId.value = list[0]?.agentId ?? ''
+}, { immediate: true })
+
+type Method = 'tasks/send' | 'tasks/sendSubscribe' | 'tasks/get' | 'tasks/list' | 'message/send' | 'agent/getCard'
+const method = ref<Method>('tasks/list')
+const methodOptions: Array<{ value: Method, label: string, sse?: boolean }> = [
+  { value: 'tasks/list', label: 'tasks/list' },
+  { value: 'tasks/get', label: 'tasks/get' },
+  { value: 'tasks/send', label: 'tasks/send' },
+  { value: 'tasks/sendSubscribe', label: 'tasks/sendSubscribe(SSE 流)', sse: true },
+  { value: 'message/send', label: 'message/send(需 token)' },
+  { value: 'agent/getCard', label: 'agent/getCard' },
+]
+
+const paramsJson = ref('{}')
+const token = ref('')
+const running = ref(false)
+const output = ref('')
+
+/** 按方法生成参数模板 */
+const template = (): Record<string, unknown> => {
+  switch (method.value) {
+    case 'tasks/send':
+    case 'tasks/sendSubscribe':
+      return { message: { role: 'ROLE_USER', parts: [{ text: t('a2aRpcDebugger.kq00d3v005') }] } }
+    case 'tasks/get':
+      return { taskId: '<taskId>' }
+    case 'message/send':
+      return { message: { role: 'ROLE_USER', parts: [{ text: t('a2aRpcDebugger.k1kgwib8006') }] } }
+    default:
+      return {}
+  }
+}
+
+const append = (line: string): void => {
+  output.value += `${line}\n`
+}
+
+/** SSE 消费:sendSubscribe 流式渲染 */
+const runSse = async (body: Record<string, unknown>): Promise<void> => {
+  const res = await fetch(`/api/workshop/a2a/${agentId.value}/rpc`, {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json',
+      'accept': 'text/event-stream',
+      ...(token.value ? { authorization: `Bearer ${token.value}` } : {}),
+    },
+    body: JSON.stringify(body),
+  })
+  append(`▶ HTTP ${res.status} ${res.headers.get('content-type') ?? ''}`)
+  if (!res.body) {
+    append(await res.text())
+    return
+  }
+  const reader = res.body.getReader()
+  const decoder = new TextDecoder()
+  let buf = ''
+  for (;;) {
+    const { done, value } = await reader.read()
+    if (done) break
+    buf += decoder.decode(value, { stream: true })
+    const frames = buf.split('\n\n')
+    buf = frames.pop() ?? ''
+    for (const frame of frames) {
+      const dataLine = frame.split('\n').find(l => l.startsWith('data:'))
+      if (dataLine) append(`◀ ${dataLine.slice(5).trim().slice(0, 400)}`)
+    }
+  }
+  append(t('a2aRpcDebugger.k1e1hi4u007'))
+}
+
+const run = async (): Promise<void> => {
+  if (!agentId.value) {
+    message.warning(t('a2aRpcDebugger.k1vryfv008'))
+    return
+  }
+  let params: Record<string, unknown>
+  try {
+    params = JSON.parse(paramsJson.value || '{}')
+  }
+  catch {
+    message.error('params 不是合法 JSON')
+    return
+  }
+  running.value = true
+  output.value = ''
+  const body = { jsonrpc: '2.0', id: Date.now(), method: method.value, params }
+  try {
+    if (method.value === 'tasks/sendSubscribe') {
+      await runSse(body)
+    }
+    else {
+      const res = await fetch(`/api/workshop/a2a/${agentId.value}/rpc`, {
+        method: 'POST',
+        headers: {
+          'content-type': 'application/json',
+          ...(token.value ? { authorization: `Bearer ${token.value}` } : {}),
+        },
+        body: JSON.stringify(body),
+      })
+      const text = await res.text()
+      append(`▶ POST /a2a/${agentId.value.slice(0, 8)}/rpc ${method.value} → HTTP ${res.status}`)
+      append(text.slice(0, 4000))
+    }
+  }
+  catch (e) {
+    append(`✖ ${e instanceof Error ? e.message : String(e)}`)
+  }
+  finally {
+    running.value = false
+  }
+}
+</script>
+
+<template>
+  <a-drawer
+    v-model:open="open"
+    placement="right"
+    :width="drawerWidth"
+    title="A2A RPC / SSE 调试器"
+    class="aw-resizable-drawer"
+  >
+    <workshop-pane-splitter
+      variant="bare"
+      class="drawer-resizer"
+      :label="$t('a2aRpcDebugger.k6hcbxi001')"
+      @resize="resizeDrawer"
+      @reset="drawerWidth = DRAWER_W_DEFAULT"
+    />
+    <div class="dbg">
+      <div class="row">
+        <a-select
+          v-model:value="agentId"
+          class="agent"
+          :placeholder="$t('a2aRpcDebugger.k34cz76002')"
+          :options="agents.map(a => ({ value: a.agentId, label: `${a.name}(${a.role})` }))"
+        />
+        <a-select
+          v-model:value="method"
+          class="method"
+          :options="methodOptions"
+        />
+      </div>
+      <a-input-password
+        v-model:value="token"
+        size="small"
+        placeholder="Bearer token(message/send 需要;留空匿名)"
+        class="token"
+      />
+      <div class="row">
+        <a-textarea
+          v-model:value="paramsJson"
+          :rows="6"
+          class="params"
+        />
+      </div>
+      <div class="row ops">
+        <a-button
+          size="small"
+          @click="paramsJson = JSON.stringify(template(), null, 2)"
+        >
+          {{ $t('a2aRpcDebugger.k1bqe2pj003') }}
+        </a-button>
+        <a-button
+          type="primary"
+          size="small"
+          :loading="running"
+          @click="run"
+        >
+          {{ $t('a2aRpcDebugger.k405w8004') }}
+        </a-button>
+      </div>
+      <pre class="output">{{ output || '(输出;sendSubscribe 将逐条渲染 SSE 事件)' }}</pre>
+    </div>
+  </a-drawer>
+</template>
+
+<style scoped>
+/* 抽屉左缘调宽手柄:锚定 panel 左缘(aw-resizable-drawer 提供 positioning 上下文) */
+.drawer-resizer {
+  position: absolute;
+  inset: 0 auto 0 0;
+  z-index: 8;
+}
+.dbg {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: 12px;
+}
+.row {
+  display: flex;
+  gap: 8px;
+}
+.agent { flex: 1 1 55%; }
+.method { flex: 1 1 45%; }
+.params { font-family: var(--font-mono); }
+.ops { justify-content: flex-end; }
+.output {
+  min-height: 240px;
+  padding: 10px;
+  overflow: auto;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  white-space: pre-wrap;
+  word-break: break-all;
+  background: color-mix(in srgb, currentColor 5%, transparent);
+  border-radius: var(--radius-panel-sm);
+}
+</style>