mp-lens
Version:
微信小程序分析工具 (Unused Code, Dependencies, Visualization)
103 lines • 11.5 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.NodeDetails = NodeDetails;
const jsx_runtime_1 = require("preact/jsx-runtime");
const hooks_1 = require("preact/hooks");
const dependency_tree_processor_1 = require("../utils/dependency-tree-processor"); // UPDATED
const NodeDetails_module_css_1 = __importDefault(require("./NodeDetails.module.css")); // Import CSS Module
// Assign consistent colors to file types
function getFileTypeColor(fileType) {
// Map common file extensions to specific colors
const fileTypeColorMap = {
// Code files
js: '#F7DF1E', // JavaScript - yellow
ts: '#3178C6', // TypeScript - blue
jsx: '#61DAFB', // React - light blue
tsx: '#61DAFB', // React TypeScript - light blue
vue: '#42B883', // Vue - green
// Styles
css: '#264DE4', // CSS - blue
scss: '#CD6799', // SCSS - pink
less: '#1D365D', // LESS - dark blue
// Markup
html: '#E44D26', // HTML - orange
xml: '#F37C20', // XML - orange
json: '#1C59A5', // JSON - blue
// Images
png: '#A6D659', // green
jpg: '#E15241', // red
jpeg: '#E15241', // red
gif: '#9D67F8', // purple
svg: '#FFB13B', // yellow-orange
// Documents
md: '#083FA1', // Markdown - blue
pdf: '#F40F02', // PDF - red
// Config files
yml: '#7A348F', // YAML - purple
yaml: '#7A348F', // YAML - purple
toml: '#9C4221', // TOML - brown
// Misc
wxml: '#09BB07', // WeChat Mini Program - green
wxss: '#09BB07', // WeChat Mini Program - green
wxs: '#09BB07', // WeChat Mini Program - green
// Default
txt: '#A9A9A9', // Text - gray
};
return fileTypeColorMap[fileType] || '#4285F4'; // Default to blue
}
function NodeDetails({ node, fullGraphData, onChildNodeSelect }) {
var _a, _b, _c, _d, _e, _f, _g, _h;
const fileCount = ((_a = node.properties) === null || _a === void 0 ? void 0 : _a.fileCount) || 0;
const totalSize = ((_b = node.properties) === null || _b === void 0 ? void 0 : _b.totalSize) || 0;
const fileTypes = ((_c = node.properties) === null || _c === void 0 ? void 0 : _c.fileTypes) || {};
const sizeByType = ((_d = node.properties) === null || _d === void 0 ? void 0 : _d.sizeByType) || {};
const childrenIds = ((_e = node.children) === null || _e === void 0 ? void 0 : _e.map((c) => c.id)) || [];
const displayPath = ((_f = node.properties) === null || _f === void 0 ? void 0 : _f.basePath) || ((_g = node.properties) === null || _g === void 0 ? void 0 : _g.path);
// Calculate dependency counts for child nodes
const childDependencyCounts = (0, hooks_1.useMemo)(() => {
const counts = new Map();
if (!node.children || !fullGraphData || !fullGraphData.links)
return counts;
for (const link of fullGraphData.links) {
counts.set(link.target, (counts.get(link.target) || 0) + 1);
}
return counts;
}, [fullGraphData.links]); // Only depends on all links in the graph
// Calculate top file types by count
const topFileTypes = (0, hooks_1.useMemo)(() => {
return Object.entries(fileTypes).sort(([, countA], [, countB]) => countB - countA);
}, [fileTypes]);
// Calculate file type size distribution percentages
const sizeDistribution = (0, hooks_1.useMemo)(() => {
if (totalSize === 0)
return [];
return Object.entries(sizeByType)
.sort(([, sizeA], [, sizeB]) => sizeB - sizeA)
.map(([ext, size]) => ({
ext,
size: size,
percentage: Math.round((size / totalSize) * 100),
}));
}, [sizeByType, totalSize]);
// Get file type color by extension
const getColorForType = (ext) => {
return getFileTypeColor(ext);
};
return ((0, jsx_runtime_1.jsxs)("div", { className: NodeDetails_module_css_1.default.nodeDetails, children: [(0, jsx_runtime_1.jsxs)("div", { className: `${NodeDetails_module_css_1.default.detailsCard} ${NodeDetails_module_css_1.default.detailsHeader}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: NodeDetails_module_css_1.default.detailTitleArea, children: [(0, jsx_runtime_1.jsx)("div", { className: NodeDetails_module_css_1.default.nodeTypeBadge, children: node.type }), (0, jsx_runtime_1.jsx)("h2", { className: NodeDetails_module_css_1.default.nodeTitle, children: node.label || node.id }), displayPath && (0, jsx_runtime_1.jsx)("div", { className: NodeDetails_module_css_1.default.nodePath, children: displayPath })] }), (0, jsx_runtime_1.jsxs)("div", { className: NodeDetails_module_css_1.default.nodeStats, children: [fileCount > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: NodeDetails_module_css_1.default.nodeStatItem, children: [(0, jsx_runtime_1.jsx)("span", { className: NodeDetails_module_css_1.default.statValue, children: fileCount }), (0, jsx_runtime_1.jsx)("span", { className: NodeDetails_module_css_1.default.statLabel, children: "\u6587\u4EF6" })] })), totalSize > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: NodeDetails_module_css_1.default.nodeStatItem, children: [(0, jsx_runtime_1.jsx)("span", { className: NodeDetails_module_css_1.default.statValue, children: (0, dependency_tree_processor_1.formatBytes)(totalSize) }), (0, jsx_runtime_1.jsx)("span", { className: NodeDetails_module_css_1.default.statLabel, children: "\u603B\u5927\u5C0F" })] }))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: NodeDetails_module_css_1.default.detailsGrid, children: [topFileTypes.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: NodeDetails_module_css_1.default.detailsCard, children: [(0, jsx_runtime_1.jsx)("h3", { className: NodeDetails_module_css_1.default.cardTitle, children: "\u6587\u4EF6\u7C7B\u578B\u5206\u5E03" }), (0, jsx_runtime_1.jsx)("div", { className: `${NodeDetails_module_css_1.default.distributionList} ${NodeDetails_module_css_1.default.scrollableList}`, children: topFileTypes.map(([ext, count]) => {
const barWidth = (count / Math.max(1, ...topFileTypes.map(([, c]) => c))) * 100;
return ((0, jsx_runtime_1.jsxs)("div", { className: NodeDetails_module_css_1.default.distributionItem, children: [(0, jsx_runtime_1.jsxs)("span", { className: NodeDetails_module_css_1.default.distLabel, children: [".", ext] }), (0, jsx_runtime_1.jsx)("div", { className: NodeDetails_module_css_1.default.distBarContainer, children: (0, jsx_runtime_1.jsx)("div", { className: NodeDetails_module_css_1.default.distBar, style: {
width: `${barWidth}%`,
backgroundColor: getColorForType(ext),
} }) }), (0, jsx_runtime_1.jsx)("span", { className: NodeDetails_module_css_1.default.distValue, children: count })] }, ext));
}) })] })), sizeDistribution.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: NodeDetails_module_css_1.default.detailsCard, children: [(0, jsx_runtime_1.jsx)("h3", { className: NodeDetails_module_css_1.default.cardTitle, children: "\u4F53\u79EF\u5206\u5E03" }), (0, jsx_runtime_1.jsx)("div", { className: `${NodeDetails_module_css_1.default.distributionList} ${NodeDetails_module_css_1.default.scrollableList}`, children: sizeDistribution.map((item) => ((0, jsx_runtime_1.jsxs)("div", { className: NodeDetails_module_css_1.default.distributionItem, children: [(0, jsx_runtime_1.jsxs)("span", { className: NodeDetails_module_css_1.default.distLabel, children: [".", item.ext] }), (0, jsx_runtime_1.jsx)("div", { className: NodeDetails_module_css_1.default.distBarContainer, children: (0, jsx_runtime_1.jsx)("div", { className: NodeDetails_module_css_1.default.distBar, style: {
width: `${item.percentage}%`,
backgroundColor: getColorForType(item.ext),
} }) }), (0, jsx_runtime_1.jsxs)("span", { className: NodeDetails_module_css_1.default.distValue, children: [item.percentage, "%"] }), (0, jsx_runtime_1.jsxs)("span", { className: NodeDetails_module_css_1.default.distSubValue, children: ["(", (0, dependency_tree_processor_1.formatBytes)(item.size), ")"] })] }, item.ext))) })] })), childrenIds.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: `${NodeDetails_module_css_1.default.detailsCard} ${NodeDetails_module_css_1.default.childrenCard}`, children: [(0, jsx_runtime_1.jsxs)("h3", { className: NodeDetails_module_css_1.default.cardTitle, children: ["\u5B50\u8282\u70B9 (", childrenIds.length, ")"] }), (0, jsx_runtime_1.jsxs)("div", { className: NodeDetails_module_css_1.default.childrenTable, children: [(0, jsx_runtime_1.jsxs)("div", { className: NodeDetails_module_css_1.default.childHeader, children: [(0, jsx_runtime_1.jsx)("div", { className: NodeDetails_module_css_1.default.childTypeCol, children: "\u7C7B\u578B" }), (0, jsx_runtime_1.jsx)("div", { className: NodeDetails_module_css_1.default.childNameCol, children: "\u540D\u79F0" }), (0, jsx_runtime_1.jsx)("div", { className: NodeDetails_module_css_1.default.childFilesCol, children: "\u6587\u4EF6\u6570" }), (0, jsx_runtime_1.jsx)("div", { className: NodeDetails_module_css_1.default.childSizeCol, children: "\u5927\u5C0F" }), (0, jsx_runtime_1.jsx)("div", { className: NodeDetails_module_css_1.default.childDepCountCol, children: "\u88AB\u4F9D\u8D56\u6B21\u6570" })] }), (0, jsx_runtime_1.jsx)("div", { className: NodeDetails_module_css_1.default.childrenRows, children: (_h = node.children) === null || _h === void 0 ? void 0 : _h.map((child) => {
var _a, _b;
return ((0, jsx_runtime_1.jsxs)("div", { className: `${NodeDetails_module_css_1.default.childRow} ${NodeDetails_module_css_1.default.clickableRow}`, onClick: () => onChildNodeSelect(child.id), title: `跳转到依赖图: ${child.label || child.id}`, children: [(0, jsx_runtime_1.jsx)("div", { className: NodeDetails_module_css_1.default.childTypeCol, children: (0, jsx_runtime_1.jsx)("span", { className: NodeDetails_module_css_1.default.childTypeBadge, children: child.type }) }), (0, jsx_runtime_1.jsx)("div", { className: NodeDetails_module_css_1.default.childNameCol, title: child.id, children: child.label || child.id }), (0, jsx_runtime_1.jsx)("div", { className: NodeDetails_module_css_1.default.childFilesCol, children: ((_a = child.properties) === null || _a === void 0 ? void 0 : _a.fileCount) ? `${child.properties.fileCount} 文件` : '-' }), (0, jsx_runtime_1.jsx)("div", { className: NodeDetails_module_css_1.default.childSizeCol, children: ((_b = child.properties) === null || _b === void 0 ? void 0 : _b.totalSize) ? (0, dependency_tree_processor_1.formatBytes)(child.properties.totalSize) : '-' }), (0, jsx_runtime_1.jsx)("div", { className: NodeDetails_module_css_1.default.childDepCountCol, children: childDependencyCounts.get(child.id) || 0 })] }, child.id));
}) })] })] }))] })] }));
}
//# sourceMappingURL=NodeDetails.js.map