gmh/Web2App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: 更新需求文档以匹配实际实现

Browse Source 
- 更新新建项目流程（选定文件夹即项目）
- 更新资源导入方式（目录导入 + 文件选择）
- 更新技术方案（Vue 3 + Pinia + Vite 5）
- 更新界面布局描述
This commit is contained in:
gmh01
2026-07-23 20:42:38 +08:00
parent 8dc102a7cb
commit 90d3404cd8
1 changed files with 23 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
需求文档.md
View File

@@ -13,8 +13,8 @@
## 2. 核心流程 ## 2. 核心流程
``` ```
用户准备网站资源 → 导入 Web2App → 配置应用信息 → 打包生成安装包 新建/打开项目 → 设置资源路径(导入网站目录) → 配置应用信息(名称/图标/入口等)
→ 分发安装包 → 目标机安装 → 启动 → 独立的桌面应用运行 → 打包生成安装包 → 目标机安装 → 启动 → 独立的桌面应用运行
``` ```
--- ---
@@ -25,23 +25,22 @@
| 编号 | 功能 | 说明 | | 编号 | 功能 | 说明 |
|------|------|------| |------|------|------|
| F1.1 | 导入 HTML 文件 | 支持单个或批量导入，自动检测入口文件（index.html） | | F1.1 | 设置资源路径 | 用户选择网站目录，自动导入目录下所有文件 |
| F1.2 | 导入 JS 文件 | 保留目录结构导入 | | F1.2 | 单个文件导入 | 支持选择单个或多个文件导入 |
| F1.3 | 导入 CSS 文件 | 保留目录结构导入 | | F1.3 | 目录结构保留 | 导入时保留原始目录结构 |
| F1.4 | 导入资源文件 | 图片、字体、音视频、JSON 等静态资源 | | F1.4 | 资源树展示 | 以目录树形式展示已导入的所有文件 |
| F1.5 | 资源树展示 | 以目录树形式展示已导入的所有文件 | | F1.5 | 资源增删改 | 支持在界面中删除已导入的文件 |
| F1.6 | 资源增删改 | 支持在界面中删除或替换已导入的文件 | | F1.6 | 后端代码导入 | 导入后端脚本（如 Node.js/Express 路由文件） |
| F1.7 | 后端代码导入 | 导入后端脚本（如 Node.js/Express 路由文件） |
### 3.2 应用配置 ### 3.2 应用配置
| 编号 | 功能 | 说明 | | 编号 | 功能 | 说明 |
|------|------|------| |------|------|------|
| F2.1 | 应用名称 | 设置生成的桌面应用名称 | | F2.1 | 应用名称 | 设置生成的桌面应用名称（默认为文件夹名） |
| F2.2 | 应用图标 | 支持导入自定义图标（.ico / .png） | | F2.2 | 应用图标 | 支持导入自定义图标（.ico / .png / .icns） |
| F2.3 | 应用版本号 | 设置版本号 | | F2.3 | 应用版本号 | 设置版本号，默认 1.0.0 |
| F2.4 | 窗口设置 | 配置窗口默认尺寸、最小尺寸、是否可调整大小 | | F2.4 | 窗口设置 | 配置窗口默认尺寸、最小尺寸、是否可调整大小 |
| F2.5 | 入口文件 | 指定网站入口 HTML 文件 | | F2.5 | 入口文件 | 指定网站入口 HTML 文件（在资源中选择） |
| F2.6 | 后端入口 | 指定后端服务入口文件（如 server.js） | | F2.6 | 后端入口 | 指定后端服务入口文件（如 server.js） |
| F2.7 | 作者/版权信息 | 设置应用版权与作者信息 | | F2.7 | 作者/版权信息 | 设置应用版权与作者信息 |
@@ -96,12 +95,12 @@
| 层级 | 技术选型 | 说明 | | 层级 | 技术选型 | 说明 |
|------|----------|------| |------|----------|------|
| 桌面框架 | Electron | 跨平台桌面应用框架，内置 Chromium 与 Node.js | | 桌面框架 | Electron 28 | 跨平台桌面应用框架，内置 Chromium 与 Node.js |
| 前端 UI | React / Vue 3 | Web2App 自身的图形界面（推荐 Vue 3） | | 前端 UI | Vue 3 + Vue Router + Pinia | Web2App 自身的图形界面 |
| 打包工具 | electron-builder | 将用户资源+运行时打包为安装包 | | 构建工具 | Vite 5 | 前端构建与开发服务器 |
| 打包工具 | electron-builder + NSIS | 将用户资源+运行时打包为安装包 |
| 后端引擎 | Node.js (Electron 内置) | 使用 Electron 自带的 Node.js 运行时执行用户后端代码 | | 后端引擎 | Node.js (Electron 内置) | 使用 Electron 自带的 Node.js 运行时执行用户后端代码 |
| 数据库 | better-sqlite3 | 嵌入式数据库，无需配置 | | 安装包生成 | electron-builder / NSIS | 跨平台安装包生成（.exe / .dmg / .AppImage） |
| 安装包生成 | electron-builder / NSIS | 跨平台安装包生成 |
### 架构示意 ### 架构示意
@@ -129,10 +128,12 @@
### 6.1 主界面布局 ### 6.1 主界面布局
- **左侧**：资源管理面板（目录树） - **首页**：新建项目（选择文件夹即创建）/ 打开已有项目 / 最近项目列表
- **中间**：文件预览 / 编辑区域 - **项目编辑页**：
- **右侧**：应用配置面板 - **左侧**：资源文件面板（目录树 + 导入按钮）
- **底部**：打包进度与日志 - **右侧**：应用配置面板（名称/版本/图标/窗口/入口等）
- **打包页**：打包配置、启动打包、实时进度与日志
- **帮助页**：使用说明与版本信息
### 6.2 主要页面 ### 6.2 主要页面