feat：优化配置项分类，maisaka聊天流监控展示

2026-05-04 17:28:14 +08:00
parent 120acb835f
commit ccb1d60e06
12 changed files with 561 additions and 46 deletions
--- a/dashboard/src/components/dynamic-form/DynamicConfigForm.tsx
+++ b/dashboard/src/components/dynamic-form/DynamicConfigForm.tsx
@@ -34,6 +34,16 @@ function hasTopLevelAdvancedFields(schema: ConfigSchema) {
  return schema.fields.some((field) => field.advanced && !schema.nested?.[field.name])
 }

+function resolveSectionTitle(schema: ConfigSchema) {
+  return schema.uiLabel || schema.classDoc || schema.className
+}
+
+function resolveSectionDescription(schema: ConfigSchema, sectionTitle: string) {
+  return schema.classDoc && schema.classDoc !== sectionTitle
+    ? schema.classDoc
+    : undefined
+}
+
 function SectionIcon({ iconName }: { iconName?: string }) {
  if (!iconName) return null
  const IconComponent = LucideIcons[iconName as keyof typeof LucideIcons] as
@@ -66,23 +76,33 @@ function DynamicConfigSection({
  basePath,
  hooks,
  level,
+  mergedChildren = [],
  nestedSchema,
  onChange,
  sectionDescription,
+  sectionKey,
  sectionTitle,
  values,
 }: {
  basePath: string
  hooks: FieldHookRegistry
  level: number
+  mergedChildren?: Array<{
+    key: string
+    schema: ConfigSchema
+    values: Record<string, unknown>
+  }>
  nestedSchema: ConfigSchema
  onChange: (field: string, value: unknown) => void
  sectionDescription?: string
+  sectionKey: string
  sectionTitle: string
  values: Record<string, unknown>
 }) {
  const [advancedVisible, setAdvancedVisible] = React.useState(false)
-  const hasAdvanced = hasTopLevelAdvancedFields(nestedSchema)
+  const hasAdvanced =
+    hasTopLevelAdvancedFields(nestedSchema) ||
+    mergedChildren.some((child) => hasTopLevelAdvancedFields(child.schema))

  return (
    <Card>
@@ -109,12 +129,43 @@ function DynamicConfigSection({
        <DynamicConfigForm
          schema={nestedSchema}
          values={values}
-          onChange={onChange}
+          onChange={(field, value) => onChange(`${sectionKey}.${field}`, value)}
          basePath={basePath}
          hooks={hooks}
          level={level}
          advancedVisible={hasAdvanced ? advancedVisible : undefined}
        />
+        {mergedChildren.map((child) => {
+          const childTitle = resolveSectionTitle(child.schema)
+          const childDescription = resolveSectionDescription(child.schema, childTitle)
+          const parentPath = basePath.includes('.')
+            ? basePath.replace(/\.[^.]+$/, '')
+            : ''
+          const childPath = buildFieldPath(parentPath, child.key)
+
+          return (
+            <div key={child.key} className="mt-5 border-t border-border/50 pt-4">
+              <div className="mb-3 space-y-1">
+                <div className="flex items-center gap-2">
+                  <SectionIcon iconName={child.schema.uiIcon} />
+                  <h3 className="text-sm font-medium">{childTitle}</h3>
+                </div>
+                {childDescription && (
+                  <p className="text-xs text-muted-foreground">{childDescription}</p>
+                )}
+              </div>
+              <DynamicConfigForm
+                schema={child.schema}
+                values={child.values}
+                onChange={(field, value) => onChange(`${child.key}.${field}`, value)}
+                basePath={childPath}
+                hooks={hooks}
+                level={level}
+                advancedVisible={hasAdvanced ? advancedVisible : undefined}
+              />
+            </div>
+          )
+        })}
      </CardContent>
    </Card>
  )
@@ -146,6 +197,17 @@ export const DynamicConfigForm: React.FC<DynamicConfigFormProps> = ({
    () => new Map(schema.fields.map((field) => [field.name, field])),
    [schema.fields],
  )
+  const mergedChildKeys = React.useMemo(() => {
+    const keys = new Set<string>()
+    for (const nestedSchema of Object.values(schema.nested ?? {})) {
+      for (const childKey of nestedSchema.uiMergeChildren ?? []) {
+        if (schema.nested?.[childKey]) {
+          keys.add(childKey)
+        }
+      }
+    }
+    return keys
+  }, [schema.nested])

  const renderField = (field: FieldSchema) => {
    const fieldPath = buildFieldPath(basePath, field.name)
@@ -231,7 +293,9 @@ export const DynamicConfigForm: React.FC<DynamicConfigFormProps> = ({
      )}

      {schema.nested &&
-        Object.entries(schema.nested).map(([key, nestedSchema]) => {
+        Object.entries(schema.nested)
+          .filter(([key]) => !mergedChildKeys.has(key))
+          .map(([key, nestedSchema]) => {
          const nestedField = fieldMap.get(key)
          const nestedFieldPath = buildFieldPath(basePath, key)

@@ -276,23 +340,43 @@ export const DynamicConfigForm: React.FC<DynamicConfigFormProps> = ({
            )
          }

-          const sectionTitle =
-            nestedSchema.uiLabel || nestedSchema.classDoc || nestedSchema.className
-          const sectionDescription =
-            nestedSchema.classDoc && nestedSchema.classDoc !== sectionTitle
-              ? nestedSchema.classDoc
-              : undefined
+          const sectionTitle = resolveSectionTitle(nestedSchema)
+          const sectionDescription = resolveSectionDescription(nestedSchema, sectionTitle)
+          const mergedChildren = (nestedSchema.uiMergeChildren ?? [])
+            .map((childKey) => {
+              const childSchema = schema.nested?.[childKey]
+              if (!childSchema) {
+                return null
+              }
+
+              return {
+                key: childKey,
+                schema: childSchema,
+                values: (values[childKey] as Record<string, unknown>) || {},
+              }
+            })
+            .filter(
+              (
+                child,
+              ): child is {
+                key: string
+                schema: ConfigSchema
+                values: Record<string, unknown>
+              } => Boolean(child),
+            )

          if (level === 0) {
            return (
              <DynamicConfigSection
                key={key}
+                mergedChildren={mergedChildren}
                nestedSchema={nestedSchema}
                values={(values[key] as Record<string, unknown>) || {}}
-                onChange={(field, value) => onChange(`${key}.${field}`, value)}
+                onChange={onChange}
                basePath={nestedFieldPath}
                hooks={hooks}
                level={level + 1}
+                sectionKey={key}
                sectionTitle={sectionTitle}
                sectionDescription={sectionDescription}
              />
--- a/dashboard/src/components/layout/constants.ts
+++ b/dashboard/src/components/layout/constants.ts
@@ -1,4 +1,4 @@
-import { Activity, Boxes, Database, FileSearch, FileText, Hash, Home, MessageSquare, Network, Package, ScrollText, Server, Settings, Sliders, Smile, UserCircle } from 'lucide-react'
+import { Activity, Boxes, Database, FileSearch, FileText, Hash, Home, MessageSquare, Network, Package, ScrollText, Server, Settings, Sliders, Smile } from 'lucide-react'

 import type { MenuSection } from './types'

@@ -7,6 +7,7 @@ export const menuSections: MenuSection[] = [
    title: 'sidebar.groups.overview',
    items: [
      { icon: Home, label: 'sidebar.menu.home', path: '/', searchDescription: 'search.items.homeDesc' },
+      { icon: Activity, label: 'sidebar.menu.maisakaMonitor', path: '/planner-monitor' },
    ],
  },
  {
@@ -24,23 +25,21 @@ export const menuSections: MenuSection[] = [
      { icon: Smile, label: 'sidebar.menu.emojiManagement', path: '/resource/emoji', searchDescription: 'search.items.emojiDesc' },
      { icon: MessageSquare, label: 'sidebar.menu.expressionManagement', path: '/resource/expression', searchDescription: 'search.items.expressionDesc' },
      { icon: Hash, label: 'sidebar.menu.slangManagement', path: '/resource/jargon', searchDescription: 'search.items.jargonDesc' },
-      { icon: UserCircle, label: 'sidebar.menu.personInfo', path: '/resource/person', searchDescription: 'search.items.personDesc' },
      { icon: Database, label: 'sidebar.menu.knowledgeBase', path: '/resource/knowledge-base' },
    ],
  },
  {
    title: 'sidebar.groups.extensionsMonitor',
    items: [
-      { icon: Package, label: 'sidebar.menu.pluginMarket', path: '/plugins', searchDescription: 'search.items.pluginsDesc' },
      { icon: Sliders, label: 'sidebar.menu.pluginConfig', path: '/plugin-config' },
+      { icon: Package, label: 'sidebar.menu.pluginMarket', path: '/plugins', searchDescription: 'search.items.pluginsDesc' },
      { icon: Network, label: 'sidebar.menu.mcpSettings', path: '/mcp-settings' },
-      { icon: FileSearch, label: 'sidebar.menu.logViewer', path: '/logs', searchDescription: 'search.items.logsDesc' },
-      { icon: Activity, label: 'sidebar.menu.maisakaMonitor', path: '/planner-monitor' },
    ],
  },
  {
    title: 'sidebar.groups.system',
    items: [
+      { icon: FileSearch, label: 'sidebar.menu.logViewer', path: '/logs', searchDescription: 'search.items.logsDesc' },
      { icon: Settings, label: 'sidebar.menu.settings', path: '/settings', searchDescription: 'search.items.settingsDesc' },
    ],
  },