mepiii/devlens
GitHub: mepiii/devlens
一款基于纯浏览器端 TypeScript ML 引擎的代码分析平台，无需 Python 或服务端即可计算圈复杂度、检测重复代码并预测技术债务。
Stars: 0 | Forks: 0
# DevLens
基于客户端 ML 技术的代码分析平台。计算圈复杂度，检测重复组件，评估设计 token 的一致性，并预测技术债务成本——全部在浏览器中完成，零 Python 依赖。
## 概述
使用纯 TypeScript ML 引擎直接在浏览器中分析源代码的 AST。支持 GitHub 仓库导入和本地文件夹上传。使用决策树模型、Jaccard 相似度和 SHAP 归因计算圈复杂度、耦合指数、设计 token 一致性和技术债务成本——无需任何服务端处理。
## 核心架构
```
flowchart LR
User -->|imports| Frontend["Vite SPA (TypeScript)"]
Frontend -->|GitHub API proxy| Express["Express server.ts"]
Frontend -->|parses| AST["AST Parser"]
Frontend -->|features| Engine["ML Engine"]
Engine -->|complexity| Cyclo["Cyclomatic Analyzer"]
Engine -->|duplicates| Jaccard["Jaccard Similarity"]
Engine -->|debt| SHAP["SHAP Attribution"]
Engine -->|tokens| Design["Token Consistency"]
Frontend -->|renders| Dashboard["Dashboard Views"]
```
## 系统组件
| 组件 | 职责 |
|---|---|
| `src/lib/mlEngine.ts` | 客户端 ML 引擎 — 决策树、Jaccard、SHAP |
| `src/lib/projectImporter.ts` | GitHub API 和本地文件系统导入 |
| `src/App.tsx` | 主外壳和状态管理器 |
| `src/components/` | Dashboard、Scan、Import、CodeQuality、DevLensAssistant 视图 |
| `server.ts` | Express 后端 — GitHub API 代理和静态服务 |
| `src/types.ts` | 共享的 TypeScript 接口 |
## 仓库布局
| 目录 | 用途 |
|---|---|
| `src/lib/` | ML 引擎和项目导入器 |
| `src/components/` | UI 视图组件 |
| `src/` | App 外壳、类型、入口点 |
| `server.ts` | Express 开发/生产服务器 |
## 技术栈
| 层级 | 技术 | 用途 |
|---|---|---|
| 语言 | TypeScript | 类型安全的实现 |
| 构建 | Vite | Bundler 和开发服务器 |
| 运行时 | Bun / Node.js | 执行环境 |
| 后端 | Express | GitHub API 代理、静态服务 |
| ML | 纯 TypeScript | 决策树、Jaccard、SHAP |
| UI | React | 组件框架 |
## 环境要求
- Node.js 18+ 或 Bun
- npm 或 bun
## 配置
| 文件 | 用途 |
|---|---|
| `package.json` | 依赖和脚本 |
| `vite.config.ts` | Vite bundler 配置 |
| `tsconfig.json` | TypeScript 编译器选项 |
| `server.ts` | Express 服务器配置 |
| `.env.example` | 环境变量模板 |
## 快速开始
```
cd devlens
npm install
cp .env.example .env
npm run dev
```
打开 `http://localhost:3000`
## 开发
```
npm run dev # Vite dev server + Express
npm run build # Production build (Vite + esbuild)
npm run start # Production server
```
## 请求 / 数据流
```
sequenceDiagram
participant App
participant Importer
participant MLEngine
participant Dashboard
User->>App: Import GitHub repo
App->>Importer: Fetch repository files
Importer-->>App: Source code tree
App->>MLEngine: Parse ASTs, extract features
MLEngine->>MLEngine: Compute complexity, Jaccard, SHAP
MLEngine-->>App: Feature matrix + predictions
App->>Dashboard: Render quality scores, debt estimates
Dashboard-->>User: Interactive analysis views
```
标签：Apex, AST解析, MITM代理, TypeScript, 云安全监控, 代码质量分析, 前端开发工具, 安全插件, 技术债务评估, 机器学习, 自动化攻击, 静态分析