@zhin.js/console 1.0.51 → 1.0.53

package/client/src/main.tsx

@@ -1,20 +1,20 @@
 import { StrictMode, useCallback, useEffect, useState } from 'react'
 import { createRoot } from 'react-dom/client'
 import { Provider as ReduxProvider } from 'react-redux'
-import { Home, Package, Bot, FileText, Settings, KeyRound, FolderOpen, Database, LogIn } from 'lucide-react'
+import { Home, Package, Bot, FileText, Settings, KeyRound, FolderOpen, Database } from 'lucide-react'
 import { store, DynamicRouter, persistor, addPage, useSelector, useWebSocket } from '@zhin.js/client'
 import DashboardLayout from './layouts/dashboard'
 import HomePage from './pages/dashboard'
 import PluginsPage from './pages/plugins'
 import PluginDetailPage from './pages/plugin-detail'
-import BotMangePage from './pages/bots'
+import BotManagePage from './pages/bots'
+import BotDetailPage from './pages/bot-detail'
 import LogsPage from './pages/logs'
 import ConfigPage from './pages/config'
-import EnvMangePage from './pages/env'
-import FileMangePage from './pages/files'
+import EnvManagePage from './pages/env'
+import FileManagePage from './pages/files'
 import DatabasePage from './pages/database'
 import LoginPage from './pages/login'
-import LoginAssistPage from './pages/login-assist'
 import { hasToken } from './utils/auth'
 import './style.css'
 import { PersistGate } from 'redux-persist/integration/react'
