@zhin.js/console 1.0.50 → 1.0.52

package/client/src/style.css

@@ -35,6 +35,15 @@
     --sidebar-accent-foreground: 240 5.9% 10%;
     --sidebar-border: 220 13% 91%;
     --sidebar-ring: 240 5.9% 10%;
+    /* Bot 详情 IM 区（参考 Telegram Web A 间距与层次） */
+    --im-list-bg: 228 24% 97%;
+    --im-chat-bg: 228 30% 98%;
+    --im-bubble-in: 0 0% 100%;
+    --im-bubble-out: 213 82% 51%;
+    --im-bubble-out-fg: 0 0% 100%;
+    --im-date-bg: 0 0% 100%;
+    --im-date-fg: 222 12% 40%;
+    --im-at: 213 90% 42%;
   }
 
   .dark {
@@ -65,6 +74,14 @@
     --sidebar-accent-foreground: 240 4.8% 95.9%;
     --sidebar-border: 240 3.7% 15.9%;
     --sidebar-ring: 240 4.9% 83.9%;
+    --im-list-bg: 222 14% 11%;
+    --im-chat-bg: 222 16% 8%;
+    --im-bubble-in: 215 14% 17%;
+    --im-bubble-out: 213 65% 48%;
+    --im-bubble-out-fg: 0 0% 100%;
+    --im-date-bg: 215 14% 16%;
+    --im-date-fg: 215 12% 72%;
+    --im-at: 204 100% 68%;
   }
 }
 
@@ -220,6 +237,117 @@
   overflow: hidden;
 }
 
