网络安全【免费下载链接】portmaster Love Freedom - ❌ Block Mass Surveillance项目地址https://gitcode.com/gh_mirrors/po/portmaster点击查看免费下载Portmaster 是 Safing 出品的隐私保护软件而desktop/angular目录承载其全新的桌面端用户界面。本文以仓库中的 desktop/angular/README.md 为核心结合仓库源码完整讲解该 Angular 前端在 Ubuntu 上的本地搭建流程含 Docker 方式、开发目录结构、常用 CLI 命令ng serve/ng build/ng test/ng e2e以及与 Portmaster 核心服务127.0.0.1:817API的联通原理。读完本文你可以独立在新环境上跑起这套 UI并具备直接上手二次开发的完整路径。项目概览基于 Angular 的全新 Portmaster 用户界面新 Portmaster UI 基于 Angular 实现并使用angular/cli完成构建、单元测试Karma与端到端测试Protractor。从仓库根目录的 desktop/angular/package.json 可以看到项目基于 Angular 16angular/*依赖均为^16.0.1同时引入了fortawesome图标库、ng-zorro-antd组件库、d3/topojson-client用于地图与数据可视化对应 SPN 网络地图、ngx-markdown与prismjs文档渲染、tailwindcss样式体系、fuse.js模糊搜索等关键依赖。一个值得注意的设计是这套 UI 可以与旧版 UI并行运行因此当新界面尚有缺失或缺陷时用户可以随时切换回旧界面。这也意味着新 UI 是作为独立的开发分支/模块存在并不破坏既有可用性。本地运行在 Ubuntu 上搭建开发与测试环境README 建议在 Ubuntu 机器上虚拟机或裸机均可准备工具链然后用 Docker 化方式构建和测试新 UI。完整步骤如下。1. 准备 Docker 工具链sudo apt update sudo apt install -y docker.io git sudo systemctl enable --now docker sudo gpasswd -a $USER docker安装并启动 Docker 服务后将当前用户加入docker组之后执行docker命令便无需sudo需重新登录会话使组变更生效。2. 安装 Portmaster 并启用开发配置新 UI 依赖本机正在运行的 Portmaster 核心服务提供数据与事件推送。请先通过官方.deb安装包安装 Portmaster然后为服务注入两个关键的启动参数echo PORTMASTER_ARGS--experimental-nfqueue --devmode | sudo tee /etc/default/portmaster sudo systemctl daemon-reload sudo systemctl restart portmaster其中--experimental-nfqueue启用基于 Linux nfqueue 的实验性包拦截路径--devmode开发者模式放开开发调试相关的接口与行为限制。这两个参数通过/etc/default/portmaster环境文件注入 systemd 服务重启后生效。3. 构建并运行新 UIDocker 方式# Clone the repository git clone https://github.com/safing/portmaster-ui # Enter the repo and checkout the correct branch cd portmaster-ui git checkout feature/new-ui # Enter the directory and run docker.sh cd modules/portmaster sudo bash ./docker.sh脚本执行完成后在浏览器中访问http://localhost:8080即可看到新 UI。说明README 中的路径与分支对应的是该项目早期的开发形态独立仓库portmaster-ui的feature/new-ui分支。在当前仓库中对应代码已合并至 desktop/angular 目录你可以直接在仓库根目录执行cd desktop/angular sudo bash ./docker.sh完成同样的操作。来看仓库中 desktop/angular/docker.sh 的实现脚本逻辑非常精简——它只是一个 Docker 封装器#!/bin/bash # cd to script dir baseDir$( cd $(dirname $0) pwd ) cd $baseDir # get base dir for mounting mnt$( cd ../.. pwd ) # run container and start dev server docker run \ -ti \ --rm \ -v $mnt:/portmaster \ -w /portmaster/desktop/angular \ -p 8081:8080 \ node:latest \ npm start -- --host 0.0.0.0 --port 8080关键点解读以官方node:latest镜像为基础无需在宿主机安装 Node.js/npm通过-v把仓库根目录脚本向上两级目录挂载到容器内/portmaster开发源码与容器实时共享改动即时可见工作目录设为容器内的/portmaster/desktop/angular端口映射为8081:8080即容器内 dev server 监听0.0.0.0:8080宿主机访问http://localhost:8081即可README 中写http://localhost:8080对应的是直接指定端口映射为8080:8080的早期脚本版本容器内执行npm start见下文 npm scripts 说明并显式传入--host 0.0.0.0 --port 8080以允许容器外部访问。Hacking Quick Start本地开发环境配置Docker 方式虽开箱即用但 README 明确指出为了获得最佳开发体验推荐在宿主机本地安装angular/cli。此外还建议使用 VSCode或其 OSS / 服务端变体并安装以下扩展Angular Language Service官方提供模板类型检查、智能补全与诊断Tailwind CSS Extension Pack项目使用 Tailwind CSS 3见 desktop/angular/tailwind.config.js 与 package.json 中tailwindcss: ^3.3.2依赖该扩展提供类名提示与格式化formate: CSS/LESS/SCSS formatter由于项目同时使用 SCSSsrc/app下组件样式默认scss见 angular.json 中style: scss的 schematics 配置与 LESSsrc/theme.less、src/theme.less该格式化器可统一处理。目录结构从项目根到应用源码README 明确了两个核心目录src/实际应用源码e2e/端到端测试源码。其中src/下的组织结构与当前仓库 desktop/angular/src 的实际情况完全对应目录职责src/app/应用源码主体组件、服务、单测等src/app/layout/整体应用布局组件如导航栏navigation/与侧边面板side-dash/src/app/pages/应用的不同页面每个页面关联一个专属路由并渲染在应用主内容区。当前包含dashboard/、monitor/、settings/、spn/、support/、app-view/等路由注册见 app-routing.module.tssrc/app/services/共享服务如 PortAPI 通信、通知notifications.service.ts、状态status.service.ts、SPN/会话数据等src/app/shared/被其他组件或页面复用的共享组件src/app/widgets/侧边面板side dash上的 widget 及其设置组件src/app/debug/调试侧边栏组件src/assets/需随包独立发布的静态资源src/environments/构建与生产环境配置由angular/cli自动处理见 angular.jsonsrc/theme.less/src/styles.scss/src/theme/主题与全局样式另外值得补充的是仓库在src/app之外还以 Angular workspace 的方式维护了多个 library 项目desktop/angular/projects 目录safing/safing/ui与safing/portmaster-api内部库、portmaster-chrome-extension/浏览器扩展构建目标与tauri-builtin/Tauri 桌面壳构建目标见 package.json 中tauri-apps/*依赖。开发服务器与 API 联通原理ng serve开发服务器运行ng serve启动开发服务器访问http://localhost:4200/修改源文件后应用会自动热重载。但直接使用ng serve时开发服务器默认只监听localhost且 README 强调在开发模式未传--prod下UI 期望 Portmaster 运行在ws://127.0.0.1:817/api/database/v1。这一点可以从 desktop/angular/src/environments/environment.ts 得到源码级印证export const environment { production: false, portAPI: ws://127.0.0.1:817/api/database/v1, httpAPI: http://127.0.0.1:817/api, supportHub: https://support.safing.io };而生产环境 desktop/angular/src/environments/environment.prod.ts 则改为动态取当前主机export const environment { production: true, portAPI: ws://${window.location.host}/api/database/v1, httpAPI: http://${window.location.host}/api, supportHub: https://support.safing.io };对应的服务端事实是Portmaster 核心服务默认将 API 监听在127.0.0.1:817定义见 service/core/base/module.govar DefaultAPIListenAddress 127.0.0.1:817。也就是说开发模式前端 WebSocket 直连本机 Portmaster 的数据库订阅端点ws://127.0.0.1:817/api/database/v1生产模式前端由 Portmaster 服务端同源托管base-href 为/ui/modules/portmaster/见 package.json 的build脚本因此 API 地址动态取自页面所在主机。npm scripts比 README 更完整的开发命令README 只列了ng serve而当前仓库 desktop/angular/package.json 的 scripts 字段提供了更丰富的命令这里一并整理命令作用npm start安装依赖 → 构建开发版内部库safing/ui、safing/portmaster-api→ 带proxy.json配置启动ng servenpm run serve构建内部库后以代理模式启动 dev servernpm run serve-appng serve --port 4200 --proxy-config ./proxy.json固定 4200 端口npm run build-libs以 production 配置构建safing/ui与safing/portmaster-api内部库npm run build-libs:dev以 development 配置构建内部库npm run build:dev构建内部库后执行ng buildnpm run build生产构建build-libsng build --configuration production --base-href /ui/modules/portmaster/npm test/ng testKarma 单元测试npm run lintESLint 检查npm run e2eProtractor 端到端测试npm run chrome-extension生产构建浏览器扩展portmaster-chrome-extension目标npm run build-tauri生产构建 Tauri 桌面壳tauri-builtin目标npm run tauri-devTauri 开发模式并行运行serve-app与serve-tauri-builtin端口 4100npm run zip-dist打包dist/产物node pack.js其中proxy.json的作用值得单独说明。仓库中的 desktop/angular/proxy.json 内容为{ /api: { target: http://localhost:817/, secure: false } }也就是说当通过npm start/npm run serve启动时ng serve会把所有/api/*请求代理转发到本机 Portmaster 的http://localhost:817/从而规避开发模式下的跨域问题而 WebSocket 数据通道则直接由environment.portAPI指向ws://127.0.0.1:817/api/database/v1。代码脚手架快速生成组件与模块运行ng generate component component-name生成一个新组件也可以使用其他生成器ng generate directive|pipe|service|class|guard|interface|enum|module配合 angular.json 中的 schematics 默认配置组件样式默认scss、应用为strict严格模式新生成的代码会自动遵循项目的编码规范。由于 UI 采用模块化组织layout/、pages/、services/、shared/、widgets/生成组件后按功能归类到对应目录即可。构建、单元测试与端到端测试构建产物运行ng build构建项目构建产物输出到dist/目录该路径在 angular.json 的outputPath中定义。使用--prod标志进行生产构建——在当前 Angular 16 版本中等价写法是ng build --configuration production并会通过fileReplacements机制将environment.ts替换为environment.prod.ts。对于正式发布场景建议直接使用npm run build它会先以 production 配置构建safing/ui与safing/portmaster-api两个内部库再执行带/ui/modules/portmaster/base-href 的应用生产构建产物可被 Portmaster 服务端 UI 模块直接托管对应 service/ui 的静态资源服务。单元测试运行ng test通过 Karma 执行单元测试。仓库中已经具备一定规模的测试覆盖例如组件级测试app.component.spec.ts服务级测试notifications.service.spec.ts、status.service.spec.tssrc/下的test.ts是 Angular CLI 生成的 Karma 测试入口。端到端测试运行ng e2e通过 Protractor 执行端到端测试测试源码位于 desktop/angular/e2e 目录。E2E 测试会驱动真实浏览器验证完整用户流程适合在本地跑通 UI 后做回归验证。更多帮助如需了解更多 Angular CLI 用法运行ng help查看内置帮助或查阅 Angular CLI 官方 READMEREADME 中指向https://github.com/angular/angular-cli/blob/master/README.md。常见问题与排障要点浏览器访问不到 UI若使用 Docker 方式请确认docker.sh中-p端口映射与 README 的访问地址一致当前仓库脚本为8081:8080应访问http://localhost:8081若本地ng serve访问http://localhost:4200/。UI 空白或数据不刷新确认 Portmaster 服务已以--devmode启动并监听127.0.0.1:817PORTMASTER_ARGS配置后务必systemctl daemon-reload systemctl restart portmaster。跨域报错使用npm start/npm run serve带proxy.json启动 dev server让/api请求走代理WebSocket 直连按环境变量portAPI配置自动处理。内部库safing/ui、safing/portmaster-api报错先执行npm run build-libs:dev或npm start内部已包含该步骤因为应用构建依赖这些库的最新产物。新 UI 与旧 UI 并行两者可同时运行若新 UI 某功能缺失或异常随时切回旧界面不影响 Portmaster 核心功能。小结Portmaster 的 Angular UI 是一个完整的 Angular 16 workspace 应用既支持 Docker 一键起服务docker.sh挂载源码、Node 容器内运行也支持宿主机本地开发angular/cli VSCode 扩展。理解ws://127.0.0.1:817/api/database/v1这条 WebSocket 数据通道前端 environment.ts ↔ 后端 service/core/base/module.go是排查 UI 数据链路问题的关键。按本文步骤你即可在新机器上完成环境准备、构建运行、代码生成与测试全流程并在此基础上继续深入layout/、pages/、services/等模块做功能开发。赞分享网络安全【免费下载链接】portmaster Love Freedom - ❌ Block Mass Surveillance项目地址https://gitcode.com/gh_mirrors/po/portmaster点击查看免费下载相关推荐基于Tauri UI构建现代化桌面应用开发指南基于Tauri UI构建现代化桌面应用开发指南 项目概述 Tauri UI是一个基于现代Web技术构建桌面应用的开发模板它整合了多个前沿技术栈为开发者提供了Aperant 桌面端开发指南Auto Claude UI 的 Electron React 架构、环境搭建与工程规范Aperant 桌面端开发指南Auto Claude UI 的 Electron React 架构、环境搭建与工程规范 本篇技术指南以仓库 apps/de人工智能AI Agent自主智能体代码智能体桌面应用前端开发工具如何用Fluent UI构建现代桌面RSS阅读器前端开发的终极指南如何用Fluent UI构建现代桌面RSS阅读器前端开发的终极指南 Fluent Reader是一款基于Electron、React和Fluent UI构建的桌面应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考