chuan/Cli-Proxy-API-Management-Center
1
0
Fork 0
mirror of https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git synced 2026-02-20 03:30:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(layout): add scroll container for improved responsiveness and adjust container styles

Browse Source
This commit is contained in:
LTbinglingfeng
2026-02-05 00:23:18 +08:00
parent 759e369d42
commit 9887a78889
2 changed files with 85 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/modelAlias/ModelMappingDiagram.module.scss
View File

@@ -1,13 +1,26 @@
@use '../../styles/variables' as *; @use '../../styles/variables' as *;
.container { .scrollContainer {
display: flex;
position: relative;
width: 100%; width: 100%;
overflow-x: auto;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
}
.container {
display: inline-flex;
position: relative;
min-width: 100%;
min-height: 300px; min-height: 300px;
justify-content: space-between; justify-content: space-between;
padding: 20px 0; padding: 20px 0;
user-select: none; user-select: none;
@media (max-width: 768px) {
justify-content: flex-start;
gap: 16px;
padding: 12px 0;
}
} }
// SVG layer for connection lines (behind columns so links are visible) // SVG layer for connection lines (behind columns so links are visible)
@@ -320,4 +333,4 @@
&:hover { &:hover {
background: var(--bg-error-light); background: var(--bg-error-light);
} }
} }

134
src/components/modelAlias/ModelMappingDiagram.tsx
View File

@@ -430,73 +430,75 @@ export const ModelMappingDiagram = forwardRef<ModelMappingDiagramRef, ModelMappi
return ( return (
<div <div className={[styles.scrollContainer, className].filter(Boolean).join(' ')}>
className={[styles.container, className].filter(Boolean).join(' ')} <div
ref={containerRef} className={styles.container}
onContextMenu={(e) => { ref={containerRef}
e.preventDefault(); onContextMenu={(e) => {
e.stopPropagation(); e.preventDefault();
handleContextMenu(e, 'background'); e.stopPropagation();
}} handleContextMenu(e, 'background');
> }}
<svg className={styles.connections}> >
{lines.map((line) => ( <svg className={styles.connections}>
<path {lines.map((line) => (
key={line.id} <path
d={line.path} key={line.id}
stroke={line.color} d={line.path}
strokeOpacity={isDark ? 0.4 : 0.3} stroke={line.color}
/> strokeOpacity={isDark ? 0.4 : 0.3}
))} />
</svg> ))}
</svg>
<ProviderColumn <ProviderColumn
providerNodes={providerNodes} providerNodes={providerNodes}
collapsedProviders={collapsedProviders} collapsedProviders={collapsedProviders}
getProviderColor={getProviderColor} getProviderColor={getProviderColor}
providerRefs={providerRefs} providerRefs={providerRefs}
onToggleCollapse={toggleProviderCollapse} onToggleCollapse={toggleProviderCollapse}
onContextMenu={(e, type, data) => handleContextMenu(e, type, data)} onContextMenu={(e, type, data) => handleContextMenu(e, type, data)}
label={t('oauth_model_alias.diagram_providers')} label={t('oauth_model_alias.diagram_providers')}
expandLabel={t('oauth_model_alias.diagram_expand')} expandLabel={t('oauth_model_alias.diagram_expand')}
collapseLabel={t('oauth_model_alias.diagram_collapse')} collapseLabel={t('oauth_model_alias.diagram_collapse')}
/> />
<SourceColumn <SourceColumn
providerNodes={providerNodes} providerNodes={providerNodes}
collapsedProviders={collapsedProviders} collapsedProviders={collapsedProviders}
sourceRefs={sourceRefs} sourceRefs={sourceRefs}
getProviderColor={getProviderColor} getProviderColor={getProviderColor}
draggedSource={draggedSource} draggedSource={draggedSource}
dropTargetSource={dropTargetSource} dropTargetSource={dropTargetSource}
draggable={!!onUpdate} draggable={!!onUpdate}
onDragStart={handleDragStart} onDragStart={handleDragStart}
onDragEnd={() => { onDragEnd={() => {
setDraggedSource(null); setDraggedSource(null);
setDropTargetAlias(null); setDropTargetAlias(null);
}} }}
onDragOver={handleDragOverSource} onDragOver={handleDragOverSource}
onDragLeave={handleDragLeaveSource} onDragLeave={handleDragLeaveSource}
onDrop={handleDropOnSource} onDrop={handleDropOnSource}
onContextMenu={(e, type, data) => handleContextMenu(e, type, data)} onContextMenu={(e, type, data) => handleContextMenu(e, type, data)}
label={t('oauth_model_alias.diagram_source_models')} label={t('oauth_model_alias.diagram_source_models')}
/> />
<AliasColumn <AliasColumn
aliasNodes={aliasNodes} aliasNodes={aliasNodes}
aliasRefs={aliasRefs} aliasRefs={aliasRefs}
dropTargetAlias={dropTargetAlias} dropTargetAlias={dropTargetAlias}
draggedAlias={draggedAlias} draggedAlias={draggedAlias}
draggable={!!onUpdate} draggable={!!onUpdate}
onDragStart={handleDragStartAlias} onDragStart={handleDragStartAlias}
onDragEnd={() => { onDragEnd={() => {
setDraggedAlias(null); setDraggedAlias(null);
setDropTargetSource(null); setDropTargetSource(null);
}} }}
onDragOver={handleDragOver} onDragOver={handleDragOver}
onDragLeave={handleDragLeave} onDragLeave={handleDragLeave}
onDrop={handleDrop} onDrop={handleDrop}
onContextMenu={(e, type, data) => handleContextMenu(e, type, data)} onContextMenu={(e, type, data) => handleContextMenu(e, type, data)}
label={t('oauth_model_alias.diagram_aliases')} label={t('oauth_model_alias.diagram_aliases')}
/> />
</div>
<DiagramContextMenu <DiagramContextMenu
contextMenu={contextMenu} contextMenu={contextMenu}