+/* 机器人详情：三栏 IM 布局 */
+.im-layout {
+  padding: 0;
+  gap: 0;
+  height: calc(100vh - 42px - 2rem);
+  border-radius: var(--radius);
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--background));
+}
+
+.im-layout .channel-sidebar {
+  border: none;
+  border-radius: 0;
+  background: hsl(var(--im-list-bg));
+  border-right: 1px solid hsl(var(--border) / 0.65);
+}
+
+.im-main-split {
+  flex: 1;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+.im-center {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  background: hsl(var(--im-chat-bg));
+}
+
+.im-right-panel {
+  width: min(300px, 32vw);
+  flex-shrink: 0;
+  display: none;
+  flex-direction: column;
+  border-left: 1px solid hsl(var(--border) / 0.65);
+  background: hsl(var(--card));
+}
+
+@media (min-width: 900px) {
+  .im-right-panel.im-right-visible {
+    display: flex;
+  }
+}
+
+.im-date-pill {
+  align-self: center;
+  margin: 0.5rem 0;
+  padding: 0.2rem 0.65rem;
+  border-radius: 9999px;
+  font-size: 0.72rem;
+  font-weight: 500;
+  color: hsl(var(--im-date-fg));
+  background: hsl(var(--im-date-bg));
+  box-shadow: 0 0 0 1px hsl(var(--border) / 0.45);
+}
+
+.im-bubble-in {
+  max-width: min(78%, 28rem);
+  border-radius: 0.65rem 0.65rem 0.65rem 0.2rem;
+  padding: 0.45rem 0.65rem 0.5rem;
+  background: hsl(var(--im-bubble-in));
+  box-shadow: 0 1px 0 hsl(var(--border) / 0.35);
+}
+
+.im-bubble-out {
+  max-width: min(78%, 28rem);
+  border-radius: 0.65rem 0.65rem 0.2rem 0.65rem;
+  padding: 0.45rem 0.65rem 0.5rem;
+  background: hsl(var(--im-bubble-out));
+  color: hsl(var(--im-bubble-out-fg));
+  box-shadow: 0 1px 0 hsl(0 0% 0% / 0.12);
+}
+
+.im-bubble-out .im-meta,
+.im-bubble-out .text-muted-foreground {
+  color: hsl(var(--im-bubble-out-fg) / 0.85);
+}
+
+.im-bubble-out .im-at {
+  color: hsl(var(--im-bubble-out-fg) / 0.95);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.im-composer {
+  border-top: 1px solid hsl(var(--border) / 0.7);
+  background: hsl(var(--card));
+}
+
+.im-chat-header {
+  flex-shrink: 0;
+  border-bottom: 1px solid hsl(var(--border) / 0.65);
+  background: hsl(var(--card));
+}
+
+.im-at {
+  color: hsl(var(--im-at));
+}
+
+.menu-item.im-row-compact {
+  padding: 0.4rem 0.55rem;
+  border-radius: 0.45rem;
+  gap: 0.55rem;
+}
+
 .rich-text-editor {
   font-family: inherit;
   transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -251,6 +379,22 @@
   display: block;
 }
 
+.rich-text-editor .editor-video,
+.rich-text-editor .editor-audio {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  margin: 2px 0;
+  border-radius: 6px;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--muted) / 0.45);
+  font-size: 0.8rem;
+  vertical-align: middle;
+  user-select: none;
+  cursor: default;
+}
+
 .rich-text-editor .editor-at {
   display: inline-flex;
   align-items: center;

package/client/src/utils/parseComposerContent.ts

@@ -0,0 +1,57 @@
+/** 与机器人消息段结构一致，供解析/规范化使用 */
+export type MessageContent = Array<{ type: string; data?: Record<string, unknown> }>
+
+/**
+ * 解析输入框文本为消息段（与沙盒约定一致）。
+ * 支持 [@名称]、[face:id]、[image:url]、[video:url]、[audio:url]
+ */
+export function parseComposerToSegments(text: string): MessageContent {
+  const segments: MessageContent = []
+  const regex =
+    /\[@([^\]]+)\]|\[face:(\d+)\]|\[image:([^\]]+)\]|\[video:([^\]]+)\]|\[audio:([^\]]+)\]/g
+  let lastIndex = 0
+  let match: RegExpExecArray | null
+  while ((match = regex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      const t = text.substring(lastIndex, match.index)
+      if (t) segments.push({ type: 'text', data: { text: t } })
+    }
+    if (match[1]) segments.push({ type: 'at', data: { qq: match[1], name: match[1] } })
+    else if (match[2]) segments.push({ type: 'face', data: { id: parseInt(match[2], 10) } })
+    else if (match[3]) segments.push({ type: 'image', data: { url: match[3] } })
+    else if (match[4]) segments.push({ type: 'video', data: { url: match[4] } })
+    else if (match[5]) segments.push({ type: 'audio', data: { url: match[5] } })
+    lastIndex = regex.lastIndex
+  }
+  if (lastIndex < text.length) {
+    const r = text.substring(lastIndex)
+    if (r) segments.push({ type: 'text', data: { text: r } })
+  }
+  return segments.length > 0 ? segments : [{ type: 'text', data: { text } }]
+}
+
+export function hasRenderableComposerSegments(segments: MessageContent): boolean {
+  if (!segments.length) return false
+  return segments.some((s) => {
+    if (s.type === 'text') return Boolean(String(s.data?.text ?? '').trim())
+    return true
+  })
+}
+
+/** 统一 WS 推送 / 收件箱里的 content（数组、JSON 字符串、纯文本） */
+export function normalizeInboundContent(raw: unknown): MessageContent {
+  if (Array.isArray(raw)) {
+    return raw as MessageContent
+  }
+  if (typeof raw === 'string') {
+    if (!raw.trim()) return []
+    try {
+      const p = JSON.parse(raw) as unknown
+      if (Array.isArray(p)) return p as MessageContent
+    } catch {
+      /* 非 JSON */
+    }
+    return [{ type: 'text', data: { text: raw } }]
+  }
+  return []
+}

package/client/tailwind.config.js

@@ -18,6 +18,7 @@ export default {
     `${cwd}/node_modules/@zhin.js/*/client/**/*.{js,ts,jsx,tsx}`,
     `${cwd}/node_modules/@zhin.js/*/dist/**/*.{js,ts,jsx,tsx}`,
     `${cwd}/plugins/*/client/**/*.{js,ts,jsx,tsx}`,
+    `${cwd}/plugins/**/client/**/*.{js,ts,jsx,tsx}`,
     `${cwd}/client/**/*.{js,ts,jsx,tsx}`,
   ].filter(Boolean),
   theme: {

package/client/tsconfig.json

@@ -12,5 +12,7 @@
         "paths": {
             "@/*": ["src/*"]
         }
-    }
+    },
+    "include": ["src/**/*", "src/**/*.tsx"],
+    "exclude": ["node_modules", "dist"]
 }