From 08b0e9a6960e759be3d2da027cbcd401e3f2181b Mon Sep 17 00:00:00 2001 From: "yuyuehui.yyh" Date: Wed, 7 Jun 2023 17:34:11 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat(ui):=20=E4=BF=AE=E5=A4=8D=E6=89=8B?= =?UTF-8?q?=E5=8A=A8=E5=A3=B0=E6=98=8E=20routes=20=E6=97=B6=E7=9A=84?= =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/ant-design-pro/config/config.ts | 1 + ui/components/routes/routeChart.tsx | 7 +++++-- ui/components/routes/routeDrawer.tsx | 22 ++++++++++++++++++---- ui/hooks/useAppData.ts | 2 ++ ui/layouts/index.tsx | 1 - ui/utils/realizeRoutes.ts | 4 +++- 6 files changed, 29 insertions(+), 8 deletions(-) diff --git a/examples/ant-design-pro/config/config.ts b/examples/ant-design-pro/config/config.ts index 217378fdd27d..9537b4cf3432 100644 --- a/examples/ant-design-pro/config/config.ts +++ b/examples/ant-design-pro/config/config.ts @@ -338,4 +338,5 @@ export default defineConfig({ codeSplitting: { jsStrategy: 'granularChunks', }, + ui: {}, }); diff --git a/ui/components/routes/routeChart.tsx b/ui/components/routes/routeChart.tsx index 684ae0e0e086..906a8414006b 100644 --- a/ui/components/routes/routeChart.tsx +++ b/ui/components/routes/routeChart.tsx @@ -98,8 +98,11 @@ export const RouteChart: FC = ({ routes, onNodeClick }) => { }); graph.node((node) => { - const { id, depth } = node; - const label = id.split('/').slice(-1)[0]; + const { depth, id, absPath } = node; + // absPath 为空的话就取id, 适配 @@/global-layout + const label = + ((absPath as string) || '').split('/').slice(-1)[0] || + id.split('/').slice(-1)[0]; const { color, backgroud } = colorList[(depth as number) % colorList.length]; diff --git a/ui/components/routes/routeDrawer.tsx b/ui/components/routes/routeDrawer.tsx index 628222d9555b..8c3ff9c903c6 100644 --- a/ui/components/routes/routeDrawer.tsx +++ b/ui/components/routes/routeDrawer.tsx @@ -70,14 +70,28 @@ export const RouteDrawer: React.FC<{ mask={false} > + {info.name ? ( +
+

Name

+
{info.absPath}
+
+ ) : null}

RoutePath

{info.absPath}
-
-

FilePath

-
{info.__absFile || info.file}
-
+ {info.__absFile || info.file ? ( +
+

FilePath

+
{info.__absFile || info.file}
+
+ ) : null} + {info.redirect ? ( +
+

Redirect

+
{info.redirect}
+
+ ) : null}

CodeContent

