[PR #78] [CLOSED] Feat: Model Mapping Diagram for Visualization #93

New issue

Closed

opened 2026-02-27 16:42:31 +03:00 by kerem · 0 comments

kerem commented

2026-02-27 16:42:31 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/router-for-me/Cli-Proxy-API-Management-Center/pull/78
Author: @thanhtunguet
Created: 1/31/2026
Status: ❌ Closed

Base: main ← Head: main

📝 Commits (3)

ac45d13 Resize the modal with max-width = 960 to improve visibility
0a5f1c9 feat(modelAlias): add ModelMappingDiagram component and related styles for visualizing model alias mappings
cb2288b feat(modelAlias): enhance ModelMappingDiagram with i18n support and improve alias handling

📊 Changes

9 files changed (+1344 additions, -68 deletions)

View changed files

➕ src/components/modelAlias/ModelMappingDiagram.module.scss (+249 -0)
➕ src/components/modelAlias/ModelMappingDiagram.tsx (+673 -0)
➕ src/components/modelAlias/index.ts (+2 -0)
📝 src/components/ui/Modal.tsx (+19 -4)
📝 src/i18n/locales/en.json (+20 -0)
📝 src/i18n/locales/zh-CN.json (+20 -0)
📝 src/pages/AuthFilesPage.module.scss (+95 -6)
📝 src/pages/AuthFilesPage.tsx (+261 -57)
📝 src/services/api/authFiles.ts (+5 -1)

📄 Description

When using the dashboard, I found it difficult to configure mappings with the current UI due to the following reasons:

The modal is too small, making it hard to clearly see model IDs
There is no clear overview of mappings when multiple model providers are involved

Therefore, I made the following changes:

Increased the modal’s max width to 960px, which is more suitable for desktop screens
Added a diagram that visualizes the mapping between models from all providers and their corresponding aliases, allowing quick drag-and-drop alias creation

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/router-for-me/Cli-Proxy-API-Management-Center/pull/78 **Author:** [@thanhtunguet](https://github.com/thanhtunguet) **Created:** 1/31/2026 **Status:** ❌ Closed **Base:** `main` ← **Head:** `main` --- ### 📝 Commits (3) - [`ac45d13`](https://github.com/router-for-me/Cli-Proxy-API-Management-Center/commit/ac45d133fb99e356e1b13e299696f0027358db4d) Resize the modal with max-width = 960 to improve visibility - [`0a5f1c9`](https://github.com/router-for-me/Cli-Proxy-API-Management-Center/commit/0a5f1c9d8cc835820a06582200b24e89f4b932cb) feat(modelAlias): add ModelMappingDiagram component and related styles for visualizing model alias mappings - [`cb2288b`](https://github.com/router-for-me/Cli-Proxy-API-Management-Center/commit/cb2288b1dc16b92a1ba07475a40d65982106c458) feat(modelAlias): enhance ModelMappingDiagram with i18n support and improve alias handling ### 📊 Changes **9 files changed** (+1344 additions, -68 deletions) <details> <summary>View changed files</summary> ➕ `src/components/modelAlias/ModelMappingDiagram.module.scss` (+249 -0) ➕ `src/components/modelAlias/ModelMappingDiagram.tsx` (+673 -0) ➕ `src/components/modelAlias/index.ts` (+2 -0) 📝 `src/components/ui/Modal.tsx` (+19 -4) 📝 `src/i18n/locales/en.json` (+20 -0) 📝 `src/i18n/locales/zh-CN.json` (+20 -0) 📝 `src/pages/AuthFilesPage.module.scss` (+95 -6) 📝 `src/pages/AuthFilesPage.tsx` (+261 -57) 📝 `src/services/api/authFiles.ts` (+5 -1) </details> ### 📄 Description When using the dashboard, I found it difficult to configure mappings with the current UI due to the following reasons: - The modal is too small, making it hard to clearly see model IDs - There is no clear overview of mappings when multiple model providers are involved Therefore, I made the following changes: - Increased the modal’s max width to 960px, which is more suitable for desktop screens - Added a diagram that visualizes the mapping between models from all providers and their corresponding aliases, allowing quick drag-and-drop alias creation <img width="1503" height="491" alt="Screenshot 2026-01-31 at 14 50 31" src="https://github.com/user-attachments/assets/d3e3dd4a-e7c3-4804-a04f-660d407b4700" /> <img width="1505" height="490" alt="Screenshot 2026-01-31 at 14 50 41" src="https://github.com/user-attachments/assets/54370939-1b74-4e28-adf6-a3e04da236b3" /> <img width="961" height="570" alt="Screenshot 2026-01-31 at 14 34 08" src="https://github.com/user-attachments/assets/c94f8e34-1f84-4ad3-8e11-eae6abe07697" /> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>