arthas-jfr-frontend/
├── src/
│   ├── components/          # React 组件
│   │   ├── FileUpload/      # 文件上传组件
│   │   │   ├── FileUpload.tsx
│   │   │   └── index.tsx
│   │   ├── FileTable/       # 文件列表组件
│   │   │   ├── FileTable.tsx
│   │   │   └── index.tsx
│   │   └── FlameGraph/      # 火焰图组件
│   │       ├── FlameStats.tsx
│   │       └── ReactFlameGraphWrapper.tsx
│   ├── pages/               # 页面组件
│   │   ├── Home/            # 首页
│   │   │   ├── Home.tsx
│   │   │   └── index.tsx
│   │   └── Analysis/        # 分析页面
│   │       ├── Analysis.tsx
│   │       └── index.tsx
│   ├── layouts/             # 布局组件
│   │   └── BasicLayout.tsx
│   ├── services/            # API 服务
│   │   ├── api.ts           # API 基础配置
│   │   ├── fileService.ts   # 文件服务
│   │   ├── jfr.ts           # JFR 相关服务
│   │   └── jfrService.ts    # JFR 分析服务
│   ├── stores/              # 状态管理
│   │   └── FileContext.tsx  # 文件上下文
│   ├── hooks/               # 自定义 Hooks
│   │   └── useWindowSize.ts
│   ├── utils/               # 工具函数
│   │   ├── color.ts         # 颜色工具
│   │   ├── format.ts        # 格式化工具
│   │   └── formatFlamegraph.ts # 火焰图格式化
│   ├── App.tsx              # 根组件
│   ├── main.tsx             # 入口文件
│   └── global.less          # 全局样式
├── public/                  # 静态资源
├── dist/                    # 构建输出目录
├── index.html               # HTML 模板
├── package.json             # 依赖配置
├── vite.config.ts           # Vite 配置
├── tsconfig.json            # TypeScript 配置
└── tsconfig.node.json       # Node.js TypeScript 配置

cd arthas/labs/arthas-jfr-frontend
npm install

// vite.config.ts
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8200',
        changeOrigin: true,
        secure: false
      }
    }
  }
})

npm run dev

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 类型检查
npx tsc --noEmit

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

// vite.config.ts
export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    proxy: {
      '/api': 'http://localhost:8200'
    }
  },
  build: {
    outDir: 'dist',
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          antd: ['antd', '@ant-design/icons']
        }
      }
    }
  }
})

{
  "compilerOptions": {
    "target": "ES2020",
    "jsx": "react-jsx",
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

// src/pages/NewPage/NewPage.tsx
import React from 'react';

const NewPage: React.FC = () => {
  return <div>New Page</div>;
};

export default NewPage;

// src/components/NewComponent/NewComponent.tsx
import React from 'react';
import { Button } from 'antd';

interface NewComponentProps {
  title: string;
  onClick: () => void;
}

const NewComponent: React.FC<NewComponentProps> = ({ title, onClick }) => {
  return <Button onClick={onClick}>{title}</Button>;
};

export default NewComponent;

// src/services/newService.ts
import { api } from './api';

export const newService = {
  getData: () => api.get('/new-endpoint'),
  postData: (data: any) => api.post('/new-endpoint', data)
};