From b54fd7a24a937366505e4bac23d81ef153321106 Mon Sep 17 00:00:00 2001
From: matevip <matevip@mate.vip>
Date: Sun, 10 May 2026 08:27:55 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20channel=20binding=20agent=20dropdown?=
 =?UTF-8?q?=20=E2=80=94=20render=20pi:*=20icons=20+=20=E5=91=98=E5=B7=A5?=
 =?UTF-8?q?=20wording?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/channels/ChannelEditModal.vue  | 141 ++++++++++++++++-
 .../channels/ChannelOnboardingWizard.vue      | 145 +++++++++++++++++-
 mateclaw-ui/src/i18n/locales/zh-CN.ts         |  12 +-
 3 files changed, 278 insertions(+), 20 deletions(-)

diff --git a/mateclaw-ui/src/components/channels/ChannelEditModal.vue b/mateclaw-ui/src/components/channels/ChannelEditModal.vue
index 03b24d54..915cbd2c 100644
--- a/mateclaw-ui/src/components/channels/ChannelEditModal.vue
+++ b/mateclaw-ui/src/components/channels/ChannelEditModal.vue
@@ -39,12 +39,58 @@
           </div>
           <div class="form-group">
             <label class="form-label">{{ t('channels.fields.bindAgent') }}</label>
-            <select v-model="form.agentId" class="form-input">
-              <option :value="null">{{ t('channels.placeholders.selectAgent') }}</option>
-              <option v-for="agent in agents" :key="agent.id" :value="agent.id">
-                {{ plainTextIcon(agent.icon) }} {{ agent.name }}
-              </option>
-            </select>
+            <!-- Custom dropdown so SkillIcon renders pi:* glyphs; native
+                 <select><option> can't host the component. Mirrors the
+                 ChannelOnboardingWizard step-3 pattern. -->
+            <div class="agent-select" :class="{ open: agentDropdownOpen }">
+              <button
+                type="button"
+                class="agent-select-trigger"
+                @click="agentDropdownOpen = !agentDropdownOpen"
+              >
+                <span class="agent-select-trigger__icon" :style="{ color: agentIconColor(selectedAgent?.icon) }">
+                  <SkillIcon :value="selectedAgent?.icon" :size="20" :fallback="'🤖'" />
+                </span>
+                <span class="agent-select-trigger__name">{{
+                  selectedAgent?.name || t('channels.placeholders.selectAgent')
+                }}</span>
+                <svg
+                  class="agent-select-trigger__arrow"
+                  :class="{ open: agentDropdownOpen }"
+                  width="12" height="12" viewBox="0 0 24 24" fill="none"
+                  stroke="currentColor" stroke-width="2"
+                ><polyline points="6 9 12 15 18 9"/></svg>
+              </button>
+              <Transition name="fade">
+                <div
+                  v-if="agentDropdownOpen"
+                  class="agent-dropdown-backdrop"
+                  @click="agentDropdownOpen = false"
+                ></div>
+              </Transition>
+              <Transition name="agent-dropdown">
+                <div v-if="agentDropdownOpen" class="agent-dropdown">
+                  <div
+                    v-for="a in agents"
+                    :key="a.id"
+                    class="agent-dropdown-item"
+                    :class="{ active: String(a.id) === String(form.agentId) }"
+                    @click="onSelectAgent(a)"
+                  >
+                    <span class="agent-dropdown-item__icon" :style="{ color: agentIconColor(a.icon) }">
+                      <SkillIcon :value="a.icon" :size="18" :fallback="'🤖'" />
+                    </span>
+                    <span class="agent-dropdown-item__name">{{ a.name }}</span>
+                    <span v-if="String(a.id) === String(form.agentId)" class="agent-dropdown-item__check">
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
+                    </span>
+                  </div>
+                  <div v-if="agents.length === 0" class="agent-dropdown-empty">
+                    {{ t('chat.loadingAgents') }}
+                  </div>
+                </div>
+              </Transition>
+            </div>
           </div>
         </div>
 
@@ -441,7 +487,8 @@ import { useWeixinQrcodePoll } from '@/composables/channels/useWeixinQrcodePoll'
 import { useWecomBotAuth } from '@/composables/channels/useWecomBotAuth'
 import { useFeishuAppRegister } from '@/composables/channels/useFeishuAppRegister'
 import { useDingTalkAppRegister } from '@/composables/channels/useDingTalkAppRegister'
