feat: harden exports and slim offline app shell

Author: yeahhe365

.github/workflows/ci.yml

@@ -0,0 +1,38 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  test-and-build:
+    runs-on: ubuntu-latest
+
+    defaults:
+      run:
+        working-directory: structure-insight
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+          cache-dependency-path: structure-insight/package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Typecheck
+        run: npm run typecheck
+
+      - name: Test
+        run: npm test -- --run
+
+      - name: Build
+        run: npm run build

README.md

@@ -6,6 +6,8 @@
 
 **一个强大的浏览器端工具，用于快速分析和可视化任何代码项目的文件结构和内容。旨在帮助开发人员生成格式化的输出，便于与 AI 语言模型共享和讨论代码。**
 
+> 仓库说明：实际前端应用位于 `structure-insight/` 子目录。开发、测试和构建命令都应在该目录下运行。
+
 ---
 
 ### [**🚀 在线体验 »**](https://structure-insight-website.pages.dev/)
@@ -71,10 +73,18 @@
 
 您可以轻松地在本地运行此项目。
 
+### 仓库结构
+
+- `README.md`: 仓库入口说明
+- `structure-insight/`: Vite + React 应用源码
+- `structure-insight/public/`: PWA 资源与静态文件
+- `.github/workflows/ci.yml`: 持续集成配置
+
 **1. 克隆仓库**
 ```bash
 git clone https://github.com/yeahhe365/Structure-Insight.git
 cd Structure-Insight
+cd structure-insight
 ```
 
 **2. 安装依赖**
@@ -88,6 +98,15 @@ npm run dev
 ```
 应用将在 `http://localhost:5173` (或其他可用端口) 上启动。
 
+### 常用脚本
+
+```bash
+npm run typecheck
+npm test -- --run
+npm run build
+npm run check
+```
+
 ## 🤝 贡献 (Contributing)
 
 欢迎各种形式的贡献！如果您有功能建议、发现错误或希望改进代码，请随时：

structure-insight/App.tsx

@@ -13,6 +13,7 @@ const SettingsDialog = React.lazy(() => import('./components/SettingsDialog'));
 const SearchDialog = React.lazy(() => import('./components/SearchDialog'));
 const FileRankDialog = React.lazy(() => import('./components/FileRankDialog'));
 const KeyboardShortcutsDialog = React.lazy(() => import('./components/KeyboardShortcutsDialog'));
+const SecurityFindingsDialog = React.lazy(() => import('./components/SecurityFindingsDialog'));
 
 const SuspenseFallback = () => null;
 
@@ -73,6 +74,7 @@ const App: React.FC = () => {
                     selectedFileName={state.selectedFile?.path.split('/').pop()}
                     isDark={state.isDark}
                     processedData={state.processedData}
+                    onShowSecurityFindings={() => handlers.setIsSecurityFindingsOpen(true)}
                 />
             )}
 
@@ -139,6 +141,26 @@ const App: React.FC = () => {
                         onToggleIncludeDirectoryStructure={() => settings.setIncludeDirectoryStructure(!state.includeDirectoryStructure)}
                         includeGitDiffs={state.includeGitDiffs}
                         onToggleIncludeGitDiffs={() => settings.setIncludeGitDiffs(!state.includeGitDiffs)}
+                        exportFormat={state.exportFormat}
+                        onSetExportFormat={settings.setExportFormat}
+                        includePatterns={state.includePatterns}
+                        onSetIncludePatterns={settings.setIncludePatterns}
+                        ignorePatterns={state.ignorePatterns}
+                        onSetIgnorePatterns={settings.setIgnorePatterns}
+                        useDefaultPatterns={state.useDefaultPatterns}
+                        onToggleUseDefaultPatterns={() => settings.setUseDefaultPatterns(!state.useDefaultPatterns)}
+                        useGitignore={state.useGitignore}
+                        onToggleUseGitignore={() => settings.setUseGitignore(!state.useGitignore)}
+                        includeEmptyDirectories={state.includeEmptyDirectories}
+                        onToggleIncludeEmptyDirectories={() => settings.setIncludeEmptyDirectories(!state.includeEmptyDirectories)}
+                        showLineNumbers={state.showLineNumbers}
+                        onToggleShowLineNumbers={() => settings.setShowLineNumbers(!state.showLineNumbers)}
+                        removeEmptyLines={state.removeEmptyLines}
+                        onToggleRemoveEmptyLines={() => settings.setRemoveEmptyLines(!state.removeEmptyLines)}
+                        truncateBase64={state.truncateBase64}
+                        onToggleTruncateBase64={() => settings.setTruncateBase64(!state.truncateBase64)}
+                        exportSplitMaxChars={state.exportSplitMaxChars}
+                        onSetExportSplitMaxChars={settings.setExportSplitMaxChars}
                         exportHeaderText={state.exportHeaderText}
                         onSetExportHeaderText={settings.setExportHeaderText}
                         exportInstructionText={state.exportInstructionText}
@@ -157,6 +179,17 @@ const App: React.FC = () => {
                     </React.Suspense>
                 )}
             </AnimatePresence>