diff --git a/ui/hooks/useAppData.ts b/ui/hooks/useAppData.ts index b6cae0ccca36..59526f529b33 100644 --- a/ui/hooks/useAppData.ts +++ b/ui/hooks/useAppData.ts @@ -2,6 +2,8 @@ import type { BuildResult } from '@umijs/bundler-utils/compiled/esbuild'; import { useQuery } from 'umi'; export interface IRoute { + name?: string; + redirect?: string; path: string; id: string; parentId?: string; diff --git a/ui/layouts/index.tsx b/ui/layouts/index.tsx index 32f50088f49d..f6f0f9bdf9af 100644 --- a/ui/layouts/index.tsx +++ b/ui/layouts/index.tsx @@ -5,7 +5,6 @@ import { Helmet, Outlet, styled } from 'umi'; const Wrapper = styled.div` display: flex; - border: 1px solid var(--subtle-color); height: 100%; aside { min-width: 200px; diff --git a/ui/utils/realizeRoutes.ts b/ui/utils/realizeRoutes.ts index 8c855f21b431..cd843f69311f 100644 --- a/ui/utils/realizeRoutes.ts +++ b/ui/utils/realizeRoutes.ts @@ -5,7 +5,7 @@ export interface IIRoute extends PartialIRoute { children: IIRoute[]; } -export const FAKE_ID = '__FEAKE_LAYOUT__'; +export const FAKE_ID = '__FAKE_LAYOUT__'; // 通过对象引用建立route间关系 export const realizeRoutes = (routes: IAppData['routes']): IIRoute[] => { @@ -55,6 +55,8 @@ export const realizeRoutes = (routes: IAppData['routes']): IIRoute[] => { return [ { id: FAKE_ID, + path: FAKE_ID, + absPath: FAKE_ID, isLayout: true, children: relations, }, From 63853e52a331e70abf61d491ae305cc3b704351e Mon Sep 17 00:00:00 2001 From: "yuyuehui.yyh" Date: Wed, 7 Jun 2023 17:47:36 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat(ui):=20=E4=BF=AE=E5=A4=8D=E6=89=8B?= =?UTF-8?q?=E5=8A=A8=E5=A3=B0=E6=98=8E=20routes=20=E6=97=B6=E7=9A=84?= =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/components/routes/routeChart.tsx | 7 ++----- ui/utils/realizeRoutes.ts | 4 ++-- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/ui/components/routes/routeChart.tsx b/ui/components/routes/routeChart.tsx index 906a8414006b..098c94a576f8 100644 --- a/ui/components/routes/routeChart.tsx +++ b/ui/components/routes/routeChart.tsx @@ -98,11 +98,8 @@ export const RouteChart: FC = ({ routes, onNodeClick }) => { }); graph.node((node) => { - const { depth, id, absPath } = node; - // absPath 为空的话就取id, 适配 @@/global-layout - const label = - ((absPath as string) || '').split('/').slice(-1)[0] || - id.split('/').slice(-1)[0]; + const { depth, absPath } = node; + const label = ((absPath as string) || '').split('/').slice(-1)[0] || '/'; const { color, backgroud } = colorList[(depth as number) % colorList.length]; diff --git a/ui/utils/realizeRoutes.ts b/ui/utils/realizeRoutes.ts index cd843f69311f..ac658bf4b12e 100644 --- a/ui/utils/realizeRoutes.ts +++ b/ui/utils/realizeRoutes.ts @@ -55,8 +55,8 @@ export const realizeRoutes = (routes: IAppData['routes']): IIRoute[] => { return [ { id: FAKE_ID, - path: FAKE_ID, - absPath: FAKE_ID, + path: '', + absPath: '', isLayout: true, children: relations, }, From f6f633200bc0a9ef9bf55aab2b02d69add44259c Mon Sep 17 00:00:00 2001 From: "yuyuehui.yyh" Date: Thu, 8 Jun 2023 10:36:13 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feat(ui):=20routes=20label=20=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E8=87=AA=E5=8A=A8=E6=8D=A2=E8=A1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/components/routes/routeChart.tsx | 4 +++- ui/utils/g6LongText.ts | 31 +++++++++++++++++++++++++++++ 2 files changed, 34 insertions(+), 1 deletion(-) create mode 100644 ui/utils/g6LongText.ts diff --git a/ui/components/routes/routeChart.tsx b/ui/components/routes/routeChart.tsx index 098c94a576f8..e1f6d8944ba2 100644 --- a/ui/components/routes/routeChart.tsx +++ b/ui/components/routes/routeChart.tsx @@ -1,5 +1,6 @@ import { modeColorMap } from '@/contants'; import { state as globalState } from '@/models/global'; +import { superLongTextHandle } from '@/utils/g6LongText'; import { IIRoute } from '@/utils/realizeRoutes'; import G6 from '@antv/g6'; import { FC, useEffect } from 'react'; @@ -107,8 +108,9 @@ export const RouteChart: FC = ({ routes, onNodeClick }) => { style: { fill: backgroud, stroke: color, + fontSize: 12, }, - label, + label: superLongTextHandle(label, 96, 12), labelCfg: { position: 'center', offset: 5, diff --git a/ui/utils/g6LongText.ts b/ui/utils/g6LongText.ts new file mode 100644 index 000000000000..3e192576ef0d --- /dev/null +++ b/ui/utils/g6LongText.ts @@ -0,0 +1,31 @@ +import G6 from '@antv/g6'; + +// G6换行符处理超长文本 +export const superLongTextHandle = ( + str: string, + maxWidth: number, + fontSize: number, +) => { + let currentWidth = 0; + let res = str; + // 区分汉字和字母 + const pattern = new RegExp('[\u4E00-\u9FA5]+'); + str.split('').forEach((letter, i) => { + if (currentWidth > maxWidth) return; + if (pattern.test(letter)) { + // 中文字符 + currentWidth += fontSize; + } else { + // 根据字体大小获取单个字母的宽度 + currentWidth += G6.Util.getLetterWidth(letter, fontSize); + } + if (currentWidth > maxWidth) { + res = `${str.slice(0, i)}\n${superLongTextHandle( + str.slice(i), + maxWidth, + fontSize, + )}`; + } + }); + return res; +};