Feature/lyy umi UI fix 0607 (#11250)

* feat(ui): 修复手动声明 routes 时的显示问题 * feat(ui): 修复手动声明 routes 时的显示问题 * feat(ui): routes label 增加自动换行 --------- Co-authored-by: yuyuehui.yyh <yuyuehui.yyh@digital-engine.com>
umijs · Jun 13, 2023 · c25f6e6 · c25f6e6
1 parent 526e23b
commit c25f6e6
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 9 deletions.
diff --git 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
@@ -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';
@@ -98,17 +99,18 @@ export const RouteChart: FC<IProps> = ({ routes, onNodeClick }) => {
     });
 
     graph.node((node) => {
-      const { id, depth } = node;
-      const label = 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];
 
       return {
         style: {
           fill: backgroud,
           stroke: color,
+          fontSize: 12,
         },
-        label,
+        label: superLongTextHandle(label, 96, 12),
         labelCfg: {
           position: 'center',
           offset: 5,

diff --git a/ui/components/routes/routeDrawer.tsx b/ui/components/routes/routeDrawer.tsx
@@ -70,14 +70,28 @@ export const RouteDrawer: React.FC<{
         mask={false}
       >
         <Wrapper>
+          {info.name ? (
+            <div className="info-item">
+              <h3>Name</h3>
+              <div className="label">{info.absPath}</div>
+            </div>
+          ) : null}
           <div className="info-item">
             <h3>RoutePath</h3>
             <div className="label">{info.absPath}</div>
           </div>
-          <div className="info-item">
-            <h3>FilePath</h3>
-            <div className="label">{info.__absFile || info.file}</div>
-          </div>
+          {info.__absFile || info.file ? (
+            <div className="info-item">
+              <h3>FilePath</h3>
+              <div className="label">{info.__absFile || info.file}</div>
+            </div>
+          ) : null}
+          {info.redirect ? (
+            <div className="info-item">
+              <h3>Redirect</h3>
+              <div className="label">{info.redirect}</div>
+            </div>
+          ) : null}
           <div className="info-item">
             <h3>CodeContent</h3>
             <div className="code-label">

diff --git 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
@@ -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/g6LongText.ts 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;
+};
diff --git 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: '',
+        absPath: '',
         isLayout: true,
         children: relations,
       },