From 3db4230142daf157b50e9644148186f995ef83be Mon Sep 17 00:00:00 2001 From: matevip Date: Thu, 30 Apr 2026 06:59:47 +0800 Subject: [PATCH] =?UTF-8?q?feat(channels):=20redesign=20list=20page=20?= =?UTF-8?q?=E2=80=94=20show=20only=20configured=20channels,=20add=20hero?= =?UTF-8?q?=20empty=20state?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../channel/controller/ChannelController.java | 16 ++ .../vip/mate/channel/model/ChannelEntity.java | 10 + .../h2/V63__channel_identity_json.sql | 6 + .../mysql/V63__channel_identity_json.sql | 13 + .../channels/ChannelOnboardingWizard.vue | 16 +- .../components/channels/ChannelTypePicker.vue | 76 ++++-- mateclaw-ui/src/i18n/locales/en-US.ts | 36 +++ mateclaw-ui/src/i18n/locales/zh-CN.ts | 36 +++ mateclaw-ui/src/types/index.ts | 3 + mateclaw-ui/src/views/Channels.vue | 238 +++++++++++++----- 10 files changed, 359 insertions(+), 91 deletions(-) create mode 100644 mateclaw-server/src/main/resources/db/migration/h2/V63__channel_identity_json.sql create mode 100644 mateclaw-server/src/main/resources/db/migration/mysql/V63__channel_identity_json.sql diff --git a/mateclaw-server/src/main/java/vip/mate/channel/controller/ChannelController.java b/mateclaw-server/src/main/java/vip/mate/channel/controller/ChannelController.java index 8653ac68..22e13bd7 100644 --- a/mateclaw-server/src/main/java/vip/mate/channel/controller/ChannelController.java +++ b/mateclaw-server/src/main/java/vip/mate/channel/controller/ChannelController.java @@ -184,11 +184,27 @@ public class ChannelController { }); body.put("name", c.getName()); body.put("enabled", Boolean.TRUE.equals(c.getEnabled())); + body.put("identity", parseIdentity(c.getIdentityJson())); return body; }) .toList()); } + /** + * Parse identity_json into a map for the list-page card. Returns an + * empty map for legacy rows that have not been re-verified yet, so the + * frontend can render the type-level description as a fallback. + */ + private Map parseIdentity(String identityJson) { + if (identityJson == null || identityJson.isBlank()) return Collections.emptyMap(); + try { + return objectMapper.readValue(identityJson, new TypeReference<>() {}); + } catch (Exception e) { + log.debug("identity_json parse failed (treating as empty): {}", e.getMessage()); + return Collections.emptyMap(); + } + } + @RequireWorkspaceRole("admin") @Operation(summary = "Pre-flight: validate draft channel config without persisting") @PostMapping("/preflight") diff --git a/mateclaw-server/src/main/java/vip/mate/channel/model/ChannelEntity.java b/mateclaw-server/src/main/java/vip/mate/channel/model/ChannelEntity.java index 57630a0f..e588c8be 100644 --- a/mateclaw-server/src/main/java/vip/mate/channel/model/ChannelEntity.java +++ b/mateclaw-server/src/main/java/vip/mate/channel/model/ChannelEntity.java @@ -34,6 +34,16 @@ public class ChannelEntity { @TableField(value = "config_json", updateStrategy = FieldStrategy.ALWAYS) private String configJson; + /** + * Identity snapshot from the most recent successful credential probe + * (RFC-084 follow-up). JSON-encoded {@code accountName / accountId / team / + * region / ...} payload. Surfaced on the list page so cards read + * "Connected as @MyBot" instead of the type-level description. Optional — + * legacy rows have it null until the next successful connect. + */ + @TableField(value = "identity_json", updateStrategy = FieldStrategy.ALWAYS) + private String identityJson; + /** 是否启用 */ private Boolean enabled; diff --git a/mateclaw-server/src/main/resources/db/migration/h2/V63__channel_identity_json.sql b/mateclaw-server/src/main/resources/db/migration/h2/V63__channel_identity_json.sql new file mode 100644 index 00000000..fc64cc4c --- /dev/null +++ b/mateclaw-server/src/main/resources/db/migration/h2/V63__channel_identity_json.sql @@ -0,0 +1,6 @@ +-- RFC-084 follow-up: persist the identity returned by ChannelVerifier so +-- the channel list can show "Connected as @MyBot" instead of generic +-- type-level descriptions. Populated on wizard create from VerificationResult; +-- refreshed by adapters on first successful connect. + +ALTER TABLE mate_channel ADD COLUMN IF NOT EXISTS identity_json TEXT; diff --git a/mateclaw-server/src/main/resources/db/migration/mysql/V63__channel_identity_json.sql b/mateclaw-server/src/main/resources/db/migration/mysql/V63__channel_identity_json.sql new file mode 100644 index 00000000..ab6f9351 --- /dev/null +++ b/mateclaw-server/src/main/resources/db/migration/mysql/V63__channel_identity_json.sql @@ -0,0 +1,13 @@ +-- RFC-084 follow-up: persist the identity returned by ChannelVerifier so +-- the channel list can show "Connected as @MyBot" instead of generic +-- type-level descriptions. Populated on wizard create from VerificationResult; +-- refreshed by adapters on first successful connect. + +SET @col_exists := (SELECT COUNT(*) FROM INFORMATION_SCHEMA.COLUMNS + WHERE TABLE_SCHEMA = DATABASE() + AND TABLE_NAME = 'mate_channel' + AND COLUMN_NAME = 'identity_json'); +SET @stmt := IF(@col_exists = 0, + 'ALTER TABLE mate_channel ADD COLUMN identity_json TEXT', + 'SELECT 1'); +PREPARE s FROM @stmt; EXECUTE s; DEALLOCATE PREPARE s; diff --git a/mateclaw-ui/src/components/channels/ChannelOnboardingWizard.vue b/mateclaw-ui/src/components/channels/ChannelOnboardingWizard.vue index 534925a3..b7697e35 100644 --- a/mateclaw-ui/src/components/channels/ChannelOnboardingWizard.vue +++ b/mateclaw-ui/src/components/channels/ChannelOnboardingWizard.vue @@ -631,7 +631,21 @@ async function onDone() { accessControl: defaultAccessControl(), renderConfig: defaultRenderConfig(), }) - const payload: Partial = { ...form.value, configJson, enabled: true } + // Persist identity from the verifyResult so the list page can show + // "Connected as @MyBot" without waiting for the next adapter probe. + // Skipped channels (web/webchat/webhook) carry an empty identity, so + // the field stays null in the DB and the legacy description path is + // still available as a fallback. + const identityMap = verifyResult.value?.identity || {} + const identityJson = Object.keys(identityMap).length > 0 + ? JSON.stringify(identityMap) + : undefined + const payload: Partial = { + ...form.value, + configJson, + identityJson, + enabled: true, + } const res: any = await channelApi.create(payload) ElMessage.success(t('channels.messages.saveSuccess')) emit('created', res.data as Channel) diff --git a/mateclaw-ui/src/components/channels/ChannelTypePicker.vue b/mateclaw-ui/src/components/channels/ChannelTypePicker.vue index 4c75227b..a02e0ca6 100644 --- a/mateclaw-ui/src/components/channels/ChannelTypePicker.vue +++ b/mateclaw-ui/src/components/channels/ChannelTypePicker.vue @@ -2,23 +2,38 @@
-