+            <AnimatePresence>
+                {state.isSecurityFindingsOpen && (
+                    <React.Suspense fallback={<SuspenseFallback />}>
+                    <SecurityFindingsDialog
+                        isOpen={state.isSecurityFindingsOpen}
+                        onClose={() => handlers.setIsSecurityFindingsOpen(false)}
+                        findings={state.processedData?.securityFindings ?? []}
+                    />
+                    </React.Suspense>
+                )}
+            </AnimatePresence>
             <AnimatePresence>
                 {state.toastMessage && <Toast message={state.toastMessage} onDone={() => handlers.setToastMessage(null)} type={state.toastType} />}
             </AnimatePresence>

structure-insight/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## [5.4.0] - 2026-04-12
+
+### Features
+- 新增导出格式增强：仓库分析汇总、预计 Token 指标与敏感信息告警摘要
+- 新增浏览器端敏感内容扫描，支持在状态栏与导出结果中提示潜在密钥/私钥/内联凭据
+- 新增安全提示详情面板，可查看每条风险的文件位置、级别与命中片段
+- 新增导出拆分阈值，保存时可按字符数自动拆分为多份文件
+- 将导出中的 “Git Diffs” 明确更名为 “Edited Changes”，避免与真实 Git 工作区语义混淆
+- 扩展忽略规则支持，兼容分层 `.gitignore` 与 `.ignore`
+
+### Platform
+- 注册 Service Worker，补齐 PWA 应用壳缓存与离线重访能力
+- 修复并统一 manifest/favicon 资源，移除失效的图标引用
+- 移除 `index.html` 中的外部 CDN 依赖，改为本地 Tailwind 构建、本地图标资源和本地语法高亮资源
+- 继续瘦身前端产物：将 FileTree / CodeView / StructureView 拆分为独立 chunk，主入口包体从约 599 kB 降至约 299 kB
+- 图标体系改为仅使用 solid 子集，并在构建阶段移除 `.ttf` 回退资源，仅保留 `woff2`
+- 新增 `typecheck` 与 `check` 脚本
+- 新增 GitHub Actions CI，覆盖安装、类型检查、测试与构建
+
+### Documentation
+- 更新根 README 与应用 README，明确仓库结构、启动路径和可用脚本
+- 为本轮 P0/P1 工作补充设计文档与实施计划
+
 ## [5.3.0] - 2025-03-30
 
 ### Bug Fixes

structure-insight/README.md

@@ -1,30 +1,55 @@
-<div align="center">
-<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
-</div>
+# Structure Insight App
 
-# Run and deploy Structure Insight
+Browser-first codebase analysis and export tooling for sharing repository context with AI systems.
 
-This contains everything you need to run your app locally.
+## What This App Does
 
-## Run Locally
+- Imports folders and `.zip` archives entirely in the browser
+- Builds a navigable tree view and code viewer
+- Lets you edit files in-app and export the current state
+- Supports layered `.gitignore` and `.ignore` filtering
+- Estimates token usage for loaded files
+- Flags likely sensitive content before you copy or save exports
+- Shows a dedicated security findings dialog for reviewing warning details
+- Can split large exports into multiple files during save
+- Registers as a PWA and caches the app shell for offline reuse after the first online load
+- Uses local build-time assets instead of runtime CDN dependencies for core UI styling, icons, and syntax highlighting
+- Splits heavier views like the file tree and code viewer into separate chunks to keep the initial app shell lighter
 
-**Prerequisites:**  Node.js
+## Development
 
+Run all commands from this directory:
 
-1. Install dependencies:
-   `npm install`
-2. Run the app:
-   `npm run dev`
+```bash
+npm install
+npm run dev
+```
 
-## Deployment Troubleshooting
+Useful scripts:
 
-### Error: "Cannot find cwd: .../structure-insight-web"
+```bash
+npm run typecheck
+npm test -- --run
+npm run build
+npm run check
+```
 
