AgentHub

前端美化和优化方案

📋 概述

本文档详细记录了 AgentHub 前端页面的美化和优化方案，包括统一组件、弹窗改造、视觉效果优化等内容。

实施日期: 2026-05-09
涉及页面: 15+ 配置管理页面
主要改进: 统一UI组件、弹窗化表单、毛玻璃效果、浮动按钮

🎯 优化目标

1. 统一组件系统

所有下拉框使用统一的 CustomSelect 组件
所有按钮使用统一的 CustomButton 组件
所有弹窗使用统一的 ModalDialog 组件

2. 弹窗化表单

所有新增表单改为弹窗形式
所有编辑表单改为弹窗形式
移除页面内的内联表单

3. 视觉效果优化

毛玻璃效果 (Glassmorphism)
浮动效果 (Floating Effect)
圆角设计 (Rounded Corners)
用户可开关视觉效果

4. 统一交互方式

右下角统一的浮动新增按钮
根据当前页面智能显示对应功能
标题和列表彻底分隔为独立板块

🏗️ 核心组件

1. CustomSelect.vue - 统一下拉框

位置: src/components/CustomSelect.vue

功能特性:

支持搜索过滤
支持禁用状态
支持占位符
支持自定义选项渲染
统一的样式和动画

使用示例:

<CustomSelect 
  v-model="selectedValue" 
  :options="options" 
  placeholder="请选择"
/>

2. CustomButton.vue - 统一按钮

位置: src/components/CustomButton.vue

按钮类型:

primary - 主要按钮（蓝色）
secondary - 次要按钮（灰色）
success - 成功按钮（绿色）
danger - 危险按钮（红色）
warning - 警告按钮（黄色）
ghost - 幽灵按钮（透明）
link - 链接按钮（无背景）

按钮尺寸:

small - 小尺寸
medium - 中等尺寸（默认）
large - 大尺寸

使用示例:

<CustomButton type="primary" size="medium" @click="handleClick">
  保存
</CustomButton>

3. ModalDialog.vue - 统一弹窗

位置: src/components/ModalDialog.vue

功能特性:

使用 Teleport 渲染到 body
毛玻璃背景效果
支持 4 种尺寸 (small, medium, large, xlarge)
支持确认和取消按钮
支持自定义底部
平滑的打开/关闭动画

使用示例:

<ModalDialog
  v-model:visible="showDialog"
  title="创建配置"
  @confirm="handleSubmit"
  @close="showDialog = false"
  confirm-text="创建"
>
  <form>
    <!-- 表单内容 -->
  </form>
</ModalDialog>

🎨 视觉效果系统

1. 毛玻璃效果 (Glassmorphism)

CSS 实现:

.glass-effect {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 16px;
  border: 1px solid transparent;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

应用场景:

页面标题卡片
列表卡片
弹窗背景
浮动按钮

2. 浮动效果 (Floating Effect)

CSS 实现:

.float-effect {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.float-effect:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

3. 圆角设计

全局样式 (src/common/base.css):

div, section, article, aside, main, nav,
.panel, .stat, .card, .config-item {
  border-radius: 12px !important;
}

.panel, .stat, .config-item {
  border: 1px solid transparent !important;
}

4. 效果开关组件

位置: src/components/EffectToggle.vue

功能:

开关毛玻璃效果
开关浮动效果
开关动画效果
设置保存到 localStorage

🔘 浮动按钮系统

1. FloatingSettingsButton.vue

位置: 右下角 (bottom: 24px, right: 24px)
功能: 跳转到设置页面
样式: 蓝色圆形按钮，48x48px

2. FloatingEffectButton.vue

位置: 右下角 (bottom: 84px, right: 24px)
功能: 打开视觉效果设置弹窗
样式: 蓝色圆形按钮，48x48px

3. FloatingAddButton.vue

位置: 右下角 (bottom: 140px, right: 24px)
功能: 触发 global-add 事件，打开当前页面的新增弹窗
样式: 绿色圆形按钮，48x48px，带加号图标
智能显示: 只在配置页面显示

布局示意:

右下角：
├── FloatingSettingsButton (bottom: 24px) - 设置按钮（蓝色）
├── FloatingEffectButton (bottom: 84px) - 视觉效果按钮（蓝色）
└── FloatingAddButton (bottom: 140px) - 新增按钮（绿色，智能显示）

📄 页面改造详情

改造的页面列表

ModelConfigView - 大模型配置
VectorStoreConfigView - 向量数据库配置
AgentConfigView - Agent配置
WorkspaceOverviewView - 工作区管理
KnowledgeWorkbenchView - 知识库工作台
AgentStudioView - Agent Studio
StrategyManagementView - 策略配置管理
- RetrievalStrategyPanel - 检索策略
- ToolStrategyPanel - 工具策略
- ModelStrategyPanel - 模型策略
- GuardrailStrategyPanel - 护栏策略
McpToolView - MCP工具
PromptTemplateView - 提示词模板
MemoryManagementView - 记忆管理
SkillManagementView - 技能管理
WorkflowManagementView - 工作流管理
AgentTeamManagementView - Agent团队管理
ScheduledTaskView - 定时任务管理

改造步骤

步骤 1: 添加 ModalDialog 导入

import ModalDialog from '@/components/ModalDialog.vue'

步骤 2: 移除页面内的新增按钮

<!-- 移除前 -->
<button @click="showCreateForm = true">新建配置</button>

<!-- 移除后 -->
<!-- 使用右侧浮动新增按钮 -->

步骤 3: 将内联表单改为弹窗

<!-- 移除前 -->
<form v-if="showCreateForm" class="form">
  <!-- 表单内容 -->
</form>

<!-- 改为 -->
<ModalDialog
  v-model:visible="showCreateForm"
  title="创建配置"
  @confirm="handleSubmit"
  @close="showCreateForm = false"
>
  <form>
    <!-- 表单内容 -->
  </form>
</ModalDialog>

步骤 4: 添加 global-add 事件监听

onMounted(() => {
  window.addEventListener('global-add', () => {
    editingId.value = null  // 重置编辑状态
    showCreateForm.value = true
  })
})

步骤 5: 确保编辑功能打开弹窗

function handleEdit(item) {
  editingId.value = item.id
  // 填充表单数据
  formData.name = item.name
  // ... 其他字段
  showEditForm.value = true  // 打开弹窗
}

步骤 6: 分隔标题和列表

<template>
  <section class="grid">
    <!-- 标题板块 -->
    <div class="page-header">
      <h2>页面标题</h2>
      <p class="muted">页面描述</p>
    </div>
    
    <!-- 列表板块 -->
    <article class="table-card">
      <table>
        <!-- 表格内容 -->
      </table>
    </article>
  </section>
</template>

🎯 策略配置管理特殊处理

策略类型

策略配置管理页面包含 4 种策略，每种策略有独立的子组件：

检索策略 (RetrievalStrategyPanel)
工具策略 (ToolStrategyPanel)
模型策略 (ModelStrategyPanel)
护栏策略 (GuardrailStrategyPanel)

事件系统

主页面事件监听:

// StrategyManagementView.vue
onMounted(() => {
  window.addEventListener('global-add', () => {
    // 根据当前标签页触发对应的子组件事件
    window.dispatchEvent(new CustomEvent(`strategy-${activeTab.value}-add`))
  })
})

子组件事件监听:

// RetrievalStrategyPanel.vue
onMounted(() => {
  window.addEventListener('strategy-retrieval-add', () => {
    showCreateForm.value = true
  })
})

字段定义

检索策略字段

name (策略名称)
description (描述)
retrievalType (检索类型)
topK (Top K)
scoreThreshold (分数阈值)
vectorWeight (向量权重)
keywordWeight (关键词权重)
enableQueryRewrite (启用查询改写)
enableRerank (启用重排序)
enableTextSearch (启用文本搜索)
enableVectorSearch (启用向量搜索)
rerankModel (重排序模型)

工具策略字段

name (策略名称)
description (描述)
maxConcurrentCalls (最大并发调用数)
timeoutSeconds (超时时间)
retryCount (重试次数)
fallbackEnabled (启用降级)

模型策略字段

name (策略名称)
description (描述)
temperature (温度)
maxTokens (最大Token数)
topP (Top P)
frequencyPenalty (频率惩罚)
presencePenalty (存在惩罚)

护栏策略字段

name (策略名称)
description (描述)
inputValidationEnabled (启用输入验证)
outputValidationEnabled (启用输出验证)
piiDetectionEnabled (启用PII检测)
piiMaskingEnabled (启用PII掩码)
promptInjectionDetection (启用提示注入检测)
maxInputLength (最大输入长度)
maxOutputLength (最大输出长度)

🎨 样式系统

全局样式文件

位置: src/common/base.css

页面布局样式

.grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.page-header {
  padding: 24px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid transparent;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.table-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid transparent;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

表格样式

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background: rgba(58, 138, 214, 0.05);
}

th, td {
  padding: 16px;
  text-align: left;
  border-bottom: 1px solid rgba(38, 66, 102, 0.08);
}

tr:hover {
  background: rgba(58, 138, 214, 0.02);
}

🔄 数据流

新增流程

用户点击右侧新增按钮
    ↓
触发 global-add 事件
    ↓
当前页面监听到事件
    ↓
重置编辑状态 (editingId = null)
    ↓
打开新增弹窗 (showCreateForm = true)
    ↓
用户填写表单
    ↓
点击确认按钮
    ↓
调用创建 API
    ↓
关闭弹窗
    ↓
刷新列表

编辑流程

用户点击编辑按钮
    ↓
调用 handleEdit 函数
    ↓
设置编辑 ID (editingId = item.id)
    ↓
填充表单数据
    ↓
打开编辑弹窗 (showEditForm = true)
    ↓
用户修改数据
    ↓
点击更新按钮
    ↓
调用更新 API
    ↓
关闭弹窗
    ↓
刷新列表

📊 路由配置

TenantLayout.vue 中的路由判断

const showAddButton = computed(() => {
  const path = route.path
  return path.includes('workspace') ||
         path.includes('agents') ||
         path.includes('strategies') ||
         path.includes('vector-stores') ||
         path.includes('models') ||
         path.includes('agent-configs') ||
         path.includes('knowledge') ||
         path.includes('retrieval') ||
         path.includes('mcp-tool') ||
         path.includes('prompt-template') ||
         path.includes('memory') ||
         path.includes('skill') ||
         path.includes('workflow') ||
         path.includes('agent-team') ||
         path.includes('security-policy') ||
         path.includes('scheduled-task')
})

✅ 改造检查清单

每个页面需要检查的项目

🚀 使用指南

启动项目

cd src/main/web
npm run dev

测试新增功能

进入任意配置页面
右下角出现绿色新增按钮
点击新增按钮
弹出创建弹窗
填写表单并提交

测试编辑功能

点击列表中的编辑按钮
弹出编辑弹窗
所有字段显示当前数据
修改数据并提交

测试视觉效果

点击右下角蓝色视觉效果按钮
开关各种效果
查看页面变化

📝 注意事项

1. ModalDialog 必须导入

如果弹窗不显示，首先检查 ModalDialog 是否已导入：

import ModalDialog from '@/components/ModalDialog.vue'

2. 编辑状态必须重置

在 global-add 事件中，必须重置编辑状态：

window.addEventListener('global-add', () => {
  editingId.value = null  // 必须重置
  showCreateForm.value = true
})

3. 字段必须与后端 DTO 一致

前端表单字段必须与后端 DTO 完全一致，否则会导致：

数据无法正确保存
编辑时数据无法正确回显
列表显示不完整

4. 更新请求必须包含所有字段

更新函数必须提交所有可编辑字段，不要只提交部分字段：

// 错误示例 - 只提交2个字段
await updateStrategy(id, {
  name: data.name,
  description: data.description,
})

// 正确示例 - 提交所有字段
await updateStrategy(id, {
  name: data.name,
  description: data.description,
  field1: data.field1,
  field2: data.field2,
  // ... 所有字段
})

🎯 总结

本次前端美化和优化方案实现了：

✅ 统一的组件系统（CustomSelect、CustomButton、ModalDialog）
✅ 所有表单弹窗化（新增和编辑）
✅ 毛玻璃和浮动视觉效果
✅ 统一的浮动按钮系统
✅ 标题和列表彻底分隔
✅ 字段与后端 DTO 完全一致
✅ 编辑数据正确回显
✅ 更新请求包含所有字段

改造页面数量: 15+
新增组件数量: 6
代码质量: 编译通过，无错误
用户体验: 大幅提升

文档版本: 1.0
最后更新: 2026-05-09