|
|
|
@ -3860,7 +3860,492 @@ const createResult = await coreNetworkConfigService.createCoreNetworkConfig({ |
|
|
|
### 修复内容 |
|
|
|
- 将 `ims_ConfigurationId` 改为 `imS_ConfigurationId` 以匹配后端API返回的数据格式 |
|
|
|
- 修改 `X1.WebUI/src/services/imsConfigurationService.ts` 中的所有接口定义 |
|
|
|
- 修改 `X1.WebUI/src/pages/ims-configurations/IMSConfigurationsTable.tsx` 中的字段引用 |
|
|
|
- 修改 `X1.WebUI/src/pages/ims-configurations/IMSConfigurationsTable.tsx` |
|
|
|
|
|
|
|
--- |
|
|
|
|
|
|
|
## 2025-01-29 修复消息详情抽屉滚动条问题 |
|
|
|
|
|
|
|
### 修改概述 |
|
|
|
根据用户反馈，修复了消息详情抽屉中滚动条位置不正确的问题。通过对比 `RANConfigurationDrawer.tsx` 的实现，发现 `ProtocolLogsTable.tsx` 中的抽屉结构存在问题。 |
|
|
|
|
|
|
|
### 修改文件 |
|
|
|
- `X1.WebUI/src/components/protocol-logs/ProtocolLogsTable.tsx` - 修复抽屉布局结构 |
|
|
|
|
|
|
|
### 修改内容 |
|
|
|
|
|
|
|
#### 1. 抽屉结构重构 |
|
|
|
- **原结构问题**：`DrawerContent` 没有正确的 className，内容区域使用了错误的布局 |
|
|
|
- **新结构**：参考 `RANConfigurationDrawer.tsx` 的实现，使用正确的 flex 布局结构 |
|
|
|
|
|
|
|
#### 2. 具体修改 |
|
|
|
```tsx |
|
|
|
// 修改前 |
|
|
|
<Drawer open={isDrawerOpen} onOpenChange={setIsDrawerOpen}> |
|
|
|
<DrawerContent> |
|
|
|
<DrawerHeader className="flex-shrink-0"> |
|
|
|
{/* 头部内容 */} |
|
|
|
</DrawerHeader> |
|
|
|
|
|
|
|
<div className="flex-1 overflow-auto p-4 min-h-0"> |
|
|
|
<ConfigContentViewer |
|
|
|
content={selectedMessageDetail || 'No message detail available'} |
|
|
|
onCopy={handleCopyMessageDetail} |
|
|
|
onDownload={handleDownloadMessageDetail} |
|
|
|
className="h-full" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</DrawerContent> |
|
|
|
</Drawer> |
|
|
|
|
|
|
|
// 修改后 |
|
|
|
<Drawer open={isDrawerOpen} onOpenChange={setIsDrawerOpen}> |
|
|
|
<div className="flex flex-col h-full"> |
|
|
|
<DrawerHeader className="flex-shrink-0"> |
|
|
|
{/* 头部内容 */} |
|
|
|
</DrawerHeader> |
|
|
|
|
|
|
|
<DrawerContent className="flex flex-col flex-1 overflow-y-auto"> |
|
|
|
<div className="flex flex-col flex-1 min-h-0 p-4"> |
|
|
|
<ConfigContentViewer |
|
|
|
content={selectedMessageDetail || 'No message detail available'} |
|
|
|
onCopy={handleCopyMessageDetail} |
|
|
|
onDownload={handleDownloadMessageDetail} |
|
|
|
className="flex-1" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</DrawerContent> |
|
|
|
</div> |
|
|
|
</Drawer> |
|
|
|
``` |
|
|
|
|
|
|
|
#### 3. 布局优化 |
|
|
|
- **外层容器**：添加 `div` 包装器，使用 `flex flex-col h-full` 布局 |
|
|
|
- **DrawerContent**：添加 `flex flex-col flex-1 overflow-y-auto` className |
|
|
|
- **内容区域**：使用 `flex flex-col flex-1 min-h-0 p-4` 布局 |
|
|
|
- **ConfigContentViewer**：使用 `flex-1` className 占满剩余空间 |
|
|
|
|
|
|
|
### 技术特性 |
|
|
|
- **正确的 flex 布局**：确保抽屉内容能够正确滚动 |
|
|
|
- **高度管理**：使用 `min-h-0` 确保 flex 子元素能够正确收缩 |
|
|
|
- **滚动控制**：滚动条出现在内容区域内部，而不是外层容器 |
|
|
|
- **空间分配**：正确分配垂直空间，确保所有元素都能正确显示 |
|
|
|
|
|
|
|
### 用户体验改进 |
|
|
|
- **滚动条位置**：滚动条现在出现在内容区域内部，符合用户期望 |
|
|
|
- **内容可见性**：底部内容现在能够正确显示和滚动 |
|
|
|
- **布局稳定性**：抽屉布局更加稳定和可预测 |
|
|
|
- **操作便利性**：用户可以在内容区域内部滚动查看完整内容 |
|
|
|
|
|
|
|
### 影响范围 |
|
|
|
- **消息详情抽屉**：修复了滚动条位置和内容显示问题 |
|
|
|
- **用户体验**：提供了更好的内容查看体验 |
|
|
|
- **布局一致性**：与 `RANConfigurationDrawer.tsx` 保持一致的布局结构 |
|
|
|
|
|
|
|
--- |
|
|
|
|
|
|
|
## 2025-01-29 移除消息详情抽屉的保存和下载功能 |
|
|
|
|
|
|
|
### 修改概述 |
|
|
|
根据用户需求，移除了消息详情抽屉中的保存和下载功能，使 `ConfigContentViewer` 变为只读模式。 |
|
|
|
|
|
|
|
### 修改文件 |
|
|
|
- `X1.WebUI/src/components/protocol-logs/ProtocolLogsTable.tsx` - 移除保存和下载功能 |
|
|
|
|
|
|
|
### 修改内容 |
|
|
|
|
|
|
|
#### 1. 移除功能按钮 |
|
|
|
- **移除复制功能**：不再传递 `onCopy` 属性给 `ConfigContentViewer` |
|
|
|
- **移除下载功能**：不再传递 `onDownload` 属性给 `ConfigContentViewer` |
|
|
|
- **保留搜索功能**：搜索功能仍然可用，便于用户查找特定内容 |
|
|
|
|
|
|
|
#### 2. 具体修改 |
|
|
|
```tsx |
|
|
|
// 修改前 |
|
|
|
<ConfigContentViewer |
|
|
|
content={selectedMessageDetail || 'No message detail available'} |
|
|
|
onCopy={handleCopyMessageDetail} |
|
|
|
onDownload={handleDownloadMessageDetail} |
|
|
|
className="flex-1" |
|
|
|
/> |
|
|
|
|
|
|
|
// 修改后 |
|
|
|
<ConfigContentViewer |
|
|
|
content={selectedMessageDetail || 'No message detail available'} |
|
|
|
className="flex-1" |
|
|
|
/> |
|
|
|
``` |
|
|
|
|
|
|
|
### 技术特性 |
|
|
|
- **只读模式**：消息详情现在为只读，用户无法修改内容 |
|
|
|
- **简化界面**：移除了不必要的操作按钮，界面更加简洁 |
|
|
|
- **保留搜索**：搜索功能仍然可用，便于用户查找特定内容 |
|
|
|
- **功能隔离**：通过不传递回调函数来控制按钮的显示 |
|
|
|
|
|
|
|
### 用户体验改进 |
|
|
|
- **界面简化**：移除了复制和下载按钮，界面更加简洁 |
|
|
|
- **功能明确**：明确表示这是一个只读的查看界面 |
|
|
|
- **操作专注**：用户可以专注于查看和搜索内容，不会被其他操作干扰 |
|
|
|
|
|
|
|
--- |
|
|
|
|
|
|
|
## 2025-01-29 修复ConfigContentViewer主题适配问题 |
|
|
|
|
|
|
|
### 修改概述 |
|
|
|
根据用户反馈，修复了 `ConfigContentViewer` 组件不会随着主题改变的问题，参考 `ConfigContentEditor` 的实现，使用 Tailwind 主题变量替换硬编码的颜色类名。 |
|
|
|
|
|
|
|
### 修改文件 |
|
|
|
- `X1.WebUI/src/components/ui/ConfigContentViewer.tsx` - 修复主题适配问题 |
|
|
|
|
|
|
|
### 修改内容 |
|
|
|
|
|
|
|
#### 1. 颜色类名替换 |
|
|
|
- **搜索图标颜色**：将 `text-gray-400` 替换为 `text-muted-foreground` |
|
|
|
- **搜索状态文本**：将 `text-gray-500` 替换为 `text-muted-foreground` |
|
|
|
- **内容区域背景**：将 `bg-gray-50` 替换为 `bg-muted/50` |
|
|
|
|
|
|
|
#### 2. 具体修改 |
|
|
|
```tsx |
|
|
|
// 修改前 |
|
|
|
<MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" /> |
|
|
|
<span className="text-sm text-gray-500 whitespace-nowrap"> |
|
|
|
<div className="flex-1 border rounded-md bg-gray-50 overflow-hidden min-h-0"> |
|
|
|
|
|
|
|
// 修改后 |
|
|
|
<MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" /> |
|
|
|
<span className="text-sm text-muted-foreground whitespace-nowrap"> |
|
|
|
<div className="flex-1 border rounded-md bg-muted/50 overflow-hidden min-h-0"> |
|
|
|
``` |
|
|
|
|
|
|
|
### 技术特性 |
|
|
|
- **主题适配**：使用 Tailwind 主题变量，支持明暗主题切换 |
|
|
|
- **颜色一致性**：与 `ConfigContentEditor` 保持一致的色彩方案 |
|
|
|
- **响应式设计**：颜色会根据当前主题自动调整 |
|
|
|
- **可维护性**：使用语义化的颜色类名，便于维护和扩展 |
|
|
|
|
|
|
|
### 用户体验改进 |
|
|
|
- **主题一致性**：组件现在会随着主题切换而改变颜色 |
|
|
|
- **视觉统一**：与 `ConfigContentEditor` 保持一致的视觉效果 |
|
|
|
- **更好的可读性**：在不同主题下都有良好的对比度和可读性 |
|
|
|
|
|
|
|
--- |
|
|
|
|
|
|
|
## 2025-01-29 修复RANConfigurationViewDialog主题适配问题 |
|
|
|
|
|
|
|
### 修改概述 |
|
|
|
根据用户需求，修复了 `RANConfigurationViewDialog.tsx` 组件不会随着主题改变的问题，将硬编码的颜色类名替换为 Tailwind 主题变量，但保留 `ConfigContentViewer` 的修改。 |
|
|
|
|
|
|
|
### 修改文件 |
|
|
|
- `X1.WebUI/src/pages/ran-configurations/RANConfigurationViewDialog.tsx` - 修复主题适配问题 |
|
|
|
|
|
|
|
### 修改内容 |
|
|
|
|
|
|
|
#### 1. 标签文本颜色 |
|
|
|
- **配置名称标签**：将 `text-gray-600` 替换为 `text-muted-foreground` |
|
|
|
- **状态标签**：将 `text-gray-600` 替换为 `text-muted-foreground` |
|
|
|
- **描述标签**：将 `text-gray-600` 替换为 `text-muted-foreground` |
|
|
|
- **配置内容标签**：将 `text-gray-600` 替换为 `text-muted-foreground` |
|
|
|
|
|
|
|
#### 2. 内容文本颜色 |
|
|
|
- **配置名称内容**：将 `text-gray-900` 替换为 `text-foreground` |
|
|
|
- **描述内容**：将 `text-gray-900` 替换为 `text-foreground` |
|
|
|
|
|
|
|
#### 3. 状态标签颜色 |
|
|
|
- **禁用状态**：将 `bg-red-100 text-red-800` 替换为 `bg-destructive/10 text-destructive` |
|
|
|
- **启用状态**：将 `bg-green-100 text-green-800` 替换为 `bg-green-500/10 text-green-600 dark:text-green-400` |
|
|
|
|
|
|
|
#### 4. 标题颜色 |
|
|
|
- **对话框标题**：为 `DialogTitle` 添加 `text-foreground` 类名以确保正确的主题适配 |
|
|
|
|
|
|
|
#### 5. 对话框容器 |
|
|
|
- **DialogContent**：为 `DialogContent` 添加 `bg-background text-foreground` 类名以确保整个对话框的主题适配 |
|
|
|
|
|
|
|
#### 6. 具体修改 |
|
|
|
```tsx |
|
|
|
// 修改前 |
|
|
|
<Dialog open={open} onOpenChange={onOpenChange}> |
|
|
|
<DialogContent className="max-w-4xl h-[80vh] flex flex-col"> |
|
|
|
<DialogTitle className="text-lg font-semibold"> |
|
|
|
查看配置内容 - {configuration.name} |
|
|
|
</DialogTitle> |
|
|
|
<Label className="text-sm font-medium text-gray-600">配置名称</Label> |
|
|
|
<div className="mt-1 text-gray-900">{configuration.name}</div> |
|
|
|
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${ |
|
|
|
configuration.isDisabled |
|
|
|
? 'bg-red-100 text-red-800' |
|
|
|
: 'bg-green-100 text-green-800' |
|
|
|
}`}> |
|
|
|
|
|
|
|
// 修改后 |
|
|
|
<Dialog open={open} onOpenChange={onOpenChange}> |
|
|
|
<DialogContent className="max-w-4xl h-[80vh] flex flex-col bg-background text-foreground"> |
|
|
|
<DialogTitle className="text-lg font-semibold text-foreground"> |
|
|
|
查看配置内容 - {configuration.name} |
|
|
|
</DialogTitle> |
|
|
|
<Label className="text-sm font-medium text-muted-foreground">配置名称</Label> |
|
|
|
<div className="mt-1 text-foreground">{configuration.name}</div> |
|
|
|
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${ |
|
|
|
configuration.isDisabled |
|
|
|
? 'bg-destructive/10 text-destructive' |
|
|
|
: 'bg-green-500/10 text-green-600 dark:text-green-400' |
|
|
|
}`}> |
|
|
|
``` |
|
|
|
|
|
|
|
### 技术特性 |
|
|
|
- **主题适配**：使用 Tailwind 主题变量，支持明暗主题切换 |
|
|
|
- **语义化颜色**：使用 `text-foreground`、`text-muted-foreground` 等语义化颜色类名 |
|
|
|
- **状态颜色优化**：使用 `destructive` 主题色表示禁用状态，绿色表示启用状态 |
|
|
|
- **暗色主题支持**：为启用状态添加了 `dark:text-green-400` 以在暗色主题下保持良好的可读性 |
|
|
|
|
|
|
|
### 用户体验改进 |
|
|
|
- **主题一致性**：对话框现在会随着主题切换而改变颜色 |
|
|
|
- **视觉统一**：与整个应用保持一致的色彩方案 |
|
|
|
- **更好的可读性**：在不同主题下都有良好的对比度和可读性 |
|
|
|
- **状态清晰**：禁用和启用状态的颜色更加语义化和直观 |
|
|
|
|
|
|
|
--- |
|
|
|
|
|
|
|
## 2025-01-29 修复IMSConfigurationViewDialog主题适配问题 |
|
|
|
|
|
|
|
### 修改概述 |
|
|
|
根据用户需求，修复了 `IMSConfigurationViewDialog.tsx` 组件不会随着主题改变的问题，应用与 `RANConfigurationViewDialog.tsx` 相同的主题适配修复。 |
|
|
|
|
|
|
|
### 修改文件 |
|
|
|
- `X1.WebUI/src/pages/ims-configurations/IMSConfigurationViewDialog.tsx` - 修复主题适配问题 |
|
|
|
|
|
|
|
### 修改内容 |
|
|
|
|
|
|
|
#### 1. 对话框容器 |
|
|
|
- **DialogContent**：添加 `bg-background text-foreground` 类名以确保整个对话框的主题适配 |
|
|
|
|
|
|
|
#### 2. 标题颜色 |
|
|
|
- **对话框标题**：为 `DialogTitle` 添加 `text-foreground` 类名以确保正确的主题适配 |
|
|
|
|
|
|
|
#### 3. 标签文本颜色 |
|
|
|
- **配置名称标签**：将 `text-gray-600` 替换为 `text-muted-foreground` |
|
|
|
- **状态标签**：将 `text-gray-600` 替换为 `text-muted-foreground` |
|
|
|
- **描述标签**：将 `text-gray-600` 替换为 `text-muted-foreground` |
|
|
|
- **配置内容标签**：将 `text-gray-600` 替换为 `text-muted-foreground` |
|
|
|
|
|
|
|
#### 4. 内容文本颜色 |
|
|
|
- **配置名称内容**：将 `text-gray-900` 替换为 `text-foreground` |
|
|
|
- **描述内容**：将 `text-gray-900` 替换为 `text-foreground` |
|
|
|
|
|
|
|
#### 5. 状态标签颜色 |
|
|
|
- **禁用状态**：将 `bg-red-100 text-red-800` 替换为 `bg-destructive/10 text-destructive` |
|
|
|
- **启用状态**：将 `bg-green-100 text-green-800` 替换为 `bg-green-500/10 text-green-600 dark:text-green-400` |
|
|
|
|
|
|
|
#### 6. 具体修改 |
|
|
|
```tsx |
|
|
|
// 修改前 |
|
|
|
<DialogContent className="max-w-4xl h-[80vh] flex flex-col"> |
|
|
|
<DialogTitle className="text-lg font-semibold"> |
|
|
|
<Label className="text-sm font-medium text-gray-600">配置名称</Label> |
|
|
|
<div className="mt-1 text-gray-900">{configuration.name}</div> |
|
|
|
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${ |
|
|
|
configuration.isDisabled |
|
|
|
? 'bg-red-100 text-red-800' |
|
|
|
: 'bg-green-100 text-green-800' |
|
|
|
}`}> |
|
|
|
|
|
|
|
// 修改后 |
|
|
|
<DialogContent className="max-w-4xl h-[80vh] flex flex-col bg-background text-foreground"> |
|
|
|
<DialogTitle className="text-lg font-semibold text-foreground"> |
|
|
|
<Label className="text-sm font-medium text-muted-foreground">配置名称</Label> |
|
|
|
<div className="mt-1 text-foreground">{configuration.name}</div> |
|
|
|
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${ |
|
|
|
configuration.isDisabled |
|
|
|
? 'bg-destructive/10 text-destructive' |
|
|
|
: 'bg-green-500/10 text-green-600 dark:text-green-400' |
|
|
|
}`}> |
|
|
|
``` |
|
|
|
|
|
|
|
### 技术特性 |
|
|
|
- **主题适配**：使用 Tailwind 主题变量，支持明暗主题切换 |
|
|
|
- **语义化颜色**：使用 `text-foreground`、`text-muted-foreground` 等语义化颜色类名 |
|
|
|
- **状态颜色优化**：使用 `destructive` 主题色表示禁用状态，绿色表示启用状态 |
|
|
|
- **暗色主题支持**：为启用状态添加了 `dark:text-green-400` 以在暗色主题下保持良好的可读性 |
|
|
|
|
|
|
|
### 用户体验改进 |
|
|
|
- **主题一致性**：对话框现在会随着主题切换而改变颜色 |
|
|
|
- **视觉统一**：与整个应用保持一致的色彩方案 |
|
|
|
- **更好的可读性**：在不同主题下都有良好的对比度和可读性 |
|
|
|
- **状态清晰**：禁用和启用状态的颜色更加语义化和直观 |
|
|
|
|
|
|
|
--- |
|
|
|
|
|
|
|
## 2025-01-29 修复CoreNetworkConfigViewDialog主题适配问题 |
|
|
|
|
|
|
|
### 修改概述 |
|
|
|
根据用户需求，修复了 `CoreNetworkConfigViewDialog.tsx` 组件不会随着主题改变的问题，应用与其他配置查看对话框相同的主题适配修复。 |
|
|
|
|
|
|
|
### 修改文件 |
|
|
|
- `X1.WebUI/src/pages/core-network-configs/CoreNetworkConfigViewDialog.tsx` - 修复主题适配问题 |
|
|
|
|
|
|
|
### 修改内容 |
|
|
|
|
|
|
|
#### 1. 对话框容器 |
|
|
|
- **DialogContent**：添加 `bg-background text-foreground` 类名以确保整个对话框的主题适配 |
|
|
|
|
|
|
|
#### 2. 标题颜色 |
|
|
|
- **对话框标题**：为 `DialogTitle` 添加 `text-foreground` 类名以确保正确的主题适配 |
|
|
|
|
|
|
|
#### 3. 标签文本颜色 |
|
|
|
- **配置名称标签**：将 `text-gray-600` 替换为 `text-muted-foreground` |
|
|
|
- **状态标签**：将 `text-gray-600` 替换为 `text-muted-foreground` |
|
|
|
- **描述标签**：将 `text-gray-600` 替换为 `text-muted-foreground` |
|
|
|
- **配置内容标签**：将 `text-gray-600` 替换为 `text-muted-foreground` |
|
|
|
|
|
|
|
#### 4. 内容文本颜色 |
|
|
|
- **配置名称内容**：将 `text-gray-900` 替换为 `text-foreground` |
|
|
|
- **描述内容**：将 `text-gray-900` 替换为 `text-foreground` |
|
|
|
|
|
|
|
#### 5. 状态标签颜色 |
|
|
|
- **禁用状态**：将 `bg-red-100 text-red-800` 替换为 `bg-destructive/10 text-destructive` |
|
|
|
- **启用状态**：将 `bg-green-100 text-green-800` 替换为 `bg-green-500/10 text-green-600 dark:text-green-400` |
|
|
|
|
|
|
|
#### 6. 具体修改 |
|
|
|
```tsx |
|
|
|
// 修改前 |
|
|
|
<DialogContent className="max-w-4xl h-[80vh] flex flex-col"> |
|
|
|
<DialogTitle className="text-lg font-semibold"> |
|
|
|
<Label className="text-sm font-medium text-gray-600">配置名称</Label> |
|
|
|
<div className="mt-1 text-gray-900">{config.name}</div> |
|
|
|
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${ |
|
|
|
config.isDisabled |
|
|
|
? 'bg-red-100 text-red-800' |
|
|
|
: 'bg-green-100 text-green-800' |
|
|
|
}`}> |
|
|
|
|
|
|
|
// 修改后 |
|
|
|
<DialogContent className="max-w-4xl h-[80vh] flex flex-col bg-background text-foreground"> |
|
|
|
<DialogTitle className="text-lg font-semibold text-foreground"> |
|
|
|
<Label className="text-sm font-medium text-muted-foreground">配置名称</Label> |
|
|
|
<div className="mt-1 text-foreground">{config.name}</div> |
|
|
|
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${ |
|
|
|
config.isDisabled |
|
|
|
? 'bg-destructive/10 text-destructive' |
|
|
|
: 'bg-green-500/10 text-green-600 dark:text-green-400' |
|
|
|
}`}> |
|
|
|
``` |
|
|
|
|
|
|
|
### 技术特性 |
|
|
|
- **主题适配**：使用 Tailwind 主题变量，支持明暗主题切换 |
|
|
|
- **语义化颜色**：使用 `text-foreground`、`text-muted-foreground` 等语义化颜色类名 |
|
|
|
- **状态颜色优化**：使用 `destructive` 主题色表示禁用状态，绿色表示启用状态 |
|
|
|
- **暗色主题支持**：为启用状态添加了 `dark:text-green-400` 以在暗色主题下保持良好的可读性 |
|
|
|
|
|
|
|
### 用户体验改进 |
|
|
|
- **主题一致性**：对话框现在会随着主题切换而改变颜色 |
|
|
|
- **视觉统一**：与整个应用保持一致的色彩方案 |
|
|
|
- **更好的可读性**：在不同主题下都有良好的对比度和可读性 |
|
|
|
- **状态清晰**：禁用和启用状态的颜色更加语义化和直观 |
|
|
|
|
|
|
|
--- |
|
|
|
|
|
|
|
## 2025-01-29 修复消息详情抽屉滚动条问题 |
|
|
|
|
|
|
|
### 修改概述 |
|
|
|
根据用户需求，修复消息详情抽屉的滚动条问题，将滚动条从最外层移到内容区域内部，提供更好的用户体验。 |
|
|
|
|
|
|
|
### 修改文件 |
|
|
|
- `X1.WebUI/src/components/protocol-logs/ProtocolLogsTable.tsx` - 修复消息详情抽屉布局 |
|
|
|
|
|
|
|
### 修改内容 |
|
|
|
|
|
|
|
#### 1. 抽屉结构重构 |
|
|
|
- **原结构问题**：`DrawerContent` 被错误地嵌套在 `DrawerHeader` 内部，导致布局混乱 |
|
|
|
- **新结构**：将 `DrawerContent` 移到正确的位置，作为 `Drawer` 的直接子元素 |
|
|
|
|
|
|
|
#### 2. 滚动条位置修复 |
|
|
|
- **原实现**：滚动条在最外层，影响整体布局 |
|
|
|
- **新实现**：滚动条在内容区域内部，只对消息详情内容进行滚动 |
|
|
|
- **布局优化**：使用 `overflow-auto` 类在内容区域实现滚动 |
|
|
|
|
|
|
|
#### 3. Flex布局高度修复 |
|
|
|
- **问题**：flex容器中的子元素没有正确的高度约束 |
|
|
|
- **解决方案**：添加 `min-h-0` 类确保flex子元素能够正确收缩 |
|
|
|
- **影响**：修复了内容区域无法正确滚动的问题 |
|
|
|
|
|
|
|
#### 4. 具体修改 |
|
|
|
```tsx |
|
|
|
// 修改前 |
|
|
|
<Drawer open={isDrawerOpen} onOpenChange={setIsDrawerOpen}> |
|
|
|
<div className="flex flex-col h-full"> |
|
|
|
<DrawerHeader className="flex-shrink-0"> |
|
|
|
{/* 标题和关闭按钮 */} |
|
|
|
</DrawerHeader> |
|
|
|
|
|
|
|
<DrawerContent className="flex flex-col flex-1 min-h-0"> |
|
|
|
<div className="flex-1 p-4"> |
|
|
|
<ConfigContentViewer /> |
|
|
|
</div> |
|
|
|
</DrawerContent> |
|
|
|
</div> |
|
|
|
</Drawer> |
|
|
|
|
|
|
|
// 修改后 |
|
|
|
<Drawer open={isDrawerOpen} onOpenChange={setIsDrawerOpen}> |
|
|
|
<DrawerContent> |
|
|
|
<DrawerHeader className="flex-shrink-0"> |
|
|
|
{/* 标题和关闭按钮 */} |
|
|
|
</DrawerHeader> |
|
|
|
|
|
|
|
<div className="flex-1 overflow-auto p-4 min-h-0"> |
|
|
|
<ConfigContentViewer className="h-full" /> |
|
|
|
</div> |
|
|
|
</DrawerContent> |
|
|
|
</Drawer> |
|
|
|
``` |
|
|
|
|
|
|
|
#### 5. ConfigContentViewer组件修复 |
|
|
|
- **问题**：组件内部的高度约束不正确 |
|
|
|
- **解决方案**： |
|
|
|
- 为内容容器添加 `min-h-0` 类 |
|
|
|
- 移除内联样式中的 `height: '100%'`，避免冲突 |
|
|
|
- 确保flex布局正确工作 |
|
|
|
|
|
|
|
#### 6. DrawerContent组件修复 |
|
|
|
- **问题**：`DrawerContent` 组件本身有 `overflow-y-auto` 类，导致双重滚动 |
|
|
|
- **解决方案**： |
|
|
|
- 移除 `DrawerContent` 中的 `overflow-y-auto` 和 `p-6` 类 |
|
|
|
- 改为使用 `flex flex-col` 布局 |
|
|
|
- 让具体的滚动控制由子组件决定 |
|
|
|
|
|
|
|
#### 7. DrawerContent高度约束修复 |
|
|
|
- **问题**：`DrawerContent` 缺少 `min-h-0` 类，导致无法正确收缩 |
|
|
|
- **解决方案**： |
|
|
|
- 为 `DrawerContent` 添加 `min-h-0` 类 |
|
|
|
- 确保flex子元素能够正确收缩到比内容更小的高度 |
|
|
|
- 这是解决滚动问题的关键修复 |
|
|
|
|
|
|
|
### 技术特性 |
|
|
|
|
|
|
|
#### 1. 布局结构优化 |
|
|
|
- **正确的HTML层次**：`Drawer` → `DrawerContent` → `DrawerHeader` + 内容区域 |
|
|
|
- **Flex布局**：使用flex布局确保内容区域占满剩余空间 |
|
|
|
- **滚动区域**：只在内容区域实现滚动，不影响标题栏 |
|
|
|
|
|
|
|
#### 2. 用户体验改进 |
|
|
|
- **固定标题**：标题栏始终可见，不会随内容滚动 |
|
|
|
- **内容滚动**：只有消息详情内容可以滚动 |
|
|
|
- **布局稳定**：抽屉整体布局更加稳定和可预测 |
|
|
|
|
|
|
|
#### 3. 响应式设计 |
|
|
|
- **自适应高度**：内容区域自动适应抽屉高度 |
|
|
|
- **滚动支持**：当内容超出可视区域时自动显示滚动条 |
|
|
|
- **空间利用**：充分利用抽屉的可用空间 |
|
|
|
|
|
|
|
### 影响范围 |
|
|
|
- **用户界面**：消息详情抽屉的滚动行为更加合理 |
|
|
|
- **布局稳定性**：抽屉布局更加稳定，不会出现布局混乱 |
|
|
|
- **用户体验**：提供更好的内容浏览体验 |
|
|
|
|
|
|
|
### 注意事项 |
|
|
|
- 保持了原有的功能不变 |
|
|
|
- 滚动条现在只在内容区域显示 |
|
|
|
- 标题栏始终固定在顶部 |
|
|
|
- 内容区域可以独立滚动 中的字段引用 |
|
|
|
- 修改 `X1.WebUI/src/pages/ims-configurations/IMSConfigurationsView.tsx` 中的字段引用 |
|
|
|
|
|
|
|
### 技术说明 |
|
|
|
|