-If you encounter an error like `Error: Cannot find cwd: /opt/buildhome/repo/structure-insight-web` during deployment (e.g., on Cloudflare Pages):
+## Repository Notes
 
-This indicates the deployment service is expecting the project files to be in a subdirectory named `structure-insight-web`, but they are in the root of your repository.
+- The repository root contains the public project README.
+- CI runs from the repository root but uses this directory as the working directory.
+- Cloudflare Pages or similar platforms should point their root/build directory to `structure-insight/`.
 
-**Fix:**
-1. Go to your deployment project settings (e.g., Cloudflare Pages > Settings > Build & deployments).
-2. Locate the **Root Directory** setting in "Build configurations".
-3. Change it to `/` (empty) to indicate the project is in the root directory.
+## Export Semantics
+
+- `Edited Changes` represents differences between the imported file contents and your in-app edits.
+- It does **not** read the local git working tree or staged diff.
+- Token counts are estimates intended for planning and comparison, not exact model-token guarantees.
+
+## Offline Notes
+
+- The app shell no longer depends on external CDN resources in `index.html`.
+- Core styling is compiled locally with Tailwind.
+- Icons and syntax-highlighting resources are bundled or served from local project assets.
+- Font Awesome is reduced to the local solid subset with `woff2` output only.
+- First-load network access is still needed for the initial installation, but repeat visits can rely on cached local assets.

structure-insight/components/CodeView.tsx

@@ -1,12 +1,11 @@
 
 import React from 'react';
+import hljs from 'highlight.js/lib/common';
 import { motion } from 'framer-motion';
 import { FileContent, SearchOptions } from '../types';
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
 
-// hljs types provided by types/hljs.d.ts
-
 interface FileCardProps {
   file: FileContent;
   isEditing: boolean;
@@ -27,7 +26,7 @@ interface FileCardProps {
 
 const IconButton: React.FC<{icon: string, title: string, onClick: () => void, disabled?: boolean, text?: string}> = ({icon, title, onClick, disabled, text}) => (
     <button onClick={onClick} className="flex items-center space-x-1.5 text-sm text-light-subtle-text dark:text-dark-subtle-text hover:text-light-text dark:hover:text-dark-text disabled:opacity-50 transition-colors" title={title} disabled={disabled}>
-        <i className={`fa-regular ${icon}`}></i>
+        <i className={`fa-solid ${icon}`}></i>
         {text && <span className="hidden sm:inline">{text}</span>}
     </button>
 );
@@ -172,10 +171,10 @@ const FileCard: React.FC<FileCardProps> = ({
       </div>
       <div className="flex justify-between items-center p-3 bg-light-header/80 dark:bg-dark-header/80 border-b border-light-border dark:border-dark-border sticky top-0 z-[1] backdrop-blur-sm">
         <div className="font-mono text-sm text-light-text dark:text-dark-text truncate flex items-center" title={file.path}>
-          <i className="fa-regular fa-file-lines mr-2 text-light-subtle-text dark:text-dark-subtle-text"></i>
+          <i className="fa-solid fa-file-lines mr-2 text-light-subtle-text dark:text-dark-subtle-text"></i>
           <span className={`truncate ${file.excluded ? 'line-through text-light-subtle-text dark:text-dark-subtle-text italic' : ''}`}>{file.path} {file.excluded && "(已排除)"}</span>
            <button onClick={() => onCopyPath(file.path)} className="ml-2 text-light-subtle-text hover:text-primary transition-colors flex items-center justify-center p-1 rounded hover:bg-light-border dark:hover:bg-dark-border/50" title="复制路径">
-              <i className="fa-regular fa-copy text-xs"></i>
+              <i className="fa-solid fa-copy text-xs"></i>
           </button>
         </div>
         <div className="flex items-center space-x-4 text-xs text-light-subtle-text dark:text-dark-subtle-text shrink-0 ml-2">
@@ -267,7 +266,7 @@ const CodeView: React.FC<CodeViewProps> = (props) => {
   if (!selectedFile) {
     return (
         <div className="flex flex-col items-center justify-center h-full text-center p-4 text-light-subtle-text dark:text-dark-subtle-text">
-            <i className="fa-regular fa-file-code text-5xl mb-4"></i>
+            <i className="fa-solid fa-file-code text-5xl mb-4"></i>
             <p className="font-semibold">选择一个文件</p>
             <p className="text-sm">从左侧资源管理器中选择一个文件以查看其内容。</p>
         </div>