fix: display file error source name

packages/core/src/models/interfaces.ts

@@ -10,6 +10,7 @@ import {
   IPageConfigData,
   IImportSpecifierSourceData,
   IImportSpecifierData,
+  IFileError,
 } from '../types';
 import { TangoFile, TangoJsonFile } from './file';
 import { TangoRouteModule } from './route-module';
@@ -322,7 +323,7 @@ export interface IWorkspace {
   /**
    * 文件错误列表
    */
-  get fileErrors(): string[];
+  get fileErrors(): IFileError[];
   /**
    * 是否是合法的项目
    */

packages/core/src/models/workspace.ts

@@ -28,7 +28,7 @@ import { TangoNode } from './node';
 import { TangoJsModule } from './module';
 import { TangoFile, TangoJsonFile, TangoLessFile } from './file';
 import { IWorkspace, WorkspaceMode } from './interfaces';
-import { IFileConfig, FileType, ITangoConfigPackages, IPageConfigData } from '../types';
+import { IFileConfig, FileType, ITangoConfigPackages, IPageConfigData, IFileError } from '../types';
 import { SelectSource } from './select-source';
 import { DragSource } from './drag-source';
 import { TangoRouteModule } from './route-module';
@@ -238,10 +238,13 @@ export class Workspace extends EventTarget implements IWorkspace {
   }
 
   get fileErrors() {
-    const list: string[] = [];
+    const list: IFileError[] = [];
     this.files.forEach((file) => {
       if (file.isError) {
-        list.push(file.errorMessage);
+        list.push({
+          filename: file.filename,
+          errorMessage: file.errorMessage,
+        });
       }
     });
     return list;

packages/core/src/types.ts

@@ -57,6 +57,11 @@ export interface IFileConfig {
   type?: FileType;
 }
 
+export interface IFileError {
+  filename: string;
+  errorMessage: string;
+}
+
 /**
  * 视图节点数据类型
  */

packages/designer/src/components/files-error-overlay.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Box, css } from 'coral-system';
 import { observer, useWorkspace } from '@music163/tango-context';
 import { CloseOutlined } from '@ant-design/icons';
@@ -13,13 +13,8 @@ const errorMessageStyle = css`
  */
 export const FilesErrorOverlay = observer(() => {
   const [isVisible, setIsVisible] = useState<boolean>(true);
-  const [errors, setErrors] = useState<string[]>([]);
   const workspace = useWorkspace();
 
-  useEffect(() => {
-    setErrors(workspace.fileErrors);
-  }, [workspace.fileErrors]);
-
   const handleClose = () => {
     setIsVisible(false);
   };
@@ -55,8 +50,13 @@ export const FilesErrorOverlay = observer(() => {
           onClick={handleClose}
         />
         <Box css={errorMessageStyle}>
-          {errors.map((error, index) => (
-            <Box key={index}>{error}</Box>
+          {workspace.fileErrors.map((fileError) => (
+            <Box key={fileError.filename}>
+              <Box fontWeight="bold">{fileError.filename}</Box>
+              <Box as="code" display="block">
+                {fileError.errorMessage}
+              </Box>
+            </Box>
           ))}
         </Box>
       </Box>