-import { plainTextIcon } from '@/composables/usePixelarticons'
+import SkillIcon from '@/components/common/SkillIcon.vue'
+import { agentIconColor } from '@/utils/agentIconColor'
 
 interface Props {
   modelValue: boolean
@@ -491,6 +538,20 @@ const showAdvanced = ref(false)
 const accessControl = ref<AccessControlValue>(defaultAccessControl())
 const renderConfig = ref<RenderConfigValue>(defaultRenderConfig())
 
+// ========== Custom agent dropdown ==========
+// Native <select><option> can't render <SkillIcon> for pi:* glyphs;
+// mirror the ChatConsole.vue / ChannelOnboardingWizard.vue pattern.
+const agentDropdownOpen = ref(false)
+const selectedAgent = computed<Agent | null>(() => {
+  const id = form.value.agentId
+  if (id == null) return null
+  return props.agents.find(a => String(a.id) === String(id)) ?? null
+})
+function onSelectAgent(a: Agent) {
+  form.value.agentId = a.id as any
+  agentDropdownOpen.value = false
+}
+
 // ========== Auth composables ==========
 
 const weixin = useWeixinQrcodePoll(({ botToken, baseUrl }) => {
@@ -957,4 +1018,70 @@ function save() {
 
 .json-hint { font-size: 12px; color: var(--mc-text-tertiary); margin: 0 0 8px; }
 .json-editor { font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace; font-size: 13px; line-height: 1.5; tab-size: 2; }
+
+/* ===== Agent custom dropdown (mirrors ChatConsole.vue / wizard pattern) =====
+   Native <select><option> can't host <SkillIcon> for pi:* glyphs.
+   z-index has to clear the modal-overlay (1000). */
+.agent-select { position: relative; }
+.agent-select-trigger {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border: 1px solid var(--mc-border);
+  border-radius: 10px;
+  font-size: 14px;
+  color: var(--mc-text-primary);
+  background: var(--mc-bg-elevated);
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.15s;
+  box-sizing: border-box;
+}
+.agent-select-trigger:hover { border-color: var(--mc-primary); }
+.agent-select.open .agent-select-trigger { border-color: var(--mc-primary); box-shadow: 0 0 0 3px rgba(217,119,87,0.12); }
+.agent-select-trigger__icon { font-size: 18px; line-height: 1; flex-shrink: 0; display: inline-flex; }
+.agent-select-trigger__name { flex: 1; text-align: left; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.agent-select-trigger__arrow { flex-shrink: 0; color: var(--mc-text-tertiary); transition: transform 0.2s; }
+.agent-select-trigger__arrow.open { transform: rotate(180deg); }
+
+.agent-dropdown-backdrop { position: fixed; inset: 0; z-index: 1099; }
+.agent-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 1100;
+  background: var(--mc-bg-elevated);
+  border: 1px solid var(--mc-border);
+  border-radius: 12px;
+  padding: 6px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
+  max-height: 280px;
+  overflow-y: auto;
+}
+.agent-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.12s;
+}
+.agent-dropdown-item:hover { background: var(--mc-bg-sunken); }
+.agent-dropdown-item.active { background: var(--mc-primary-bg); }
+.agent-dropdown-item__icon { font-size: 20px; line-height: 1; flex-shrink: 0; display: inline-flex; }
+.agent-dropdown-item__name { flex: 1; font-size: 14px; font-weight: 500; color: var(--mc-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.agent-dropdown-item__check { flex-shrink: 0; color: var(--mc-primary); }
+.agent-dropdown-empty { padding: 16px; text-align: center; font-size: 13px; color: var(--mc-text-tertiary); }
+
+.agent-dropdown-enter-active { transition: all 0.15s ease-out; }
+.agent-dropdown-leave-active { transition: all 0.1s ease-in; }
+.agent-dropdown-enter-from { opacity: 0; transform: translateY(-6px) scale(0.97); }
+.agent-dropdown-leave-to { opacity: 0; transform: translateY(-4px) scale(0.98); }
+
+.fade-enter-active, .fade-leave-active { transition: opacity 0.15s; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
 </style>
diff --git a/mateclaw-ui/src/components/channels/ChannelOnboardingWizard.vue b/mateclaw-ui/src/components/channels/ChannelOnboardingWizard.vue
index 6ab1e8e8..bd5702eb 100644
--- a/mateclaw-ui/src/components/channels/ChannelOnboardingWizard.vue
+++ b/mateclaw-ui/src/components/channels/ChannelOnboardingWizard.vue
@@ -219,15 +219,59 @@
             </div>
           </div>
 
-          <!-- Bind agent -->
+          <!-- Bind agent (custom dropdown so SkillIcon renders pi:* glyphs;
+               native <select><option> cannot host components) -->
           <div class="form-group">
             <label class="form-label">{{ t('channels.wizard.bindAgentLabel') }}</label>
-            <select v-model="form.agentId" class="form-input">
-              <option :value="null">{{ t('channels.placeholders.selectAgent') }}</option>
-              <option v-for="a in agents" :key="a.id" :value="a.id">
-                {{ a.icon || '🤖' }} {{ a.name }}
-              </option>
-            </select>
+            <div class="agent-select" :class="{ open: agentDropdownOpen }">
+              <button
+                type="button"
+                class="agent-select-trigger"
+                @click="agentDropdownOpen = !agentDropdownOpen"
+              >
+                <span class="agent-select-trigger__icon" :style="{ color: agentIconColor(selectedAgent?.icon) }">
+                  <SkillIcon :value="selectedAgent?.icon" :size="20" :fallback="'🤖'" />
+                </span>
+                <span class="agent-select-trigger__name">{{
+                  selectedAgent?.name || t('channels.placeholders.selectAgent')
+                }}</span>
+                <svg
+                  class="agent-select-trigger__arrow"
+                  :class="{ open: agentDropdownOpen }"
+                  width="12" height="12" viewBox="0 0 24 24" fill="none"
+                  stroke="currentColor" stroke-width="2"
+                ><polyline points="6 9 12 15 18 9"/></svg>
+              </button>
+              <Transition name="fade">
+                <div
+                  v-if="agentDropdownOpen"
+                  class="agent-dropdown-backdrop"
+                  @click="agentDropdownOpen = false"
+                ></div>
+              </Transition>
+              <Transition name="agent-dropdown">
+                <div v-if="agentDropdownOpen" class="agent-dropdown">
+                  <div
+                    v-for="a in agents"
+                    :key="a.id"
+                    class="agent-dropdown-item"
+                    :class="{ active: String(a.id) === String(form.agentId) }"
+                    @click="onSelectAgent(a)"
+                  >
+                    <span class="agent-dropdown-item__icon" :style="{ color: agentIconColor(a.icon) }">
+                      <SkillIcon :value="a.icon" :size="18" :fallback="'🤖'" />
+                    </span>
+                    <span class="agent-dropdown-item__name">{{ a.name }}</span>
+                    <span v-if="String(a.id) === String(form.agentId)" class="agent-dropdown-item__check">
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
+                    </span>
+                  </div>
+                  <div v-if="agents.length === 0" class="agent-dropdown-empty">
+                    {{ t('chat.loadingAgents') }}
+                  </div>
+                </div>
+              </Transition>
+            </div>
           </div>
 
           <p class="ready-hint">{{ t('channels.wizard.sendTestHint', { service: serviceName }) }}</p>
@@ -280,6 +324,8 @@ import { useWecomBotAuth } from '@/composables/channels/useWecomBotAuth'
 import { useWeixinQrcodePoll } from '@/composables/channels/useWeixinQrcodePoll'
 import { useDingTalkAppRegister } from '@/composables/channels/useDingTalkAppRegister'
 import { useFeishuAppRegister } from '@/composables/channels/useFeishuAppRegister'
+import SkillIcon from '@/components/common/SkillIcon.vue'
+import { agentIconColor } from '@/utils/agentIconColor'
 
 interface Props {
   modelValue: boolean
@@ -331,6 +377,19 @@ const channelConfig = ref<Record<string, any>>({})
 const visibleFields = ref<Record<string, boolean>>({})
 const showAdvanced = ref(false)
 
+// Custom agent dropdown — native <select><option> can't render SkillIcon
+// component for pi:* glyphs; mirror ChatConsole.vue's pattern.
+const agentDropdownOpen = ref(false)
+const selectedAgent = computed<Agent | null>(() => {
+  const id = form.value.agentId
+  if (id == null) return null
+  return props.agents.find(a => String(a.id) === String(id)) ?? null
+})
+function onSelectAgent(a: Agent) {
+  form.value.agentId = a.id as any
+  agentDropdownOpen.value = false
+}
+
 const verifying = ref(false)
 const verifyResult = ref<VerifyResult | null>(null)
 const invalidField = ref<string | null>(null)
@@ -819,4 +878,76 @@ function formatIdentityKey(key: string): string {
 .btn-primary:disabled { background: var(--mc-border); cursor: not-allowed; box-shadow: none; }
 .btn-secondary { padding: 10px 18px; background: var(--mc-bg-elevated); color: var(--mc-text-primary); border: 1px solid var(--mc-border); border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
 .btn-secondary:hover { background: var(--mc-bg-sunken); }
+
+/* ===== Agent custom dropdown (mirrors ChatConsole.vue pattern) =====
+   Native <select><option> can't render the <SkillIcon> component
+   needed for pi:* glyphs, so step-3 uses a custom dropdown.
+   z-index has to clear the wizard modal-overlay (z-index: 1000). */
+.agent-select { position: relative; }
+.agent-select-trigger {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border: 1px solid var(--mc-border);
+  border-radius: 10px;
+  font-size: 14px;
+  color: var(--mc-text-primary);
+  background: var(--mc-bg-elevated);
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.15s;
+  box-sizing: border-box;
+}
+.agent-select-trigger:hover { border-color: var(--mc-primary); }
+.agent-select.open .agent-select-trigger { border-color: var(--mc-primary); box-shadow: 0 0 0 3px rgba(217,119,87,0.12); }
+.agent-select-trigger__icon { font-size: 18px; line-height: 1; flex-shrink: 0; display: inline-flex; }
+.agent-select-trigger__name { flex: 1; text-align: left; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.agent-select-trigger__arrow { flex-shrink: 0; color: var(--mc-text-tertiary); transition: transform 0.2s; }
+.agent-select-trigger__arrow.open { transform: rotate(180deg); }
+
+.agent-dropdown-backdrop {
+  position: fixed;
+  inset: 0;
+  /* must clear modal-overlay (1000) so clicks fall through to backdrop, not modal */
+  z-index: 1099;
+}
+.agent-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 1100;
+  background: var(--mc-bg-elevated);
+  border: 1px solid var(--mc-border);
+  border-radius: 12px;
+  padding: 6px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
+  max-height: 280px;
+  overflow-y: auto;
+}
+.agent-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.12s;
+}
+.agent-dropdown-item:hover { background: var(--mc-bg-sunken); }
+.agent-dropdown-item.active { background: var(--mc-primary-bg); }
+.agent-dropdown-item__icon { font-size: 20px; line-height: 1; flex-shrink: 0; display: inline-flex; }
+.agent-dropdown-item__name { flex: 1; font-size: 14px; font-weight: 500; color: var(--mc-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.agent-dropdown-item__check { flex-shrink: 0; color: var(--mc-primary); }
+.agent-dropdown-empty { padding: 16px; text-align: center; font-size: 13px; color: var(--mc-text-tertiary); }
+
+.agent-dropdown-enter-active { transition: all 0.15s ease-out; }
+.agent-dropdown-leave-active { transition: all 0.1s ease-in; }
+.agent-dropdown-enter-from { opacity: 0; transform: translateY(-6px) scale(0.97); }
+.agent-dropdown-leave-to { opacity: 0; transform: translateY(-4px) scale(0.98); }
+
+.fade-enter-active, .fade-leave-active { transition: opacity 0.15s; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
 </style>
diff --git a/mateclaw-ui/src/i18n/locales/zh-CN.ts b/mateclaw-ui/src/i18n/locales/zh-CN.ts
index 86a55099..f6770d90 100644
--- a/mateclaw-ui/src/i18n/locales/zh-CN.ts
+++ b/mateclaw-ui/src/i18n/locales/zh-CN.ts
@@ -2337,7 +2337,7 @@ export default {
   },
   channels: {
     title: '渠道管理',
-    desc: '将 Agent 连接到各消息平台和 API',
+    desc: '将数字员工连接到各消息平台和 API',
     newChannel: '新建渠道',
     addChannel: '添加渠道',
     status: {
@@ -2349,7 +2349,7 @@ export default {
     disable: '停用',
     empty: {
       title: '连接第一个渠道',
-      desc: '把你的 Agent 接入团队已经在用的 IM 工具——Slack、企业微信、Telegram 等。',
+      desc: '把你的数字员工接入团队已经在用的 IM 工具——Slack、企业微信、Telegram 等。',
       cta: '连接一个渠道',
     },
     stats: {
@@ -2409,12 +2409,12 @@ export default {
       name: '名称',
       type: '类型',
       description: '描述',
-      bindAgent: '绑定 Agent',
+      bindAgent: '绑定员工',
     },
     placeholders: {
       name: '渠道名称',
       description: '渠道用途说明',
-      selectAgent: '选择 Agent...',
+      selectAgent: '选择员工...',
     },
     types: {
       web: 'Web API',
@@ -2631,8 +2631,8 @@ export default {
       fixIt: '修复',
       retry: '重试',
       readyHeadline: '一切就绪',
-      readySubtitle: '绑定一个 Agent，发条测试消息确认。',
-      bindAgentLabel: '绑定 Agent',
+      readySubtitle: '绑定一个员工，发条测试消息确认。',
+      bindAgentLabel: '绑定员工',
       sendTest: '发送测试消息',
       sendTestHint: '打开 {service} 给机器人发条消息——回复应该几秒内到达。',
       saveFailed: '渠道保存失败',