@@ -60,7 +60,7 @@ function RouteInitializer() {
     useEffect(() => {
         const routes = [
             {
-                key: 'dashboard-layout',
+                key: 'dashboardLayout',
                 path: '/',
                 title: 'Dashboard',
                 element: <DashboardLayout />,
@@ -72,14 +72,23 @@ function RouteInitializer() {
                         title: '系统概览',
                         icon: <Home className="w-4 h-4" />,
                         element: <HomePage />,
+                        meta: { group: '系统', order: 0 },
                     },
                     {
-                        key: 'loginAssistPage',
-                        path: '/login-assist',
-                        title: '登录辅助',
-                        icon: <LogIn className="w-4 h-4" />,
-                        element: <LoginAssistPage />,
-                        meta: { order: 1 }
+                        key: 'botManagePage',
+                        path: '/bots',
+                        title: '机器人',
+                        icon: <Bot className="w-4 h-4" />,
+                        element: <BotManagePage />,
+                        meta: { group: '系统', order: 1 },
+                    },
+                    {
+                        key: 'logsPage',
+                        path: '/logs',
+                        title: '系统日志',
+                        icon: <FileText className="w-4 h-4" />,
+                        element: <LogsPage />,
+                        meta: { group: '系统', order: 2, fullWidth: true },
                     },
                     {
                         key: 'pluginsPage',
@@ -87,14 +96,14 @@ function RouteInitializer() {
                         title: '插件管理',
                         icon: <Package className="w-4 h-4" />,
                         element: <PluginsPage />,
-                        meta: { order: 2 }
+                        meta: { group: '扩展', order: 3 },
                     },
                     {
                         key: 'pluginDetailPage',
                         title: '插件详情',
                         path: '/plugins/:name',
                         element: <PluginDetailPage />,
-                        meta: { hideInMenu: true }
+                        meta: { hideInMenu: true },
                     },
                     {
                         key: 'configPage',
@@ -102,23 +111,23 @@ function RouteInitializer() {
                         title: '配置管理',
                         icon: <Settings className="w-4 h-4" />,
                         element: <ConfigPage />,
-                        meta: { order: 3 }
+                        meta: { group: '配置与数据', order: 4 },
                     },
                     {
                         key: 'envManagePage',
                         path: '/env',
                         title: '环境变量',
                         icon: <KeyRound className="w-4 h-4" />,
-                        element: <EnvMangePage />,
-                        meta: { order: 4 }
+                        element: <EnvManagePage />,
+                        meta: { group: '配置与数据', order: 5 },
                     },
                     {
                         key: 'fileManagePage',
                         path: '/files',
                         title: '文件管理',
                         icon: <FolderOpen className="w-4 h-4" />,
-                        element: <FileMangePage />,
-                        meta: { order: 5 }
+                        element: <FileManagePage />,
+                        meta: { group: '配置与数据', order: 6 },
                     },
                     {
                         key: 'databasePage',
@@ -126,24 +135,15 @@ function RouteInitializer() {
                         title: '数据库',
                         icon: <Database className="w-4 h-4" />,
                         element: <DatabasePage />,
-                        meta: { order: 6 }
+                        meta: { group: '配置与数据', order: 7, fullWidth: true },
                     },
                     {
-                        key: 'botManagePage',
-                        path: '/bots',
-                        title: '机器人',
-                        icon: <Bot className="w-4 h-4" />,
-                        element: <BotMangePage />,
-                        meta: { order: 7 }
+                        key: 'botDetailPage',
+                        path: '/bots/:adapter/:botId',
+                        title: '机器人详情',
+                        element: <BotDetailPage />,
+                        meta: { hideInMenu: true, fullWidth: true },
                     },
-                    {
-                        key: 'logsPage  ',
-                        path: '/logs',
-                        title: '系统日志',
-                        icon: <FileText className="w-4 h-4" />,
-                        element: <LogsPage />,
-                        meta: { order: 8 }
-                    }
                 ]
             }
         ]

package/client/src/pages/bot-detail/MessageBody.tsx

@@ -0,0 +1,110 @@
+import { cn, pickMediaRawUrl, resolveMediaSrc } from '@zhin.js/client'
+import type { ReceivedMessage } from './types'
+
+export function MessageBody({ content }: { content: ReceivedMessage['content'] }) {
+  return (
+    <>
+      {content.map((seg, i) => {
+        const d = (seg.data ?? {}) as Record<string, unknown>
+
+        if (seg.type === 'text' && d.text != null)
+          return <span key={i}>{String(d.text)}</span>
+
+        if (seg.type === 'at')
+          return (
+            <span key={i} className="im-at font-medium">
+              @{String(d.name ?? d.qq ?? '')}
+            </span>
+          )
+
+        if (seg.type === 'face')
+          return (
+            <img
+              key={i}
+              src={`https://face.viki.moe/apng/${d.id}.png`}
+              alt=""
+              className="w-6 h-6 inline-block align-middle mx-0.5"
+            />
+          )
+
+        if (seg.type === 'image') {
+          const raw = pickMediaRawUrl(d)
+          const src = resolveMediaSrc(raw, 'image')
+          if (!src)
+            return (
+              <span key={i} className="text-muted-foreground text-xs">
+                [图片]
+              </span>
+            )
+          return (
+            <div key={i} className="my-1.5 block w-full max-w-full">
+              <a href={src} target="_blank" rel="noreferrer" className="inline-block max-w-full">
+                <img
+                  src={src}
+                  alt=""
+                  className={cn(
+                    'max-w-[min(280px,88vw)] max-h-64 rounded-lg border border-border/50 object-contain bg-muted/20',
+                  )}
+                  onError={(e) => {
+                    ;(e.target as HTMLImageElement).style.display = 'none'
+                  }}
+                />
+              </a>
+            </div>
+          )
+        }
+
+        if (seg.type === 'video') {
+          const raw = pickMediaRawUrl(d)
+          const src = resolveMediaSrc(raw, 'video')
+          if (!src)
+            return (
+              <span key={i} className="text-muted-foreground text-xs">
+                [视频]
+              </span>
+            )
+          return (
+            <div key={i} className="my-1.5 w-full max-w-full">
+              <video
+                src={src}
+                controls
+                playsInline
+                preload="metadata"
+                className="max-w-[min(320px,92vw)] max-h-72 rounded-lg border border-border/50 bg-black/10"
+              />
+            </div>
+          )
+        }
+
+        if (seg.type === 'audio' || seg.type === 'record') {
+          const raw = pickMediaRawUrl(d)
+          const src = resolveMediaSrc(raw, 'audio')
+          if (!src)
+            return (
+              <span key={i} className="text-muted-foreground text-xs">
+                [语音]
+              </span>
+            )
+          return (
+            <div key={i} className="my-1.5 w-full max-w-[min(320px,100%)]">
+              <audio src={src} controls preload="metadata" className="w-full h-9" />
+            </div>
+          )
+        }
+
+        if (seg.type === 'file')
+          return (
+            <span key={i} className="text-muted-foreground text-xs">
+              📎 {String(d.name ?? '文件')}
+            </span>
+          )
+
+        return (
+          <span key={i} className="text-muted-foreground text-xs">
+            [{seg.type}]
+          </span>
+        )
+      })}
+    </>
+  )
+}

package/client/src/pages/bot-detail/date-utils.ts

@@ -0,0 +1,8 @@
+export function dayKey(ts: number) {
+  const d = new Date(ts)
+  return `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`
+}
+
+export function dayLabel(ts: number) {
+  return new Date(ts).toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' })
+}