rn-bundle-analyzer 1.1.0

package/src/templates/analyse-app.js

@@ -0,0 +1,988 @@
+        // 全局数据存储
+        let packageData = null;
+        let treeData = null;
+        let inverseDependencyData = null;
+        let filteredFiles = [];
+        let filteredDependencies = [];
+        let currentPage = 1;
+        let currentDepPage = 1;
+        const itemsPerPage = 50;
+        const supportedLanguages = ['zh', 'en'];
+        let currentLanguage = localStorage.getItem('analyse-language') || 'zh';
+
+        const emptyPackageData = {
+            buildInfo: { totalFiles: 0, totalSize: 0 },
+            fileTypeStats: {},
+            files: [],
+        };
+        const emptyTreeData = { pathAnalyse: [] };
+        const emptyInverseData = {
+            summary: { totalFiles: 0, totalDependencies: 0, averageDependencies: 0, mostDependedFiles: [] },
+            inverseDependencies: [],
+        };
+
+        const i18nMessages = {
+            zh: {
+                pageTitle: 'RN 包分析结果展示',
+                headerTitle: 'RN 包分析结果',
+                headerSubtitle: 'React Native 项目包大小分析与可视化',
+                totalFiles: '总文件数',
+                totalSize: '总大小',
+                tabFiles: '文件列表视图',
+                tabTree: '目录树视图',
+                tabDependencies: '反向依赖分析',
+                allFileTypes: '所有文件类型',
+                sortSizeDesc: '大小 (大到小)',
+                sortSizeAsc: '大小 (小到大)',
+                sortNameAsc: '名称 (A-Z)',
+                sortNameDesc: '名称 (Z-A)',
+                colFilePath: '文件路径',
+                colSize: '大小',
+                colType: '类型',
+                colModified: '修改时间',
+                colInverseDeps: '反向依赖',
+                show: '显示',
+                itemsSepA: ' 项，共 ',
+                itemsSepB: ' 项',
+                prevPage: '上一页',
+                nextPage: '下一页',
+                expandAll: '全部展开',
+                collapseAll: '全部折叠',
+                totalDependencyRelations: '总依赖关系数',
+                avgDependencies: '平均依赖数',
+                maxDependencies: '最高依赖数',
+                topDepsTitle: '热门依赖文件 Top 10',
+                sortDepsDesc: '依赖数 (高到低)',
+                sortDepsAsc: '依赖数 (低到高)',
+                sortFileNameAsc: '文件名 (A-Z)',
+                sortFileNameDesc: '文件名 (Z-A)',
+                allFiles: '所有文件',
+                srcFiles: '源码文件',
+                dependencyPackageFiles: '依赖包文件',
+                highDependencyFiles: '高依赖文件 (>100)',
+                colDependentCount: '被依赖次数',
+                colAction: '操作',
+                searchFilesPlaceholder: '搜索文件名或路径...',
+                searchTreePlaceholder: '搜索目录或文件...',
+                searchDepPlaceholder: '搜索文件路径...',
+                unknown: '未知',
+                viewInverseDependencies: '查看反向依赖',
+                noDependencies: '无依赖',
+                viewDependencies: '查看依赖',
+                modalTitle: '{fileName} 的反向依赖关系',
+                noDependentsMessage: '此文件没有被其他文件依赖',
+                dependedByCount: '共 {count} 个文件依赖此文件',
+                moreDependents: '还有 {count} 个依赖文件未显示...',
+            },
+            en: {
+                pageTitle: 'RN Package Analysis Report',
+                headerTitle: 'RN Package Analysis',
+                headerSubtitle: 'Bundle size analysis and visualization for React Native projects',
+                totalFiles: 'Total Files',
+                totalSize: 'Total Size',
+                tabFiles: 'File List View',
+                tabTree: 'Directory Tree View',
+                tabDependencies: 'Inverse Dependencies',
+                allFileTypes: 'All File Types',
+                sortSizeDesc: 'Size (High to Low)',
+                sortSizeAsc: 'Size (Low to High)',
+                sortNameAsc: 'Name (A-Z)',
+                sortNameDesc: 'Name (Z-A)',
+                colFilePath: 'File Path',
+                colSize: 'Size',
+                colType: 'Type',
+                colModified: 'Modified Time',
+                colInverseDeps: 'Inverse Dependencies',
+                show: 'Showing',
+                itemsSepA: ' items, total ',
+                itemsSepB: ' items',
+                prevPage: 'Prev',
+                nextPage: 'Next',
+                expandAll: 'Expand All',
+                collapseAll: 'Collapse All',
+                totalDependencyRelations: 'Total Dependency Relations',
+                avgDependencies: 'Average Dependencies',
+                maxDependencies: 'Max Dependencies',
+                topDepsTitle: 'Top 10 Most Depended Files',
+                sortDepsDesc: 'Dependents (High to Low)',
+                sortDepsAsc: 'Dependents (Low to High)',
+                sortFileNameAsc: 'Filename (A-Z)',
+                sortFileNameDesc: 'Filename (Z-A)',
+                allFiles: 'All Files',
+                srcFiles: 'Source Files',
+                dependencyPackageFiles: 'Dependency Package Files',
+                highDependencyFiles: 'High Dependency Files (>100)',
+                colDependentCount: 'Dependents',
+                colAction: 'Action',
+                searchFilesPlaceholder: 'Search by file name or path...',
+                searchTreePlaceholder: 'Search directories or files...',
+                searchDepPlaceholder: 'Search file path...',
+                unknown: 'Unknown',
+                viewInverseDependencies: 'View inverse dependencies',
+                noDependencies: 'No dependencies',
+                viewDependencies: 'View dependencies',
+                modalTitle: 'Inverse dependencies of {fileName}',
+                noDependentsMessage: 'No files depend on this file',
+                dependedByCount: '{count} files depend on this file',
+                moreDependents: '{count} more dependent files are hidden...',
+            }
+        };
+
+        // 工具函数
+        function t(key, params = {}) {
+            const lang = supportedLanguages.includes(currentLanguage) ? currentLanguage : 'zh';
+            const fallback = i18nMessages.zh[key] || key;
+            const message = (i18nMessages[lang] && i18nMessages[lang][key]) || fallback;
+            return message.replace(/\{(\w+)\}/g, (_, token) => {
+                return params[token] !== undefined ? String(params[token]) : '';
+            });
+        }
+
+        function updateLanguageToggleState() {
+            document.querySelectorAll('.lang-toggle-btn').forEach((button) => {
+                button.classList.toggle('active', button.dataset.lang === currentLanguage);
+            });
+        }
+
+        function applyI18n() {
+            document.documentElement.lang = currentLanguage === 'en' ? 'en' : 'zh-CN';
+
+            document.querySelectorAll('[data-i18n]').forEach((node) => {
+                const key = node.getAttribute('data-i18n');
+                if (!key) return;
+                node.textContent = t(key);
+            });
+
+            document.querySelectorAll('[data-i18n-placeholder]').forEach((node) => {
+                const key = node.getAttribute('data-i18n-placeholder');
+                if (!key) return;
+                node.setAttribute('placeholder', t(key));
+            });
+        }
+
+        function setLanguage(lang) {
+            if (!supportedLanguages.includes(lang)) return;
+            currentLanguage = lang;
+            localStorage.setItem('analyse-language', lang);
+            updateLanguageToggleState();
+            applyI18n();
+            updateFilesTable();
+            updateDependenciesTable();
+        }
+
+        function formatFileSize(bytes) {
+            if (bytes === 0) return '0 B';
+            const k = 1024;
+            const sizes = ['B', 'KB', 'MB', 'GB'];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+        }
+
+        function formatDate(dateString) {
+            const date = new Date(dateString);
+            const locale = currentLanguage === 'en' ? 'en-US' : 'zh-CN';
+            return date.toLocaleDateString(locale) + ' ' + date.toLocaleTimeString(locale, { hour12: false });
+        }
+
+        function getFileExtension(filename) {
+            const lastDot = filename.lastIndexOf('.');
+            return lastDot > 0 ? filename.substring(lastDot) : '';
+        }
+
+        function getFileName(path) {
+            return path.split('/').pop();
+        }
+
+        function escapeForSingleQuoteJsString(value) {
+            return String(value)
+                .replace(/\\/g, '\\\\')
+                .replace(/'/g, "\\'");
+        }
+
+        // 数据加载和初始化
+        async function loadData() {
+            try {
+                packageData = window.packageAnalyseData || null;
+                treeData = window.treeAnalyseData || null;
+
+                // 加载反向依赖数据
+                inverseDependencyData = window.inverseDependencyData;
+
+                if (!packageData || !packageData.buildInfo || !Array.isArray(packageData.files)) {
+                    throw new Error('packageAnalyseData 数据缺失或格式不正确');
+                }
+                if (!treeData || !Array.isArray(treeData.pathAnalyse)) {
+                    throw new Error('treeAnalyseData 数据缺失或格式不正确');
+                }
+
+                initializeApp();
+            } catch (error) {
+                console.error('Error loading data:', error);
+                packageData = emptyPackageData;
+                treeData = emptyTreeData;
+                inverseDependencyData = emptyInverseData;
+                initializeApp();
+            }
+        }
+
+        // 应用初始化
+        function initializeApp() {
+            if (!supportedLanguages.includes(currentLanguage)) {
+                currentLanguage = 'zh';
+            }
+
+            applyI18n();
+            updateLanguageToggleState();
+            updateHeader();
+            setupEventListeners();
+            initializeFilesView();
+            initializeTreeView();
+            initializeDependenciesView();
+
+
+            // 初始化图标
+            lucide.createIcons();
+        }
+
+        // 更新头部信息
+        function updateHeader() {
+            const totalFiles = packageData?.buildInfo?.totalFiles || 0;
+            const totalSize = packageData?.buildInfo?.totalSize || 0;
+            document.getElementById('total-files').textContent = totalFiles.toLocaleString();
+            document.getElementById('total-size').textContent = formatFileSize(totalSize);
+        }
+
+        // 设置事件监听器
+        function setupEventListeners() {
+            // Tab切换
+            document.querySelectorAll('.tab-button').forEach(button => {
+                button.addEventListener('click', () => {
+                    const tabName = button.dataset.tab;
+                    switchTab(tabName);
+                });
+            });
+
+            // 搜索功能
+            document.getElementById('search-input').addEventListener('input', debounce(handleSearch, 300));
+            document.getElementById('tree-search').addEventListener('input', debounce(handleTreeSearch, 300));
+
+            // 树形控制按钮
+            document.getElementById('expand-all-btn').addEventListener('click', expandAllNodes);
+            document.getElementById('collapse-all-btn').addEventListener('click', collapseAllNodes);
+
+            // 筛选和排序
+            document.getElementById('extension-filter').addEventListener('change', handleFilter);
+            document.getElementById('sort-select').addEventListener('change', handleSort);
+
+            // 分页
+            document.getElementById('prev-page').addEventListener('click', () => changePage(-1));
+            document.getElementById('next-page').addEventListener('click', () => changePage(1));
+
+            // 反向依赖功能
+            document.getElementById('dep-search-input').addEventListener('input', debounce(handleDepSearch, 300));
+            document.getElementById('dep-sort-select').addEventListener('change', handleDepSort);
+            document.getElementById('dep-filter-select').addEventListener('change', handleDepFilter);
+            document.getElementById('dep-prev-page').addEventListener('click', () => changeDepPage(-1));
+            document.getElementById('dep-next-page').addEventListener('click', () => changeDepPage(1));
+
+            document.querySelectorAll('.lang-toggle-btn').forEach((button) => {
+                button.addEventListener('click', () => {
+                    setLanguage(button.dataset.lang);
+                });
+            });
+        }
+
+        // 防抖函数
+        function debounce(func, wait) {
+            let timeout;
+            return function executedFunction(...args) {
+                const later = () => {
+                    clearTimeout(timeout);
+                    func(...args);
+                };
+                clearTimeout(timeout);
+                timeout = setTimeout(later, wait);
+            };
+        }
+
+        // Tab切换
+        function switchTab(tabName) {
+            if (!tabName) return;
+            // 更新按钮状态
+            document.querySelectorAll('.tab-button').forEach(btn => {
+                btn.classList.remove('active', 'border-primary', 'text-primary');
+                btn.classList.add('border-transparent', 'text-muted-foreground');
+            });
+
+            const activeBtn = document.querySelector(`[data-tab="${tabName}"]`);
+            if (!activeBtn) return;
+            activeBtn.classList.add('active', 'border-primary', 'text-primary');
+            activeBtn.classList.remove('border-transparent', 'text-muted-foreground');
+
+            // 切换内容
+            document.querySelectorAll('.tab-content').forEach(content => {
+                content.classList.add('hidden');
+            });
+            const activeTab = document.getElementById(`${tabName}-tab`);
+            if (activeTab) activeTab.classList.remove('hidden');
+
+            // 重新初始化图标
+            lucide.createIcons();
+        }
+
+        // 文件视图初始化
+        function initializeFilesView() {
+            // 初始化扩展名过滤器
+            const extensions = Object.keys(packageData?.fileTypeStats || {});
+            const filterSelect = document.getElementById('extension-filter');
+            filterSelect.innerHTML = `<option value="" data-i18n="allFileTypes">${t('allFileTypes')}</option>`;
+            extensions.forEach(ext => {
+                const option = document.createElement('option');
+                option.value = ext;
+                option.textContent = `${ext} (${packageData.fileTypeStats[ext].count})`;
+                filterSelect.appendChild(option);
+            });
+
+            // 初始化文件列表
+            filteredFiles = Array.isArray(packageData?.files) ? [...packageData.files] : [];
+            updateFilesTable();
+        }
+
+        // 搜索处理
+        function handleSearch() {
+            const searchTerm = document.getElementById('search-input').value.toLowerCase();
+            const extensionFilter = document.getElementById('extension-filter').value;
+
+            const files = Array.isArray(packageData?.files) ? packageData.files : [];
+            filteredFiles = files.filter(file => {
+                const matchesSearch = file.path.toLowerCase().includes(searchTerm);
+                const matchesExtension = !extensionFilter || file.extension === extensionFilter;
+                return matchesSearch && matchesExtension;
+            });
+
+            currentPage = 1;
+            updateFilesTable();
+        }
+
+        // 筛选处理
+        function handleFilter() {
+            handleSearch(); // 重新应用所有筛选条件
+        }
+
+        // 排序处理
+        function handleSort() {
+            const sortValue = document.getElementById('sort-select').value;
+
+            filteredFiles.sort((a, b) => {
+                switch (sortValue) {
+                    case 'size-desc':
+                        return b.size - a.size;
+                    case 'size-asc':
+                        return a.size - b.size;
+                    case 'name-asc':
+                        return a.path.localeCompare(b.path);
+                    case 'name-desc':
+                        return b.path.localeCompare(a.path);
+                    default:
+                        return 0;
+                }
+            });
+
+            updateFilesTable();
+        }
+
+        // 更新文件表格
+        function updateFilesTable() {
+            const tbody = document.getElementById('files-table-body');
+            const startIndex = (currentPage - 1) * itemsPerPage;
+            const endIndex = startIndex + itemsPerPage;
+            const pageFiles = filteredFiles.slice(startIndex, endIndex);
+            const maxFileSize = filteredFiles[0]?.size || packageData?.files?.[0]?.size || 1;
+
+            if (pageFiles.length === 0) {
+                tbody.innerHTML = `<tr><td colspan="5" class="px-6 py-12 text-center text-sm text-muted-foreground">${t('noDependencies')}</td></tr>`;
+                updatePagination();
+                return;
+            }
+
+            tbody.innerHTML = pageFiles.map(file => {
+                const dependencyCount = getDependencyCount(file.path);
+                return `
+                <tr class="hover:bg-accent">
+                    <td class="px-6 py-4">
+                        <div class="flex items-center">
+                            <i data-lucide="file" class="w-4 h-4 mr-2 text-muted-foreground"></i>
+                            <span class="font-mono text-sm break-all">${file.path}</span>
+                        </div>
+                    </td>
+                    <td class="px-6 py-4">
+                        <div class="flex items-center">
+                            <span class="font-medium">${formatFileSize(file.size)}</span>
+                            <div class="ml-2 w-16 h-2 bg-muted rounded-full overflow-hidden">
+                                <div class="progress-bar h-full" style="width: ${Math.min(100, (file.size / maxFileSize) * 100)}%"></div>
+                            </div>
+                        </div>
+                    </td>
+                    <td class="px-6 py-4">
+                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-secondary text-secondary-foreground">
+                            ${file.extension || t('unknown')}
+                        </span>
+                    </td>
+                    <td class="px-6 py-4 text-sm text-muted-foreground">
+                        ${formatDate(file.lastModified)}
+                    </td>
+                    <td class="px-6 py-4">
+                        <div class="flex items-center space-x-2">
+                            ${dependencyCount > 0 ? `
+                                <button title="${t('viewInverseDependencies')}" class="px-2 py-1 bg-blue-500 text-white rounded text-xs hover:bg-blue-600 transition-colors flex items-center"
+                                        onclick="showDependentsList('${escapeForSingleQuoteJsString(file.path)}')">
+                                    <i data-lucide="git-fork" class="w-3 h-3 mr-1"></i>
+                                    ${dependencyCount}
+                                </button>
+                            ` : `
+                                <span class="text-xs text-muted-foreground">${t('noDependencies')}</span>
+                            `}
+                        </div>
+                    </td>
+                </tr>
+                `;
+            }).join('');
+
+            // 更新分页信息
+            updatePagination();
+
+            // 重新初始化图标
+            lucide.createIcons();
+        }
+
+        // 更新分页
+        function updatePagination() {
+            const totalPages = Math.ceil(filteredFiles.length / itemsPerPage);
+            if (filteredFiles.length === 0) {
+                document.getElementById('files-range').textContent = '0-0';
+                document.getElementById('files-total').textContent = '0';
+                document.getElementById('page-info').textContent = '0 / 0';
+                document.getElementById('prev-page').disabled = true;
+                document.getElementById('next-page').disabled = true;
+                return;
+            }
+            const startItem = (currentPage - 1) * itemsPerPage + 1;
+            const endItem = Math.min(currentPage * itemsPerPage, filteredFiles.length);
+
+            document.getElementById('files-range').textContent = `${startItem}-${endItem}`;
+            document.getElementById('files-total').textContent = filteredFiles.length;
+            document.getElementById('page-info').textContent = `${currentPage} / ${totalPages}`;
+
+            document.getElementById('prev-page').disabled = currentPage === 1;
+            document.getElementById('next-page').disabled = currentPage === totalPages;
+        }
+
+        // 翻页
+        function changePage(direction) {
+            const totalPages = Math.ceil(filteredFiles.length / itemsPerPage);
+            const newPage = currentPage + direction;
+
+            if (newPage >= 1 && newPage <= totalPages) {
+                currentPage = newPage;
+                updateFilesTable();
+            }
+        }
+
+        // 树形视图初始化
+        function initializeTreeView() {
+            renderTree();
+        }
+
+        // 渲染树形结构
+        function renderTree() {
+            const container = document.getElementById('tree-container');
+            container.innerHTML = renderTreeNode(treeData.pathAnalyse, 0);
+
+            // 添加点击事件
+            container.addEventListener('click', handleTreeClick);
+
+            // 重新初始化图标
+            lucide.createIcons();
+        }
+
+        // 渲染树节点
+        function renderTreeNode(nodes, level) {
+            if (!nodes || !Array.isArray(nodes)) return '';
+
+            return nodes.map(node => {
+                const hasChildren = node.child && node.child.length > 0;
+                const sizePercent = (node.ratio * 100).toFixed(1);
+                const pathName = node.path.split('/').pop();
+                const dependencyCount = !hasChildren ? getDependencyCount(node.path) : 0;
+
+                return `
+                    <div class="tree-node collapsed" data-path="${node.path}">
+                        <div class="tree-item ${hasChildren ? 'tree-toggle' : ''} flex items-center">
+                            <span class="tree-expand-icon w-4 h-4 flex items-center justify-center mr-1">
+                                ${hasChildren ? '<i data-lucide="chevron-right" class="w-3 h-3"></i>' : '<span class="w-3"></span>'}
+                            </span>
+                            <i data-lucide="${hasChildren ? 'folder' : 'file'}" class="w-4 h-4 mr-2 ${hasChildren ? 'tree-folder-icon' : 'tree-file-icon'}"></i>
+                            <span class="flex-1 font-medium">${pathName}</span>
+                            <span class="text-sm text-muted-foreground ml-2 font-mono">${formatFileSize(node.size)}</span>
+                            <span class="text-xs text-muted-foreground ml-2 opacity-75">(${sizePercent}%)</span>
+                            ${!hasChildren && dependencyCount > 0 ? `
+                                <button title="${t('viewInverseDependencies')}" class="ml-2 px-1 py-0.5 bg-blue-500 text-white rounded text-xs hover:bg-blue-600 transition-colors flex items-center"
+                                        onclick="event.stopPropagation(); showDependentsList('${escapeForSingleQuoteJsString(node.path)}')">
+                                    <i data-lucide="git-fork" class="w-2.5 h-2.5 mr-1"></i>
+                                    ${dependencyCount}
+                                </button>
+                            ` : !hasChildren ? `
+                                <span class="ml-2 text-xs text-muted-foreground opacity-50">${t('noDependencies')}</span>
+                            ` : ''}
+                        </div>
+                        ${hasChildren ? `<div class="tree-children">${renderTreeNode(node.child, level + 1)}</div>` : ''}
+                    </div>
+                `;
+            }).join('');
+        }
+
+        // 处理树形结构点击
+        function handleTreeClick(e) {
+            const toggle = e.target.closest('.tree-toggle');
+            if (!toggle) return;
+
+            e.preventDefault();
+            e.stopPropagation();
+
+            const node = toggle.closest('.tree-node');
+            const children = node.querySelector('.tree-children');
+
+            if (!children) return;
+
+            if (node.classList.contains('collapsed')) {
+                // 展开节点
+                node.classList.remove('collapsed');
+                children.style.display = 'block';
+            } else {
+                // 折叠节点
+                node.classList.add('collapsed');
+                children.style.display = 'none';
+            }
+
+            // 重新初始化图标以确保正确显示
+            lucide.createIcons();
+        }
+
+        // 树形搜索
+        function handleTreeSearch() {
+            const searchTerm = document.getElementById('tree-search').value.toLowerCase();
+            const nodes = document.querySelectorAll('.tree-node');
+
+            if (searchTerm === '') {
+                // 重置所有节点显示状态
+                nodes.forEach(node => {
+                    node.style.display = 'block';
+                    node.classList.add('collapsed'); // 重新折叠所有节点
+                    const children = node.querySelector('.tree-children');
+                    if (children) {
+                        children.style.display = 'none';
+                    }
+                });
+            } else {
+                // 搜索匹配
+                nodes.forEach(node => {
+                    const path = node.dataset.path.toLowerCase();
+                    const pathName = node.dataset.path.split('/').pop().toLowerCase();
+                    const matches = path.includes(searchTerm) || pathName.includes(searchTerm);
+
+                    if (matches) {
+                        node.style.display = 'block';
+                        // 展开所有父节点
+                        expandParentNodes(node);
+                    } else {
+                        node.style.display = 'none';
+                    }
+                });
+            }
+
+            // 重新初始化图标
+            lucide.createIcons();
+        }
+
+        // 展开父节点的辅助函数
+        function expandParentNodes(node) {
+            let parent = node.parentElement ? node.parentElement.closest('.tree-node') : null;
+            while (parent) {
+                parent.style.display = 'block';
+                parent.classList.remove('collapsed');
+                const children = parent.querySelector('.tree-children');
+                if (children) {
+                    children.style.display = 'block';
+                }
+                parent = parent.parentElement.closest('.tree-node');
+            }
+        }
+
+        // 全部展开
+        function expandAllNodes() {
+            const nodes = document.querySelectorAll('.tree-node');
+            nodes.forEach(node => {
+                node.classList.remove('collapsed');
+                node.style.display = 'block';
+                const children = node.querySelector('.tree-children');
+                if (children) {
+                    children.style.display = 'block';
+                }
+            });
+            lucide.createIcons();
+        }
+
+        // 全部折叠
+        function collapseAllNodes() {
+            const nodes = document.querySelectorAll('.tree-node');
+            nodes.forEach(node => {
+                node.classList.add('collapsed');
+                const children = node.querySelector('.tree-children');
+                if (children) {
+                    children.style.display = 'none';
+                }
+            });
+            lucide.createIcons();
+        }
+
+
+        // ===== 反向依赖功能函数 =====
+
+        // 获取文件的依赖数量
+        function getDependencyCount(filePath) {
+            if (!inverseDependencyData || !inverseDependencyData.inverseDependencies) {
+                return 0;
+            }
+
+            const dependency = inverseDependencyData.inverseDependencies.find(dep => dep.path === filePath);
+            return dependency ? dependency.dependents.length : 0;
+        }
+
+        // 反向依赖视图初始化
+        function initializeDependenciesView() {
+            if (!inverseDependencyData || !Array.isArray(inverseDependencyData.inverseDependencies)) {
+                console.warn('反向依赖数据未加载');
+                inverseDependencyData = emptyInverseData;
+                return;
+            }
+
+            // 更新统计信息
+            updateDependenciesStats();
+
+            // 更新热门依赖列表
+            updateTopDependencies();
+
+            // 初始化依赖关系表格
+            filteredDependencies = [...inverseDependencyData.inverseDependencies];
+            updateDependenciesTable();
+        }
+
+        // 更新反向依赖统计信息
+        function updateDependenciesStats() {
+            const summary = inverseDependencyData.summary;
+            document.getElementById('dep-total-files').textContent = summary.totalFiles.toLocaleString();
+            document.getElementById('dep-total-dependencies').textContent = summary.totalDependencies.toLocaleString();
+            document.getElementById('dep-average-dependencies').textContent = summary.averageDependencies.toFixed(2);
+            document.getElementById('dep-most-depended').textContent = summary.mostDependedFiles[0]?.dependentCount || 0;
+        }
+
+        // 更新热门依赖文件列表
+        function updateTopDependencies() {
+            const topList = document.getElementById('top-dependencies-list');
+            const topFiles = inverseDependencyData.summary.mostDependedFiles.slice(0, 10);
+            const totalDependencies = inverseDependencyData.summary.totalDependencies || 0;
+
+            if (topFiles.length === 0) {
+                topList.innerHTML = `<div class="text-sm text-muted-foreground py-6 text-center">${t('noDependencies')}</div>`;
+                return;
+            }
+
+            topList.innerHTML = topFiles.map((file, index) => {
+                const fileName = getFileName(file.path);
+                const isNodeModule = file.path.includes('node_modules');
+                const percentage = totalDependencies > 0
+                    ? ((file.dependentCount / totalDependencies) * 100).toFixed(2)
+                    : '0.00';
+
+                return `
+                    <div class="flex items-center justify-between p-3 bg-muted/50 rounded-lg hover:bg-muted transition-colors">
+                        <div class="flex items-center flex-1 min-w-0">
+                            <div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 flex items-center justify-center text-white text-sm font-bold mr-3">
+                                ${index + 1}
+                            </div>
+                            <div class="flex-1 min-w-0">
+                                <div class="font-medium text-sm truncate" title="${file.path}">
+                                    ${fileName}
+                                </div>
+                                <div class="text-xs text-muted-foreground truncate">
+                                    ${isNodeModule ? '📦 ' : '📄 '}${file.path}
+                                </div>
+                            </div>
+                        </div>
+                        <div class="text-right ml-4">
+                            <div class="text-lg font-bold text-primary">${file.dependentCount}</div>
+                            <div class="text-xs text-muted-foreground">${percentage}%</div>
+                        </div>
+                    </div>
+                `;
+            }).join('');
+        }
+
+        // 反向依赖搜索处理
+        function handleDepSearch() {
+            const searchTerm = document.getElementById('dep-search-input').value.toLowerCase();
+            const filterValue = document.getElementById('dep-filter-select').value;
+
+            filteredDependencies = inverseDependencyData.inverseDependencies.filter(dep => {
+                const matchesSearch = dep.path.toLowerCase().includes(searchTerm);
+                let matchesFilter = true;
+
+                switch (filterValue) {
+                    case 'src':
+                        matchesFilter = dep.path.startsWith('src/');
+                        break;
+                    case 'node_modules':
+                        matchesFilter = dep.path.includes('node_modules');
+                        break;
+                    case 'high-deps':
+                        matchesFilter = dep.dependents.length > 100;
+                        break;
+                }
+
+                return matchesSearch && matchesFilter;
+            });
+
+            currentDepPage = 1;
+            updateDependenciesTable();
+        }
+
+        // 反向依赖筛选处理
+        function handleDepFilter() {
+            handleDepSearch(); // 重新应用所有筛选条件
+        }
+
+        // 反向依赖排序处理
+        function handleDepSort() {
+            const sortValue = document.getElementById('dep-sort-select').value;
+
+            filteredDependencies.sort((a, b) => {
+                switch (sortValue) {
+                    case 'dependents-desc':
+                        return b.dependents.length - a.dependents.length;
+                    case 'dependents-asc':
+                        return a.dependents.length - b.dependents.length;
+                    case 'name-asc':
+                        return a.path.localeCompare(b.path);
+                    case 'name-desc':
+                        return b.path.localeCompare(a.path);
+                    default:
+                        return 0;
+                }
+            });
+
+            updateDependenciesTable();
+        }
+
+        // 更新反向依赖表格
+        function updateDependenciesTable() {
+            const tbody = document.getElementById('dependencies-table-body');
+            const startIndex = (currentDepPage - 1) * itemsPerPage;
+            const endIndex = startIndex + itemsPerPage;
+            const pageDeps = filteredDependencies.slice(startIndex, endIndex);
+            const maxDependentCount = inverseDependencyData?.summary?.mostDependedFiles?.[0]?.dependentCount || 1;
+
+            if (pageDeps.length === 0) {
+                tbody.innerHTML = `<tr><td colspan="3" class="px-6 py-12 text-center text-sm text-muted-foreground">${t('noDependencies')}</td></tr>`;
+                updateDepPagination();
+                return;
+            }
+
+            tbody.innerHTML = pageDeps.map(dep => {
+                const fileName = getFileName(dep.path);
+                const isNodeModule = dep.path.includes('node_modules');
+                const dependentCount = dep.dependents.length;
+
+                return `
+                    <tr class="hover:bg-accent">
+                        <td class="px-6 py-4">
+                            <div class="flex items-center">
+                                <i data-lucide="${isNodeModule ? 'package' : 'file'}" class="w-4 h-4 mr-2 text-muted-foreground"></i>
+                                <div>
+                                    <div class="font-medium text-sm">${fileName}</div>
+                                    <div class="text-xs text-muted-foreground font-mono break-all">${dep.path}</div>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="px-6 py-4">
+                            <div class="flex items-center">
+                                <span class="text-lg font-bold text-primary mr-2">${dependentCount}</span>
+                                <div class="flex-1 bg-muted rounded-full h-2 overflow-hidden">
+                                    <div class="bg-gradient-to-r from-blue-500 to-purple-500 h-full transition-all duration-300"
+                                         style="width: ${Math.min(100, (dependentCount / maxDependentCount) * 100)}%"></div>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="px-6 py-4">
+                            <button class="px-3 py-1 bg-primary text-primary-foreground rounded text-sm hover:bg-primary/90 transition-colors"
+                                    onclick="showDependentsList('${escapeForSingleQuoteJsString(dep.path)}')">
+                                ${t('viewDependencies')}
+                            </button>
+                        </td>
+                    </tr>
+                `;
+            }).join('');
+
+            // 更新分页信息
+            updateDepPagination();
+
+            // 重新初始化图标
+            lucide.createIcons();
+        }
+
+        // 更新反向依赖分页
+        function updateDepPagination() {
+            const totalPages = Math.ceil(filteredDependencies.length / itemsPerPage);
+            if (filteredDependencies.length === 0) {
+                document.getElementById('dep-range').textContent = '0-0';
+                document.getElementById('dep-total').textContent = '0';
+                document.getElementById('dep-page-info').textContent = '0 / 0';
+                document.getElementById('dep-prev-page').disabled = true;
+                document.getElementById('dep-next-page').disabled = true;
+                return;
+            }
+            const startItem = (currentDepPage - 1) * itemsPerPage + 1;
+            const endItem = Math.min(currentDepPage * itemsPerPage, filteredDependencies.length);
+
+            document.getElementById('dep-range').textContent = `${startItem}-${endItem}`;
+            document.getElementById('dep-total').textContent = filteredDependencies.length;
+            document.getElementById('dep-page-info').textContent = `${currentDepPage} / ${totalPages}`;
+
+            document.getElementById('dep-prev-page').disabled = currentDepPage === 1;
+            document.getElementById('dep-next-page').disabled = currentDepPage === totalPages;
+        }
+
+        // 反向依赖翻页
+        function changeDepPage(direction) {
+            const totalPages = Math.ceil(filteredDependencies.length / itemsPerPage);
+            const newPage = currentDepPage + direction;
+
+            if (newPage >= 1 && newPage <= totalPages) {
+                currentDepPage = newPage;
+                updateDependenciesTable();
+            }
+        }
+
+        // 显示依赖列表弹窗
+        function showDependentsList(filePath, existingModal = null) {
+            const dep = inverseDependencyData.inverseDependencies.find(d => d.path === filePath);
+            if (!dep) {
+                if (existingModal) {
+                    // 如果文件没有依赖关系，显示提示
+                    updateModalContent(existingModal, filePath, [], 0, true);
+                }
+                return;
+            }
+
+            const fileName = getFileName(filePath);
+            const dependentsList = dep.dependents.slice(0, 500); // 限制显示前500个
+
+            if (existingModal) {
+                // 更新现有弹窗内容
+                updateModalContent(existingModal, filePath, dependentsList, dep.dependents.length, false);
+            } else {
+                // 创建新弹窗
+                const modal = document.createElement('div');
+                modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4';
+                modal.innerHTML = createModalHTML(filePath, dependentsList, dep.dependents.length, false);
+
+                document.body.appendChild(modal);
+                lucide.createIcons();
+
+                // 点击背景关闭
+                modal.addEventListener('click', (e) => {
+                    if (e.target === modal) {
+                        modal.remove();
+                    }
+                });
+            }
+        }
+
+        // 创建弹窗HTML内容
+        function createModalHTML(filePath, dependentsList, totalCount, noDependencies) {
+            const fileName = getFileName(filePath);
+
+            return `
+                <div class="bg-card rounded-lg border border-border max-w-4xl w-full max-h-[80vh] overflow-hidden">
+                    <div class="p-6 border-b border-border">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <h3 class="text-lg font-semibold">${t('modalTitle', { fileName })}</h3>
+                                <p class="text-sm text-muted-foreground mt-1">
+                                    ${filePath}
+                                </p>
+                                <p class="text-sm text-muted-foreground mt-1">
+                                    ${noDependencies ? t('noDependentsMessage') : t('dependedByCount', { count: totalCount })}
+                                </p>
+                            </div>
+                            <button onclick="this.closest('.fixed').remove()" class="text-muted-foreground hover:text-foreground">
+                                <i data-lucide="x" class="w-5 h-5"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="p-6 overflow-y-auto max-h-96">
+                        ${noDependencies ? `
+                            <div class="text-center py-8">
+                                <i data-lucide="info" class="w-12 h-12 text-muted-foreground mx-auto mb-4"></i>
+                                <p class="text-muted-foreground">${t('noDependentsMessage')}</p>
+                            </div>
+                        ` : `
+                            <div class="space-y-2">
+                                ${dependentsList.map(dependent => {
+                const depFileName = getFileName(dependent);
+                const isNodeModule = dependent.includes('node_modules');
+                const depCount = getDependencyCount(dependent);
+                return `
+                                        <div class="flex items-center p-2 bg-muted/50 rounded hover:bg-muted transition-colors">
+                                            <i data-lucide="${isNodeModule ? 'package' : 'file'}" class="w-4 h-4 mr-2 text-muted-foreground"></i>
+                                            <div class="flex-1 min-w-0">
+                                                <div class="font-medium text-sm">${depFileName}</div>
+                                                <div class="text-xs text-muted-foreground font-mono truncate">${dependent}</div>
+                                            </div>
+                                            ${depCount > 0 ? `
+                                                <button title="${t('viewInverseDependencies')}" class="ml-2 px-2 py-1 bg-blue-500 text-white rounded text-xs hover:bg-blue-600 transition-colors flex items-center"
+                                                        onclick="showDependentsList('${escapeForSingleQuoteJsString(dependent)}', this.closest('.fixed'))">
+                                                    <i data-lucide="git-fork" class="w-3 h-3 mr-1"></i>
+                                                    ${depCount}
+                                                </button>
+                                            ` : `
+                                                <span class="ml-2 text-xs text-muted-foreground">${t('noDependencies')}</span>
+                                            `}
+                                        </div>
+                                    `;
+            }).join('')}
+                                ${totalCount > 500 ? `
+                                    <div class="text-center text-muted-foreground text-sm py-2">
+                                        ${t('moreDependents', { count: totalCount - 500 })}
+                                    </div>
+                                ` : ''}
+                            </div>
+                        `}
+                    </div>
+                </div>
+            `;
+        }
+
+        // 更新弹窗内容
+        function updateModalContent(modal, filePath, dependentsList, totalCount, noDependencies) {
+            const modalContent = modal.querySelector('.bg-card');
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = createModalHTML(filePath, dependentsList, totalCount, noDependencies);
+            const newContent = tempDiv.querySelector('.bg-card');
+            modalContent.innerHTML = newContent.innerHTML;
+            lucide.createIcons();
+        }
+
+        // 页面加载完成后初始化
+        document.addEventListener('DOMContentLoaded', () => {
+            loadData();
+        });