{{ t('channels.newChannel') }}

+
+

{{ t('channels.newChannel') }}

+

{{ t('channels.catalog.subtitle') }}

+
-
- + + +
+
+

{{ t(`channels.catalog.groups.${group.key}`) }}

+
+ +
+
@@ -36,13 +51,13 @@ const emit = defineEmits<{ const { t } = useI18n() -// Order matches the dropdown in ChannelEditModal so users see the same -// ordering. Web/WebChat/Webhook last because they're "platform" rather -// than "messaging service". -const types = [ - 'telegram', 'discord', 'slack', - 'dingtalk', 'feishu', 'wecom', 'weixin', 'qq', - 'web', 'webchat', 'webhook', +// Three categories so the catalog reads as a curated shelf, not a flat +// dump. Order within each group is from "most common" to "edge" so first +// glance lands on the right thing. +const groups = [ + { key: 'im', types: ['telegram', 'discord', 'slack', 'qq'] }, + { key: 'enterprise', types: ['wecom', 'weixin', 'feishu', 'dingtalk'] }, + { key: 'web', types: ['web', 'webchat', 'webhook'] }, ] function pick(type: string) { @@ -56,14 +71,23 @@ function close() { diff --git a/mateclaw-ui/src/i18n/locales/en-US.ts b/mateclaw-ui/src/i18n/locales/en-US.ts index 146e65d4..9b2f47e3 100644 --- a/mateclaw-ui/src/i18n/locales/en-US.ts +++ b/mateclaw-ui/src/i18n/locales/en-US.ts @@ -1537,6 +1537,42 @@ export default { configure: 'Configure', enable: 'Enable', disable: 'Disable', + empty: { + title: 'Connect your first channel', + desc: 'Bring your agents into the apps your team already uses — Slack, WeChat Work, Telegram, and more.', + cta: 'Connect a Channel', + }, + stats: { + active: '{n} active', + reconnecting: '{n} reconnecting', + errors: '{n} {n, plural, one {error} other {errors}}', + disabled: '{n} disabled', + }, + cardDesc: { + connectedAs: 'Connected as {account}', + connectedAsIn: 'Connected as {account} in {team}', + }, + catalog: { + subtitle: 'Pick a service to connect. You can change settings later.', + groups: { + im: 'Messaging', + enterprise: 'Enterprise platforms', + web: 'Web & API', + }, + descriptions: { + telegram: 'Bot via long-poll. No public IP needed.', + discord: 'Bot via Gateway WebSocket. No public IP needed.', + slack: 'Slack app via Socket Mode.', + qq: 'QQ Bot via WebSocket. No public IP needed.', + wecom: 'WeCom smart bot. Scan QR to connect.', + weixin: 'WeChat personal account via iLink.', + feishu: 'Feishu / Lark app. One-click QR creation.', + dingtalk: 'DingTalk bot. One-click QR creation.', + web: 'Default browser channel. Always on.', + webchat: 'Embeddable chat widget for your site.', + webhook: 'Generic HTTP inbound endpoint.', + }, + }, modal: { editTitle: 'Edit Channel', newTitle: 'New Channel', diff --git a/mateclaw-ui/src/i18n/locales/zh-CN.ts b/mateclaw-ui/src/i18n/locales/zh-CN.ts index 180a15df..2aa4b04e 100644 --- a/mateclaw-ui/src/i18n/locales/zh-CN.ts +++ b/mateclaw-ui/src/i18n/locales/zh-CN.ts @@ -1547,6 +1547,42 @@ export default { configure: '配置', enable: '启用', disable: '停用', + empty: { + title: '连接第一个渠道', + desc: '把你的 Agent 接入团队已经在用的 IM 工具——Slack、企业微信、Telegram 等。', + cta: '连接一个渠道', + }, + stats: { + active: '{n} 个运行中', + reconnecting: '{n} 个重连中', + errors: '{n} 个出错', + disabled: '{n} 个已停用', + }, + cardDesc: { + connectedAs: '已连接：{account}', + connectedAsIn: '已连接：{account}（{team}）', + }, + catalog: { + subtitle: '选一个服务接入，配置项稍后还能改。', + groups: { + im: 'IM 平台', + enterprise: '企业平台', + web: '网页与 API', + }, + descriptions: { + telegram: '长轮询接入，无需公网 IP', + discord: 'Gateway WebSocket，无需公网 IP', + slack: 'Socket Mode 接入', + qq: 'WebSocket 长连接，无需公网 IP', + wecom: '企业微信智能机器人，扫码即用', + weixin: '微信个人号（iLink Bot）', + feishu: '飞书 / Lark 应用，扫码一键创建', + dingtalk: '钉钉机器人，扫码一键创建', + web: '默认浏览器渠道，始终可用', + webchat: '可嵌入网页的聊天小组件', + webhook: '通用 HTTP 接入端点', + }, + }, modal: { editTitle: '编辑渠道', newTitle: '新建渠道', diff --git a/mateclaw-ui/src/types/index.ts b/mateclaw-ui/src/types/index.ts index 5fb34575..f898358e 100644 --- a/mateclaw-ui/src/types/index.ts +++ b/mateclaw-ui/src/types/index.ts @@ -336,6 +336,9 @@ export interface Channel { agentId?: string | number botPrefix?: string configJson?: string + /** Identity snapshot from the most recent successful credential verify + * (RFC-084). JSON-encoded {accountName, accountId, team, region, ...}. */ + identityJson?: string enabled: boolean description?: string // 前端扩展字段 diff --git a/mateclaw-ui/src/views/Channels.vue b/mateclaw-ui/src/views/Channels.vue index f684d90f..39477fae 100644 --- a/mateclaw-ui/src/views/Channels.vue +++ b/mateclaw-ui/src/views/Channels.vue @@ -8,7 +8,7 @@

{{ t('channels.title') }}

{{ t('channels.desc') }}

- - +
-
+
- -
-
-
-
- -
-
-

{{ channel.name }}

- {{ channel.channelType }} -
-
-
- {{ channel.enabled ? t('channels.status.active') : t('channels.status.inactive') }} -
-
- {{ getConnectionIcon(channel) }} {{ getConnectionLabel(channel) }} -
-
-
-

{{ channel.description }}

-
- - - -
+ +
+
+ + + +
+

{{ t('channels.empty.title') }}

+

{{ t('channels.empty.desc') }}

+ +
+ + +
@@ -120,7 +168,7 @@