root
/
CellularManagement
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修复主题适配问题：1. 修复消息详情抽屉滚动条位置问题 2. 移除消息详情抽屉的保存和下载功能 3. 修复ConfigContentViewer主题适配问题 4. 修复RANConfigurationViewDialog主题适配问题 5. 修复IMSConfigurationViewDialog主题适配问题 6. 修复CoreNetworkConfigViewDialog主题适配问题

feature/x1-web-request
root 2 days ago
parent
f4b1963400
commit
17cd46e9c3
7 changed files with 547 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 54
      src/X1.WebUI/src/components/protocol-logs/ProtocolLogsTable.tsx
  2. 7
      src/X1.WebUI/src/components/ui/ConfigContentViewer.tsx
  3. 2
      src/X1.WebUI/src/components/ui/drawer.tsx
  4. 20
      src/X1.WebUI/src/pages/core-network-configs/CoreNetworkConfigViewDialog.tsx
  5. 20
      src/X1.WebUI/src/pages/ims-configurations/IMSConfigurationViewDialog.tsx
  6. 20
      src/X1.WebUI/src/pages/ran-configurations/RANConfigurationViewDialog.tsx
  7. 487
      src/modify.md

54
src/X1.WebUI/src/components/protocol-logs/ProtocolLogsTable.tsx
View File

@ -261,35 +261,33 @@ export default function ProtocolLogsTable({
</div> </div>
</div> </div>
{/* 消息详情抽屉 */} {/* 消息详情抽屉 */}
<Drawer open={isDrawerOpen} onOpenChange={setIsDrawerOpen}> <Drawer open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
<div className="flex flex-col h-full"> <div className="flex flex-col h-full">
<DrawerHeader className="flex-shrink-0"> <DrawerHeader className="flex-shrink-0">
<div className="flex items-center justify-between w-full"> <div className="flex items-center justify-between w-full">
<h2 className="text-lg font-semibold">Message Detail</h2> <h2 className="text-lg font-semibold">Message Detail</h2>
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={() => setIsDrawerOpen(false)} onClick={() => setIsDrawerOpen(false)}
className="h-8 w-8 p-0" className="h-8 w-8 p-0"
> >
<X className="h-4 w-4" /> <X className="h-4 w-4" />
</Button> </Button>
</div> </div>
</DrawerHeader> </DrawerHeader>
<DrawerContent className="flex flex-col flex-1 min-h-0"> <DrawerContent className="flex flex-col flex-1 overflow-y-auto">
<div className="flex-1 p-4"> <div className="flex flex-col flex-1 min-h-0 p-4">
<ConfigContentViewer <ConfigContentViewer
content={selectedMessageDetail || 'No message detail available'} content={selectedMessageDetail || 'No message detail available'}
onCopy={handleCopyMessageDetail} className="flex-1"
onDownload={handleDownloadMessageDetail} />
className="h-full" </div>
/> </DrawerContent>
</div> </div>
</DrawerContent> </Drawer>
</div>
</Drawer>
</> </>
); );
} }

7
src/X1.WebUI/src/components/ui/ConfigContentViewer.tsx
View File

