feat: 日志模块 + netRequest 封装 + PROJECT.md 更新
日志模块(文件持久化 + 事件总线联动 + 脱敏)
新增:
- shared/types/logging.ts — LogLevel / LogCategory / LogEntry 类型
- electron/main/logger.ts — 主进程日志核心(JSON Lines / 每日轮转 / 7天清理)
- electron/main/log-ipc.ts — 渲染进程日志 IPC 通道接收
- src/utils/logger.ts — 渲染进程日志器(IPC 转发 / DEV 控制台 / 事件总线钩子)
- shared/utils/sanitize.ts — 脱敏工具(ID哈希 / 邮箱 / 手机 / 名称 / Token)
修改:
- electron/main.ts — initLogger + flushLogger + uncaughtException
- src/main.tsx — renderer 全局错误捕获
- src/utils/event-bus.ts — setEventLogListener 钩子,emit 自动审计
- src/services/request.ts — 拦截器结构化错误分级记录
- electron/main/updater.ts — 14处 console → logger 迁移
- src/components/AppProvider.tsx — 登录/登出/自动登录 auth 事件日志
- shared/constants/ipc-channels.ts — 新增 LOG_MESSAGE 通道
netRequest 封装(Electron net.request 的 axios 风格 API)
新增:
- electron/main/net-request.ts — netRequest.get/post/put/del 命名空间
修改:
- electron/main/updater.ts — fetchUpdateInfo 改用 netRequest(22→12行)
文档更新
- PROJECT.md — 目录结构 / 状态管理 / 日志系统 / IPC 章节同步现状
- TODO.md — 增量更新改造 + 日志模块待办
- UpdateA.md — API blockmap 字段 / 数据库字段说明
This commit is contained in:
146
PROJECT.md
146
PROJECT.md
@@ -30,17 +30,21 @@
|
||||
|
||||
## 前端架构原则
|
||||
|
||||
- 组件化:以函数组件 + Hooks 为唯一组件形式,UI 拆分为展示组件与容器组件(若无特殊需求,可使用 Hooks 直接连接 Redux)。
|
||||
- 组件化:以函数组件 + Hooks 为唯一组件形式,UI 拆分为展示组件与容器组件。
|
||||
|
||||
- 单向数据流:全局状态使用 Redux Toolkit,严格遵循 Action → Reducer → Store → View 单向流动。组件内部状态使用
|
||||
useState/useReducer,不污染全局 Store。
|
||||
- 单向数据流:全局状态使用 Context + Provider 模式(AppContext / ThemeContext / SettingsContext),
|
||||
遵循 Provider → Context → Comsumer 单向流动。组件内部状态使用 useState/useReducer,不污染全局 Context。
|
||||
|
||||
- 事件驱动(EDA):
|
||||
1. 主进程与渲染进程通信基于 Electron IPC(ipcMain/ipcRenderer),定义明确的事件通道与载荷类型。
|
||||
|
||||
2. 渲染进程内跨组件通信优先使用 Redux;需要解耦的场景可借助自定义事件总线(如 mitt),但严禁滥用。
|
||||
2. 渲染进程内跨组件通信优先使用 Context;需要解耦的场景使用自定义事件总线(src/utils/event-bus.ts),
|
||||
所有 emit 调用自动记录到日志文件用于审计追踪。
|
||||
|
||||
3. 窗口间通信统一通过主进程转发(或使用 MessagePort 等 Electron 支持的机制),保持窗口独立性。
|
||||
3. 自定义错误体系(RequestError / RefreshError)通过事件总线解耦:请求拦截器抛出自定义错误 →
|
||||
全局捕获 → emit 事件 → UI 层响应。
|
||||
|
||||
4. 窗口间通信统一通过主进程转发(或使用 MessagePort 等 Electron 支持的机制),保持窗口独立性。
|
||||
|
||||
- 路由与导航:主窗口为 单页应用,使用 React Router v7+ 管理页面切换,支持嵌套路由。
|
||||
|
||||
@@ -50,50 +54,62 @@
|
||||
# 目录结构
|
||||
|
||||
```md
|
||||
├── electron/ # Electron 主进程与预加载脚本
|
||||
│ ├── main/ # 主进程代码
|
||||
│ │ ├── index.ts # 入口,初始化应用
|
||||
│ │ ├── windowManager.ts # 多窗口管理器(创建、销毁、聚焦)
|
||||
│ │ ├── ipc/ # IPC 事件注册与处理
|
||||
│ │ ├── menu/ # 系统菜单模板(按平台拆分)
|
||||
│ │ └── utils/ # 平台判断、路径处理等
|
||||
│ └── preload/ # 预加载脚本
|
||||
│ ├── index.ts # 主窗口预加载
|
||||
│ └── subWindow.ts # 辅助窗口预加载
|
||||
├── src/ # 渲染进程(React 应用)
|
||||
│ ├── main/ # 主窗口 SPA 入口
|
||||
│ │ ├── index.html # HTML 入口
|
||||
│ │ ├── main.tsx # React 挂载点
|
||||
│ │ └── App.tsx # 根组件(路由、主题)
|
||||
│ ├── sub/ # 辅助窗口独立入口(一个窗口对应一个子目录)
|
||||
│ │ ├── settings/ # 设置窗口示例
|
||||
│ │ │ ├── index.html
|
||||
│ │ │ └── main.tsx
|
||||
│ │ └── preview/ # 预览窗口示例
|
||||
│ ├── components/ # 通用 UI 组件
|
||||
│ ├── containers/ # 业务容器组件(连接 Redux)
|
||||
│ ├── store/ # Redux Toolkit 配置
|
||||
│ │ ├── index.ts # Store 创建
|
||||
│ │ ├── slices/ # 按功能拆分 Slice
|
||||
│ │ └── hooks.ts # 类型化 useAppSelector/useAppDispatch
|
||||
│ ├── hooks/ # 自定义 Hooks
|
||||
│ ├── theme/ # 主题适配器与定制
|
||||
│ │ ├── adapters/ # Ant Design 主题配置、Tailwind 扩展
|
||||
│ │ ├── tokens.ts # 设计令牌(颜色、圆角、阴影等)
|
||||
│ │ └── globals.css # Tailwind 指令 + 全局样式
|
||||
│ ├── router/ # 路由配置(主窗口)
|
||||
│ ├── utils/ # 纯函数工具
|
||||
│ │ └── platform.ts # 平台判定工具(process.platform 封装)
|
||||
│ └── types/ # 渲染进程专用类型
|
||||
├── shared/ # 主进程 & 渲染进程共享
|
||||
│ ├── types/ # IPC 通道、载荷类型、通用接口
|
||||
│ ├── constants/ # 事件名称、配置常量
|
||||
│ └── utils/ # 通用逻辑(如版本比较)
|
||||
├── package.json
|
||||
├── vite.config.ts # Vite 配置(多入口)
|
||||
├── tailwind.config.ts # Tailwind 主题扩展
|
||||
├── electron/ # Electron 主进程
|
||||
│ ├── main.ts # 入口:窗口创建 / IPC 注册 / 生命周期
|
||||
│ ├── preload.ts # 预加载脚本(contextBridge)
|
||||
│ └── main/
|
||||
│ ├── updater.ts # 自定义更新(API 版本检查 + OSS 下载 + NSIS 安装)
|
||||
│ ├── logger.ts # 主进程日志核心(JSON Lines 写入 / 轮转 / 清理)
|
||||
│ ├── log-ipc.ts # 渲染进程日志 IPC 通道接收
|
||||
│ ├── net-request.ts # Electron net.request 的 axios 风格封装
|
||||
│ ├── menu/index.ts # 系统菜单
|
||||
│ └── utils/ # 平台判断 / 图标路径
|
||||
├── src/ # 渲染进程(React 19 SPA)
|
||||
│ ├── main.tsx # React 挂载点 + 全局错误捕获
|
||||
│ ├── App.tsx # 根组件(路由 + 登录弹窗)
|
||||
│ ├── components/ # 通用 UI 组件 + Provider
|
||||
│ │ ├── AppProvider.tsx # 全局状态(platform / edition / login)
|
||||
│ │ ├── ThemeProvider.tsx # 主题状态(light / dark)
|
||||
│ │ ├── SettingsProvider.tsx # 设置状态(存储路径等)
|
||||
│ │ ├── Layout.tsx # 页面壳(NavBar + Outlet)
|
||||
│ │ └── navbar/ # 导航栏 + 公告抽屉
|
||||
│ ├── contexts/ # Context 定义(app / settings / theme)
|
||||
│ ├── hooks/ # 自定义 Hooks(useUpdater / useTheme)
|
||||
│ ├── pages/ # 页面组件
|
||||
│ │ ├── home/ # 首页仪表盘
|
||||
│ │ ├── login/ # 登录 / 注册页
|
||||
│ │ └── settings/ # 设置面板(主题 / 存储 / 更新)
|
||||
│ ├── router/index.tsx # HashRouter 路由配置
|
||||
│ ├── services/ # HTTP 请求封装
|
||||
│ │ ├── request.ts # Axios 封装 + 拦截器 + Token 刷新
|
||||
│ │ ├── types.ts # 自定义错误类型(RequestError / RefreshError)
|
||||
│ │ ├── auth-token.ts # refresh_token 管理
|
||||
│ │ └── modules/ # API 模块(auth / announcement)
|
||||
│ ├── theme/ # 主题系统
|
||||
│ │ ├── tokens.ts # 设计令牌
|
||||
│ │ └── globals.css # Tailwind + 全局样式
|
||||
│ └── utils/ # 纯函数工具
|
||||
│ ├── event-bus.ts # 事件总线(on / off / emit + 日志钩子)
|
||||
│ ├── logger.ts # 渲染进程日志器(IPC 转发 / DEV 控制台)
|
||||
│ ├── ipc.ts # 安全 IPC 守卫(safeIpcOn / send / invoke)
|
||||
│ ├── platform.ts # 平台判定
|
||||
│ └── device.ts # 设备 ID 生成
|
||||
├── shared/ # 主进程 & 渲染进程共享
|
||||
│ ├── types/ # 类型定义(API / IPC / update / logging)
|
||||
│ ├── constants/ # 常量(IPC 通道 / version / app)
|
||||
│ └── utils/ # 共享工具
|
||||
│ ├── index.ts # debounce / throttle / compareVersions
|
||||
│ └── sanitize.ts # 日志脱敏工具(ID / 邮箱 / 手机 / 名称)
|
||||
├── scripts/ # 构建脚本
|
||||
│ ├── build.mjs # 构建总管
|
||||
│ ├── clean.mjs # 清理产物
|
||||
│ ├── upload-oss.mjs # OSS 上传
|
||||
│ ├── publish-release.mjs # 发布到 API
|
||||
│ └── generate-update-info.mjs # 生成更新元信息
|
||||
├── package.json # 含 electron-builder 打包配置
|
||||
├── vite.config.ts
|
||||
├── tsconfig.json
|
||||
└── electron-builder.yml # 打包配置(跨平台适配)
|
||||
└── tailwind.config.ts
|
||||
```
|
||||
|
||||
# 多窗口与平台判定
|
||||
@@ -104,7 +120,7 @@
|
||||
- src/utils/platform.ts 提供 isMacOS、isWindows 等函数(基于 navigator.userAgent 或 preload 暴露的 process.platform)。在主进程的
|
||||
electron/main/utils/platform.ts 中直接使用 Node.js API。
|
||||
|
||||
- 打包配置 (electron-builder.yml) 须针对平台设置不同的图标、签名策略、安装包格式。
|
||||
- 打包配置 (package.json build 字段) 须针对平台设置不同的图标、签名策略、安装包格式。
|
||||
|
||||
# 代码风格
|
||||
|
||||
@@ -131,13 +147,29 @@
|
||||
|
||||
- 使用 React.memo、useMemo、useCallback 优化性能,但不要过早优化。
|
||||
|
||||
## Redux
|
||||
## 状态管理
|
||||
|
||||
- 使用 Redux Toolkit 的 createSlice 管理状态,异步逻辑使用 createAsyncThunk。
|
||||
- 使用 React Context + Provider 模式管理全局状态,按领域拆分:AppContext(平台/登录)、ThemeContext(主题)、
|
||||
SettingsContext(设置项)。避免引入 Redux 等重量级方案。
|
||||
|
||||
- Slice 按业务领域划分,每个 Slice 文件导出 actions 与 reducer。
|
||||
- Provider 组件在 main.tsx 中按层级嵌套挂载:
|
||||
AppProvider → ThemeProvider → SettingsProvider → AntdApp → App
|
||||
|
||||
- 组件中通过自定义 Hooks (useAppSelector, useAppDispatch) 访问 Store,避免直接使用 useDispatch/useSelector。
|
||||
- 各模块通过自定义 Hook 消费(useAppContext / useTheme / useSettings),Hook 内部做 null 检查。
|
||||
|
||||
## 日志系统
|
||||
|
||||
- 双端日志:主进程直接写文件(electron/main/logger.ts),渲染进程通过 IPC send 上报(src/utils/logger.ts)。
|
||||
两端暴露一致的 API:`logger.debug / info / warn / error(category, message, error?, context?)`。
|
||||
|
||||
- 文件存储:JSON Lines 格式(每行一个 JSON),路径 `{userData}/logs/app-YYYY-MM-DD.log`,
|
||||
每日轮转 + 7 天自动清理。
|
||||
|
||||
- 事件总线联动:event-bus.ts 暴露 `setEventLogListener` 钩子,logger 注册后所有 emit 自动记录 DEBUG 日志。
|
||||
|
||||
- 错误日志:request.ts 拦截器根据错误类型自动分级记录(AUTH_EXPIRED → debug,5xx → error,其余 → warn)。
|
||||
|
||||
- 脱敏:shared/utils/sanitize.ts 在日志写入前自动处理 ID(哈希)、邮箱/手机/名称/Token 等字段。
|
||||
|
||||
# 样式与主题
|
||||
|
||||
@@ -153,11 +185,15 @@
|
||||
|
||||
# 事件与 IPC
|
||||
|
||||
- 所有 IPC 通道名称定义在 shared/constants/ipc-channels.ts 中,避免魔法字符串。
|
||||
- 所有 IPC 通道名称定义在 shared/constants/ipc-channels.ts 中,分为三类:
|
||||
MAIN_TO_RENDERER / RENDERER_TO_MAIN / BIDIRECTIONAL。
|
||||
|
||||
- 渲染进程通过 src/utils/ipc.ts 中的安全守卫访问 IPC(hasIpc 检查 → safeIpcOn / send / invoke),
|
||||
非 Electron 环境下静默跳过,保证浏览器预览不崩溃。
|
||||
|
||||
- 主进程事件处理函数需做好错误捕获与日志记录,渲染进程调用 IPC 时使用 try-catch 并处理超时。
|
||||
|
||||
- 窗口间通信走主进程转发:发送窗口 ipcRenderer.send,主进程接收后定位目标窗口并 webContents.send。
|
||||
- 窗口间通信走主进程转发:发送窗口 safeIpcSend,主进程接收后定位目标窗口并 webContents.send。
|
||||
|
||||
# 开发与构建命令
|
||||
|
||||
|
||||
Reference in New Issue
Block a user