@ -152,7 +152,7 @@ export default function ConfigContentViewer({
{isSearchVisible && ( {isSearchVisible && (
<div className="flex items-center gap-2 flex-1"> <div className="flex items-center gap-2 flex-1">
<div className="relative flex-1"> <div className="relative flex-1">
<MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" /> <MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input <Input
placeholder="搜索内容... (Enter: 下一个, Shift+Enter: 上一个)" placeholder="搜索内容... (Enter: 下一个, Shift+Enter: 上一个)"
value={searchTerm} value={searchTerm}
@ -163,7 +163,7 @@ export default function ConfigContentViewer({
/> />
</div> </div>
{searchTerm && ( {searchTerm && (
<span className="text-sm text-gray-500 whitespace-nowrap"> <span className="text-sm text-muted-foreground whitespace-nowrap">
{totalMatches > 0 ? ( {totalMatches > 0 ? (
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
<span>{currentMatchIndex + 1} / {totalMatches}</span> <span>{currentMatchIndex + 1} / {totalMatches}</span>
@ -236,11 +236,10 @@ export default function ConfigContentViewer({
</div> </div>
{/* 配置内容显示区域 */} {/* 配置内容显示区域 */}
<div className="flex-1 border rounded-md bg-gray-50 overflow-hidden"> <div className="flex-1 border rounded-md bg-muted/50 overflow-hidden min-h-0">
<div <div
className="font-mono text-sm h-full overflow-auto p-3" className="font-mono text-sm h-full overflow-auto p-3"
style={{ style={{
height: '100%',
whiteSpace: 'pre', whiteSpace: 'pre',
wordWrap: 'normal', wordWrap: 'normal',
overflowWrap: 'normal' overflowWrap: 'normal'

2
src/X1.WebUI/src/components/ui/drawer.tsx
View File

@ -58,7 +58,7 @@ interface DrawerContentProps {
export function DrawerContent({ children, className }: DrawerContentProps) { export function DrawerContent({ children, className }: DrawerContentProps) {
return ( return (
<div className={cn("flex-1 p-6 overflow-y-auto", className)}> <div className={cn("flex-1 flex flex-col min-h-0", className)}>
{children} {children}
</div> </div>
) )

20
src/X1.WebUI/src/pages/core-network-configs/CoreNetworkConfigViewDialog.tsx
View File

@ -64,9 +64,9 @@ export default function CoreNetworkConfigViewDialog({
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-4xl h-[80vh] flex flex-col"> <DialogContent className="max-w-4xl h-[80vh] flex flex-col bg-background text-foreground">
<div className="flex items-center justify-between w-full mb-4 flex-shrink-0"> <div className="flex items-center justify-between w-full mb-4 flex-shrink-0">
<DialogTitle className="text-lg font-semibold"> <DialogTitle className="text-lg font-semibold text-foreground">
查看配置内容 - {config.name} 查看配置内容 - {config.name}
</DialogTitle> </DialogTitle>
<Button <Button
@ -83,16 +83,16 @@ export default function CoreNetworkConfigViewDialog({
{/* 配置信息 */} {/* 配置信息 */}
<div className="grid grid-cols-2 gap-4 text-sm flex-shrink-0"> <div className="grid grid-cols-2 gap-4 text-sm flex-shrink-0">
<div> <div>
<Label className="text-sm font-medium text-gray-600">配置名称</Label> <Label className="text-sm font-medium text-muted-foreground">配置名称</Label>
<div className="mt-1 text-gray-900">{config.name}</div> <div className="mt-1 text-foreground">{config.name}</div>
</div> </div>
<div> <div>
<Label className="text-sm font-medium text-gray-600">状态</Label> <Label className="text-sm font-medium text-muted-foreground">状态</Label>
<div className="mt-1"> <div className="mt-1">
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${ <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
config.isDisabled config.isDisabled
? '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'
}`}> }`}>
{config.isDisabled ? '禁用' : '启用'} {config.isDisabled ? '禁用' : '启用'}
</span> </span>
@ -100,15 +100,15 @@ export default function CoreNetworkConfigViewDialog({
</div> </div>
{config.description && ( {config.description && (
<div className="col-span-2"> <div className="col-span-2">
<Label className="text-sm font-medium text-gray-600">描述</Label> <Label className="text-sm font-medium text-muted-foreground">描述</Label>
<div className="mt-1 text-gray-900">{config.description}</div> <div className="mt-1 text-foreground">{config.description}</div>
</div> </div>
)} )}
</div> </div>
{/* 配置内容查看器 */} {/* 配置内容查看器 */}
<div className="flex flex-col flex-1 min-h-0"> <div className="flex flex-col flex-1 min-h-0">
<Label className="text-sm font-medium text-gray-600 mb-2 flex-shrink-0"> <Label className="text-sm font-medium text-muted-foreground mb-2 flex-shrink-0">
配置内容 配置内容
</Label> </Label>
<ConfigContentViewer <ConfigContentViewer

20
src/X1.WebUI/src/pages/ims-configurations/IMSConfigurationViewDialog.tsx
View File

@ -64,9 +64,9 @@ export default function IMSConfigurationViewDialog({
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-4xl h-[80vh] flex flex-col"> <DialogContent className="max-w-4xl h-[80vh] flex flex-col bg-background text-foreground">
<div className="flex items-center justify-between w-full mb-4 flex-shrink-0"> <div className="flex items-center justify-between w-full mb-4 flex-shrink-0">
<DialogTitle className="text-lg font-semibold"> <DialogTitle className="text-lg font-semibold text-foreground">
查看配置内容 - {configuration.name} 查看配置内容 - {configuration.name}
</DialogTitle> </DialogTitle>
<Button <Button
@ -83,16 +83,16 @@ export default function IMSConfigurationViewDialog({
{/* 配置信息 */} {/* 配置信息 */}
<div className="grid grid-cols-2 gap-4 text-sm flex-shrink-0"> <div className="grid grid-cols-2 gap-4 text-sm flex-shrink-0">
<div> <div>
<Label className="text-sm font-medium text-gray-600">配置名称</Label> <Label className="text-sm font-medium text-muted-foreground">配置名称</Label>
<div className="mt-1 text-gray-900">{configuration.name}</div> <div className="mt-1 text-foreground">{configuration.name}</div>
</div> </div>
<div> <div>
<Label className="text-sm font-medium text-gray-600">状态</Label> <Label className="text-sm font-medium text-muted-foreground">状态</Label>
<div className="mt-1"> <div className="mt-1">
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${ <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
configuration.isDisabled configuration.isDisabled
? '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'
}`}> }`}>
{configuration.isDisabled ? '禁用' : '启用'} {configuration.isDisabled ? '禁用' : '启用'}
</span> </span>
@ -100,15 +100,15 @@ export default function IMSConfigurationViewDialog({
</div> </div>
{configuration.description && ( {configuration.description && (
<div className="col-span-2"> <div className="col-span-2">
<Label className="text-sm font-medium text-gray-600">描述</Label> <Label className="text-sm font-medium text-muted-foreground">描述</Label>
<div className="mt-1 text-gray-900">{configuration.description}</div> <div className="mt-1 text-foreground">{configuration.description}</div>
</div> </div>
)} )}
</div> </div>
{/* 配置内容查看器 */} {/* 配置内容查看器 */}
<div className="flex flex-col flex-1 min-h-0"> <div className="flex flex-col flex-1 min-h-0">
<Label className="text-sm font-medium text-gray-600 mb-2 flex-shrink-0"> <Label className="text-sm font-medium text-muted-foreground mb-2 flex-shrink-0">
配置内容 配置内容
</Label> </Label>
<ConfigContentViewer <ConfigContentViewer

20
src/X1.WebUI/src/pages/ran-configurations/RANConfigurationViewDialog.tsx
View File

@ -64,9 +64,9 @@ export default function RANConfigurationViewDialog({
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-4xl h-[80vh] flex flex-col"> <DialogContent className="max-w-4xl h-[80vh] flex flex-col bg-background text-foreground">
<div className="flex items-center justify-between w-full mb-4 flex-shrink-0"> <div className="flex items-center justify-between w-full mb-4 flex-shrink-0">
<DialogTitle className="text-lg font-semibold"> <DialogTitle className="text-lg font-semibold text-foreground">
查看配置内容 - {configuration.name} 查看配置内容 - {configuration.name}
</DialogTitle> </DialogTitle>
<Button <Button
@ -83,16 +83,16 @@ export default function RANConfigurationViewDialog({
{/* 配置信息 */} {/* 配置信息 */}
<div className="grid grid-cols-2 gap-4 text-sm flex-shrink-0"> <div className="grid grid-cols-2 gap-4 text-sm flex-shrink-0">
<div> <div>
<Label className="text-sm font-medium text-gray-600">配置名称</Label> <Label className="text-sm font-medium text-muted-foreground">配置名称</Label>
<div className="mt-1 text-gray-900">{configuration.name}</div> <div className="mt-1 text-foreground">{configuration.name}</div>
</div> </div>
<div> <div>
<Label className="text-sm font-medium text-gray-600">状态</Label> <Label className="text-sm font-medium text-muted-foreground">状态</Label>
<div className="mt-1"> <div className="mt-1">
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${ <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
configuration.isDisabled configuration.isDisabled
? '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'
}`}> }`}>
{configuration.isDisabled ? '禁用' : '启用'} {configuration.isDisabled ? '禁用' : '启用'}
</span> </span>
@ -100,15 +100,15 @@ export default function RANConfigurationViewDialog({
</div> </div>
{configuration.description && ( {configuration.description && (
<div className="col-span-2"> <div className="col-span-2">
<Label className="text-sm font-medium text-gray-600">描述</Label> <Label className="text-sm font-medium text-muted-foreground">描述</Label>
<div className="mt-1 text-gray-900">{configuration.description}</div> <div className="mt-1 text-foreground">{configuration.description}</div>
</div> </div>
)} )}
</div> </div>
{/* 配置内容查看器 */} {/* 配置内容查看器 */}
<div className="flex flex-col flex-1 min-h-0"> <div className="flex flex-col flex-1 min-h-0">
<Label className="text-sm font-medium text-gray-600 mb-2 flex-shrink-0"> <Label className="text-sm font-medium text-muted-foreground mb-2 flex-shrink-0">
配置内容 配置内容
</Label> </Label>
<ConfigContentViewer <ConfigContentViewer

487
src/modify.md
View File

@ -3860,7 +3860,492 @@ const createResult = await coreNetworkConfigService.createCoreNetworkConfig({
### 修复内容 ### 修复内容
- 将 `ims_ConfigurationId` 改为 `imS_ConfigurationId` 以匹配后端API返回的数据格式 - 将 `ims_ConfigurationId` 改为 `imS_ConfigurationId` 以匹配后端API返回的数据格式
- 修改 `X1.WebUI/src/services/imsConfigurationService.ts` 中的所有接口定义 - 修改 `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` 中的字段引用 - 修改 `X1.WebUI/src/pages/ims-configurations/IMSConfigurationsView.tsx` 中的字段引用
### 技术说明 ### 技术说明

Write Preview
Loading…
Cancel
Save