{"hits":[{"lvl2":"2026-01-16 08:55:00.0","created_unix":1768524900000,"id":52,"lvl0":"【使用必看】AI 辅助上手","content":"AI 编程工具可以辅助阅读源码、追踪调用链和排查配置问题。使用前应把代码仓库作为工作目录，并让工具基于当前文件回答。\n\n可使用 **[Claude Code](https://claude.ai/code)**、**[Codex](https://chatgpt.com/)** 等 AI 编程工具辅助阅读代码。在本地项目目录中提供真实代码上下文，有助于定位模块和调用关系。\n\n推荐工具：\n\n- **[CodeX](https://chatgpt.com/)** — OpenAI 官方 CLI，终端中直接与源码对话\n\n- **[Claude Code](https://claude.ai/code)** — Anthropic 官方 CLI，终端中直接与源码对话\n\n\n## PIG Docs Skill 安装\n\nPIG 官方 AI Skill — 在 Claude Code 或其他 Vibe Coding IDE 中，通过 /pigdoc 指令即可智能检索 PIG 文档、获取代码示例，让 AI 真正理解你的框架\n\n\n```bash\nnpx skills add https://github.com/lltx/skills --skill pigdoc\n```\n\n![\"PIG](\"https://minio.pigx.vip/oss/202604/pigdocskills.gif\")
\n\n**典型使用场景：**\n\n- 理解某个模块的整体架构：`pigx-upms 的权限体系是怎么设计的？`\n- 追踪代码调用链：`登录请求从 Gateway 到 Auth 服务的完整流程是什么？`\n- 排查配置问题：`Nacos 配置加载的优先级顺序是什么？`\n- 快速定位文件：`处理用户角色绑定的 Service 在哪里？`\n\n## skill 使用\n\n### 代码阅读\n\n```text\n/pigdoc 网关路由文件在哪里?\n```\n\n![\"使用](\"https://minio.pigx.vip/oss/202604/demo.gif\")
\n\n\n### 开发目录推荐\n\n在 AI 加持下，不再按技术栈划分技术岗位，所有工程师统一称为 Agent 工程师。任务分配也不再基于你是前端、后端还是算法，而是基于产品目标和项目结果。\n\n所以作为全栈开发，要同时熟悉前后端代码，建议在本地项目目录结构如下：\n\n```text\nVSCODE\n├── pigx (IDEA 后端继续打开)\n├── pigx-ui\n└── AGENTS.md/CLAUDE.md\n```\n\n![\"本地开发目录示意图\"](\"https://minio.pigx.vip/oss/202604/aRdldy.png\")
\n","url":"/doc/pigx/quick-start/index"},{"lvl2":"2026-01-16 08:55:00.0","created_unix":1768524900000,"id":56,"lvl0":"系统快速上手部署 👍","content":"\n\n\n\n**无论您是多年编程的高级工程师，还是刚刚入门的实习生，部署请完全参考本文档操作。**\n\n\n## 环境说明\n\n\n[pig4cloud 基础环境软件百度网盘批量下载 「提取密码 8888」](https://pan.baidu.com/s/12pgv8iVr82RHd9IN8p6YBQ?pwd=8888)\n\n\n| 软件 | 版本 | 备注 |\n| ----- | ------------ | ---------------------------------------------------------------------------------------------------------------- |\n| jdk | 17 | 支持 Java 21 |\n| mysql | 8 | [要求设置数据库大小写不敏感 lower_case_table_names = 1](https://blog.csdn.net/fdipzone/article/details/73692929) |\n| **`redis`** | **`7+`** | 强制要求 Redis 7+，不要使用低版本 |\n| Node.js | 20.20 | |\n| maven | 3.8+ | |\n| IDEA | 2023+ | [需要安装 lombok 插件 ](https://blog.csdn.net/wochunyang/article/details/81736354) |\n\n## 项目下载\n\n```bash\ngit clone https://git.pig4cloud.com/pig/pigx.git\n```\n\n## 一、检查 IDEA 环境\n\n\n**请使用 IDEA 2023 以上版本**\n1. 设置 JAVA17 开发环境\n - 进入 `File → Settings → Build, Execution, Deployment → Compiler → Java Compiler`\n - 将 **Project Bytecode Version** 设置为 `17`\n![\"设置](\"https://minio.pigx.top/oss/202309/1695452559.png\")
\n2. 设置全局编译环境\n![\"全局编译环境设置\"](\"https://minio.pigx.top/oss/202309/1695452716.png\")
\n3. 设置模块的编译环境\n - 在 `File → Project Structure → Modules` 中，选中需要调整的模块\n - 将 **Language Level** 设置为 `17`（对应 Java SE 17）\n![\"设置模块编译环境\"](\"https://minio.pigx.top/oss/202309/1695452601.png\")
\n\n\n\n点击 IDEA 右侧的 Maven 面板，勾选 `cloud` Profile。选中 `pigx` 根项目后，点击 Reload All Maven Projects 重新导入项目。\n\n\n![\"在](\"https://minio.pigx.vip/oss/202608/enable-cloud-profile-reload-maven-flow-tinified.png\")
\n\n## 二、配置数据库\n\n**参数说明**\n\n```text\n版本： mysql5.7.8+\n默认字符集: utf8mb4\n默认排序规则: utf8mb4_general_ci\n\n# 要求设置数据库大小写不敏感 https://blog.csdn.net/fdipzone/article/details/73692929\nlower_case_table_names = 1\n```\n\n**数据库脚本说明**\n\n```bash\n-- 建库语句\nsource db/1schema.sql;\n-- 核心数据库\nsource db/2pigxx.sql;\n-- 工作流相关数据库\nsource db/3pigxx_flow.sql;\n-- 定时任务相关数据库\nsource db/4pigxx_job.sql;\n-- 微信公众号相关数据库\nsource db/5pigxx_mp.sql;\n-- 配置中心数据库\nsource db/6pigxx_config.sql;\n-- 支付模块数据库\nsource db/7pigxx_pay.sql;\n-- 代码生成模块数据库\nsource db/8pigxx_codegen.sql;\n-- 报表设计数据库\nsource db/99pigxx_bi.sql;\n-- APP模块数据库\nsource db/999pigxx_app.sql;\n-- 【特别说明】大屏设计器：pigxx_report，自动创建表没有 DML SQL\n```\n\n**关于系统账号密码说明**\n\n| 系统 | 作用 | 账号密码 |\n| ----------------------- | ------------------ | ----------------- |\n| pigx-ui | 用户登录 | admin/123456 |\n| pigx-register | nacos 注册配置中心 | nacos/nacos |\n| pigx-sentinel-dashboard | sentinel 流量保护 | sentinel/sentinel |\n| pigx-monitor | 服务监控 | pigx/pigx |\n| pigx-bi-platform | 报表设计平台 | pigx/pigx |\n\n## 三、配置本地 hosts\n\n\n请按此步骤配置，不要在代码中写入固定 IP。[Windows 配置方法](https://www.jb51.net/os/win10/395409.html) | [macOS 配置方法](https://www.jianshu.com/p/752211238c1b) | [SwitchHosts 使用说明](https://cloud.tencent.com/developer/article/1408956)\n梯子、VPN 等软件会导致 hosts 配置失效，请关闭！\n\n\n```text\n127.0.0.1 pigx-register\n127.0.0.1 pigx-gateway\n127.0.0.1 pigx-redis\n127.0.0.1 pigx-xxl\n127.0.0.1 pigx-mysql\n127.0.0.1 pigx-sentinel\n127.0.0.1 pigx-monitor\n127.0.0.1 pigx-seata\n```\n\n## 四、配置修改\n\n**① nacos 数据源修改**\n\n```text\n# pigx/pigx-register/src/main/resources/application.properties\n# 数据源相关配置修改正确的密码\ndb.user=用户\ndb.password=密码\n```\n\n**② 启动 PigxNacosApplication**\n\n```text\npigx/pigx-register/src/main/java/com/alibaba/nacos/PigxNacosApplication.java\n```\n\n**③ 浏览器访问** `http://127.0.0.1:18080 (pigx 5.9+)` 默认账号密码（nacos/nacos）\n\n**④ 编辑 【浏览器 Nacos 中】application-dev.yml 修改 redis 配置**\n\n```yaml\nspring:\n data:\n redis:\n password: #有密码就改,没密码删除此属性\n```\n\n![\"在](\"https://minio.pigx.vip/oss/202608/nacos-redis-config-flow-annotated-clean-8bit-tinified.png\")
\n\n**⑤ 编辑【浏览器 Nacos 中】 修改数据库配置**\n\n| 序号 | 配置文件名称 | 备注 |\n| ---- | ------------------------------- | ---------------------------------------- |\n| 1 | pigx-upms-biz-dev.yml | 修改数据库链接信息、文件上传本地路径信息 |\n| 2 | pigx-codegen-dev.yml | 修改数据库链接信息 |\n| 3 | pigx-pay-platform-dev.yml | 修改数据库链接信息 |\n| 4 | pigx-flow-biz-dev.yml | 修改数据库链接信息 |\n| 5 | pigx-mp-platform-dev.yml | 修改数据库链接信息 |\n| 6 | pigx-daemon-elastic-job-dev.yml | 修改数据库链接信息 |\n| 7 | pigx-daemon-quartz-dev.yml | 修改数据库链接信息 |\n| 8 | pigx-report-platform-dev.yml | 修改数据库链接信息、文件上传存储路径 |\n\n```yaml\nspring:\n datasource:\n username: ${MYSQL-USER:root} #只需要修改此处用户名密码 ， 冒号后边部分\n password: ${MYSQL-PWD:root} #只需要修改此处用户名密码， 冒号后边部分\n url: jdbc:mysql://${MYSQL-HOST:pigx-mysql}:${MYSQL-PORT:3306}/.... #酌情修改此处端口， 冒号后边部分\n```\n\n\n## 五、启动顺序（基础模块）\n\n```bash\n1.pigx-register/PigxNacosApplication.java\n2.pigx-upms-biz/PigxAdminApplication [注意启动完毕输出路由初始化完毕再去启动其他模块]\n3.pigx-auth/PigxAuthApplication\n4.pigx-gateway/PigxGatewayApplication\n```\n\n\n上方列出的是系统运行所需的核心基础服务，其他业务模块可按需启动。\n如果 IDEA 的 Services 面板没有显示完整的 Spring Boot 启动类，请根据上方模块名称进入对应模块目录，找到包含 `main` 方法的启动类并运行。\n如需使用数据报表功能，还需单独启动积木报表模块。具体步骤参见 [积木报表模块启动说明](https://docs.pig4cloud.com/pig#/doc/pigx/use/pigx-report-jimu)。\n\n\n## 六、启动前端\n\n\nNode.js 版本必须使用 20.20。如遇 npm install 失败，请删除 node_modules 文件夹，再重新执行 npm install。\n\n\n```bash\n# 查看 Node.js 版本\nnode -v\n\n# 切换至 Node.js 20.20\nn 20.20\n\n# 下载前端源码\ngit clone https://git.pig4cloud.com/pig/pigx-ui.git\n\n# 安装前端依赖\nnpm install --registry=https://registry.npmmirror.com\n\n# 启动\nnpm run dev\n```\n\n## 常见问题\n\n\n工单系统搜索可以解决大部分问题，注意使用关键词搜索。新建工单时请提供日志、截图、复现步骤。\n- [常见问题列表 参考私服工单](https://git.pig4cloud.com/pig/pigx/issues?q=&type=all&sort=&state=closed&labels=77&milestone=0&assignee=0)\n\n\n\n\n![\"技术问题排查流程图\"](\"https://minio.pigx.vip/oss/202608/technical-issue-troubleshooting-flow-3d-clean-tinified.png\")
\n","url":"/doc/pigx/quick-start/pigx-deploy"},{"lvl2":"2026-01-16 08:55:00.0","created_unix":1768524900000,"id":61,"lvl0":"新增微服务完成 CRUD 👍","content":"\n\n![\"Archetype](\"https://minio.pigx.vip/oss/202608/pigx-6.1-microservice-crud-flow-tinified.png\")
\n\n\n- 请务必按照本文档的 **包名** 和 **项目名** 进行初始化，其他内容请了解 **feign、mybatis** 的包扫描规则。\n- 当前版本（6.1）默认使用 NPX 命令生成初始化 demo 项目。\n- 如果使用 Maven Archetype 兼容方式，请注意 `archetype` 和 `pigx` 的版本需一致。\n\n\n## 1. 使用 pigx-gen 初始化项目\n\n### 1.1 编译 pigx 项目\n\n\n请先完整编译一次 PIGX 服务端项目，以确保所有依赖包正确安装。\n这是为了避免在执行 Maven Archetype 时出现 \"找不到包\" 的错误。\n\n\n```bash\ncd pigx/\nmvn clean install\n```\n\n### 1.2 执行生成命令\n\n\n\n```bash\n# 进入 pigx 项目根目录\ncd pigx\nnpx -y pigx-gen\n```\n\n\n```bash\n# 直接在win + R CMD小黑屏里面执行，不要使用 powershell 或者其他终端\nmvn org.apache.maven.plugins:maven-archetype-plugin:3.1.0:generate ^\n -Dproject=pigx ^\n -DjavaVersion=17 ^\n -DgroupId=com.pig4cloud ^\n -DartifactId=demo ^\n -Dversion=6.1.0 ^\n -DarchetypeGroupId=com.pig4cloud.archetype ^\n -DarchetypeArtifactId=pigx-gen ^\n -DarchetypeVersion=6.1.0 ^\n -DarchetypeCatalog=local\n```\n| 参数 | 值 | 备注 |\n|-------------------------|-------------------------|-----------------------|\n| `-Dproject` | `pigx` | 项目名称，**专属版本需要修改** |\n| `-DjavaVersion` | `17` | 使用 Java 版本，只有 17 一个选项 |\n| `-DgroupId` | `com.pig4cloud` | 项目包名前缀，**专属版本需要修改** |\n| `-DartifactId` | `demo` | 新增模块名称，不要带特殊字 |\n| `-Dversion` | `6.1.0` | 项目版本号 |\n| `-DarchetypeGroupId` | `com.pig4cloud.archetype` | 【固定值】，专属版本**不**需要修改 |\n| `-DarchetypeArtifactId` | `pigx-gen` | 【固定值】，专属版本**不**需要修改 |\n| `-DarchetypeVersion` | `6.1.0` | 【固定值】，archetype 版本 |\n| `-DarchetypeCatalog` | `local` | 【固定值】local |\n\n\n```bash\nmvn org.apache.maven.plugins:maven-archetype-plugin:3.1.0:generate \\\n -Dproject=pigx \\\n -DjavaVersion=17 \\\n -DgroupId=com.pig4cloud \\\n -DartifactId=demo \\\n -Dversion=6.1.0 \\\n -DarchetypeGroupId=com.pig4cloud.archetype \\\n -DarchetypeArtifactId=pigx-gen \\\n -DarchetypeVersion=6.1.0 \\\n -DarchetypeCatalog=local\n```\n| 参数 | 值 | 备注 |\n|-------------------------|-------------------------|-----------------------|\n| `-Dproject` | `pigx` | 项目名称，**专属版本需要修改** |\n| `-DjavaVersion` | `17` | 使用 Java 版本，只有 17 一个选项 |\n| `-DgroupId` | `com.pig4cloud` | 项目包名前缀，**专属版本需要修改** |\n| `-DartifactId` | `demo` | 新增模块名称，不要带特殊字 |\n| `-Dversion` | `6.1.0` | 项目版本号 |\n| `-DarchetypeGroupId` | `com.pig4cloud.archetype` | 【固定值】，专属版本**不**需要修改 |\n| `-DarchetypeArtifactId` | `pigx-gen` | 【固定值】，专属版本**不**需要修改 |\n| `-DarchetypeVersion` | `6.1.0` | 【固定值】，archetype 版本 |\n| `-DarchetypeCatalog` | `local` | 【固定值】local |\n\n\n\n### 1.3 生成的项目结构如下\n\n```text\n# 模块名称纯英文小写，不要有特殊字符等\ndemo\n ├── README.md\n ├── demo-api # api 模块主要存放 实体、feign 调用接口\n │ ├── pom.xml\n │ └── src\n ├── demo-biz # biz 模块主要存放 controller、业务service、mapper\n │ ├── pom.xml\n │ └── src\n └── pom.xml\n```\n\n## 2. 创建库表\n\n```sql\n-- 创建测试库\ncreate database `pigxx_demo` default character set utf8mb4 collate utf8mb4_general_ci;\n\nUSE pigxx_demo;\n\nSET NAMES utf8mb4;\nSET FOREIGN_KEY_CHECKS = 0;\n\n-- 创建测试表\nDROP TABLE IF EXISTS `demo`;\nCREATE TABLE `demo` (\n `id` bigint NOT NULL COMMENT '编号',\n `username` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin DEFAULT NULL COMMENT '用户名',\n `password` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin DEFAULT NULL COMMENT '密码',\n `del_flag` char(1) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin DEFAULT '0' COMMENT '删除标记',\n PRIMARY KEY (`id`)\n) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin ROW_FORMAT=DYNAMIC COMMENT='demo 表';\n```\n\n## 3. 代码生成\n\n### 3.1 数据源新增\n\n```text\njdbc:mysql://pigx-mysql:3306/pigxx_demo?characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=false&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=GMT%2B8&allowMultiQueries=true&allowPublicKeyRetrieval=true\n```\n\n![\"数据源配置界面\"](\"https://minio.pigx.vip/oss/202608/pigx-microservice-datasource-crud-flow-annotated-clean-tinified.png\")
\n\n### 3.2 生成代码\n\n代码生成配置项的详细使用说明，请参考 [代码生成基础配置](https://docs.pig4cloud.com/pig#/doc/pigx/use/pigx-codegen-base)。\n\n\n选择数据源生成代码时，请注意包名称和模块名称。\n\n\n![\"代码生成配置界面\"](\"https://minio.pigx.vip/oss/202608/demo-codegen-table-entry-flow-v4-tinified.png\")
\n\n- 代码生成的包结构如下\n\n```text\n├── demo_menu.sql # 新增模块对应的菜单 SQL\n├── pigx # 后端代码包含增删改查代码\n│ └── src\n└── pigx-ui # 前端代码包含页面\n └── src\n```\n\n### 3.3 菜单维护\n\n\n\n当代码生成基础信息中配置此功能的【所属菜单】时，会自动维护相关的菜单和按钮，**不需要手动执行 SQL 脚本。**\n![\"自动维护菜单配置\"](\"https://minio.pigx.top/oss/202408/1723989187.png\")
\n\n\n执行代码生成包（3.2 中的 demo_menu.sql）中的 SQL 脚本（在 **pigxx 数据库**）。\n![\"手动维护菜单\"](\"https://minio.pigx.top/oss/202312/1701610364.png\")
\n\n\n\n## 4. 配置动态路由\n\n\n\n同步路由设置为自动创建，则会自动创建一条【/demo】的网关路由，存在则跳过，不需要手动维护。\n![\"自动创建路由配置\"](\"https://minio.pigx.top/oss/202408/1723988979.png\")
\n\n\n同步路由设置为手动添加。\n![\"手动添加路由设置\"](\"https://minio.pigx.top/oss/202408/1723988669.png\")
\n进入 \"基础工具\" > \"路由管理\"，添加 demo-biz 对应的路由规则。\n![\"路由管理界面\"](\"https://minio.pigx.top/oss/202507/O6B0yj.png\")
\n\n\n\n## 5. 角色分配权限\n\n\n进入“系统管理 > 权限管理 > 角色管理”，在【管理员】行点击“授权”，勾选“demo 表管理”并点击“修改”。重新启动前端并**重新登录**后，请强制刷新浏览器，查看 demo 功能是否生效。\n\n\n![\"管理员角色分配](\"https://minio.pigx.vip/oss/202608/role-permission-demo-two-step-annotated-clean-tinified.png\")
\n","url":"/doc/pigx/quick-start/pigx-new-app"},{"lvl2":"2026-01-16 08:55:00.0","created_unix":1768524900000,"id":64,"lvl0":"系统账号密码说明 👍","content":"\n以下为系统默认账号密码，仅供开发和测试环境使用。生产环境部署前，请务必修改所有默认密码，避免安全风险。\n\n\n## 前端默认登录\n\n| 访问地址 | 用户名 | 密码 | 说明 |\n| -------------- | ------ | ------ | ---- |\n| http://ip:8888 | admin | 123456 | 系统管理员账号 |\n\n## pigx-register 注册配置中心\n\n| 访问地址 | 用户名 | 密码 | 说明 |\n| --------------- | ------ | ----- | ---- |\n| http://ip:18080 | nacos | nacos | Nacos 配置中心 |\n\n## pigx-monitor 监控模块\n\n| 访问地址 | 用户名 | 密码 | 说明 |\n| -------------- | ------ | ---- | ---- |\n| http://ip:5001 | pigx | pigx | Spring Boot Admin 监控 |\n\n## pigx-xxl-job-admin 定时任务管理台\n\n| 访问地址 | 用户名 | 密码 | 说明 |\n| ---------------------------- | ------ | ------ | ---- |\n| http://ip:9080 | admin | 123456 | XXL-Job 任务调度平台 |\n\n## pigx-sentinel 管理台\n\n| 访问地址 | 用户名 | 密码 | 说明 |\n| -------------- | -------- | -------- | ---- |\n| http://ip:5020 | sentinel | sentinel | Sentinel 流量控制 |\n\n\n首次登录后，建议立即修改默认密码。各模块的密码修改方式请参考对应的官方文档。\n","url":"/doc/pigx/quick-start/pigx-deploy-account"},{"lvl2":"2026-01-16 08:55:00.0","created_unix":1768524900000,"id":67,"lvl0":"【进阶】单体版本部署","content":"\n\n\nPIGX 有且仅有一套代码，同时支持微服务与单体架构运行方式，注意看如下文档！\n\n\n## 一、服务端代码运行\n\n### ① 下载源代码\n\n```bash\ngit clone https://git.pig4cloud.com/pig/pigx.git\n```\n\n### ② 设置 Maven boot Profile\n\n\n点击 IDEA 右侧的 Maven 面板，勾选 `boot` Profile。选中 `pigx` 根项目后，点击 Reload All Maven Projects 重新导入项目。若仍有编译错误，可重复 Reload。\n\n\n![\"在](\"https://minio.pigx.vip/oss/202608/enable-boot-profile-reload-maven-flow-tinified.png\")
\n\n### ③ 初始化数据库\n\n**数据库脚本说明**\n\n```bash\nsource db/0pigxx_boot.sql\n```\n\n### ④ 修改代码中的数据库和 Redis 连接信息\n\n```text\n# pigx-boot/application-dev.yml\n├── pigx-boot\n│ ├── src\n│ │ └── main\n│ │ └── resources\n│ │ ├── application-dev.yml\n```\n\n![\"配置](\"https://minio.pigx.vip/oss/202608/application-dev-redis-database-file-path-flow-tinified.png\")
\n\n### ⑤ 运行服务端\n\n![\"运行服务端\"](\"https://minio.pigx.top/oss/202405/1715785415.png\")
\n\n## 二、前端代码运行\n\n### ① 下载源代码\n\n```bash\ngit clone https://git.pig4cloud.com/pig/pigx-ui.git\n```\n\n### ② 指定前端架构\n\n\n请务必检查前端 `.env` 文件中的 `VITE_IS_MICRO` 配置，需设置为 `false`。\n\n\n```text\nVITE_IS_MICRO=false\n```\n\n![\"前端架构配置\"](\"https://minio.pigx.top/oss/202304/1681179463.png\")
\n\n### ③ 安装前端依赖\n\n\nNode.js 版本必须使用 20.20。如遇 npm install 失败，请删除 node_modules 文件夹，再重新执行 npm install。\n\n\n```bash\n# 查看 Node.js 版本\nnode -v\n\n# 切换至 Node.js 20.20\nn 20.20\n```\n\n```bash\n# 下载前端源码\ngit clone https://git.pig4cloud.com/pig/pigx-ui.git\n\n# 安装前端依赖\nnpm install --registry=https://registry.npmmirror.com\n\n# 启动\nnpm run dev\n```\n\n## 必看：单体和微服务版本区别\n\n### 关键差异说明\n\n\n**单体版本所有请求统一使用 `/admin` 前缀（context-path）**\n- 登录端点：`http://pigx-gateway:9999/admin/oauth2/token`\n- 接口文档：`http://pigx-gateway:9999/admin/doc.html`\n- **路径变更示例**：微服务版本的 `/pay/order/save` 在单体版本中变更为 `/admin/order/save`\n\n\n### 功能支持差异\n\n单体版本不支持以下功能：\n\n- 不包含大屏设计器（[参考文档](https://docs.pig4cloud.com/pig#/doc/pigx/use/pigx-datav)）\n- 不包含报表设计器（[参考文档](https://docs.pig4cloud.com/pig#/doc/pigx/use/pigx-report-jimu)）\n- 不包含路由管理、服务监控、流量监控等微服务组件\n\n### 配置文件说明\n\n\n单体版本配置文件加载规则与微服务版本有所不同，需要将所有的配置项配置在 `pigx-boot` 目录的本地文件中。\n\n\n| 文件名 | 作用 |\n|-------|------|\n| `application.yml` | 通用配置文件（正常情况下不需要改动） |\n| `application-dev.yml` | 开发环境配置文件（redis, mysql） |\n","url":"/doc/pigx/quick-start/pigx-boot-deploy"},{"lvl2":"2026-01-16 08:55:00.0","created_unix":1768524900000,"id":71,"lvl0":"【进阶】单体版本CRUD","content":"\n\n## 1. 使用 pigx-gen 初始化项目\n\n### 1.1 执行生成命令\n\n\n \n```bash\n# 进入 pigx 项目根目录\ncd pigx\nnpx -y pigx-gen\n```\n \n \n```bash\n# 直接在win + R CMD小黑屏里面执行，不要使用 powershell 或者其他终端\nmvn org.apache.maven.plugins:maven-archetype-plugin:3.1.0:generate ^\n -Dproject=pigx ^\n -DjavaVersion=17 ^\n -DgroupId=com.pig4cloud ^\n -DartifactId=demo ^\n -Dversion=6.1.0 ^\n -DarchetypeGroupId=com.pig4cloud.archetype ^\n -DarchetypeArtifactId=pigx-gen ^\n -DarchetypeVersion=6.1.0 ^\n -DarchetypeCatalog=local\n```\n| 参数 | 值 | 备注 |\n|-------------------------|-------------------------|-----------------------|\n| `-Dproject` | `pigx` | 项目名称，**专属版本需要修改** |\n| `-DjavaVersion` | `17` | 使用 Java 版本，只有 17 一个选项 |\n| `-DgroupId` | `com.pig4cloud` | 项目包名前缀，**专属版本需要修改** |\n| `-DartifactId` | `demo` | 新增模块名称 , 不要带特殊字 |\n| `-Dversion` | `6.1.0` | 项目版本号 |\n| `-DarchetypeGroupId` | `com.pig4cloud.archetype` | 【固定值】，专属版本**不**需要修改 |\n| `-DarchetypeArtifactId` | `pigx-gen` | 【固定值】，专属版本**不**需要修改 |\n| `-DarchetypeVersion` | `6.1.0` | 【固定值】，archetype 版本 |\n| `-DarchetypeCatalog` | `local` | 【固定值】local |\n \n \n```bash\nmvn org.apache.maven.plugins:maven-archetype-plugin:3.1.0:generate \\\n -Dproject=pigx \\\n -DjavaVersion=17 \\\n -DgroupId=com.pig4cloud \\\n -DartifactId=demo \\\n -Dversion=6.1.0 \\\n -DarchetypeGroupId=com.pig4cloud.archetype \\\n -DarchetypeArtifactId=pigx-gen \\\n -DarchetypeVersion=6.1.0 \\\n -DarchetypeCatalog=local\n```\n| 参数 | 值 | 备注 |\n|-------------------------|-------------------------|-----------------------|\n| `-Dproject` | `pigx` | 项目名称，**专属版本需要修改** |\n| `-DjavaVersion` | `17` | 使用 Java 版本，只有 17 一个选项 |\n| `-DgroupId` | `com.pig4cloud` | 项目包名前缀，**专属版本需要修改** |\n| `-DartifactId` | `demo` | 新增模块名称 , 不要带特殊字 |\n| `-Dversion` | `6.1.0` | 项目版本号 |\n| `-DarchetypeGroupId` | `com.pig4cloud.archetype` | 【固定值】，专属版本**不**需要修改 |\n| `-DarchetypeArtifactId` | `pigx-gen` | 【固定值】，专属版本**不**需要修改 |\n| `-DarchetypeVersion` | `6.1.0` | 【固定值】，archetype 版本 |\n| `-DarchetypeCatalog` | `local` | 【固定值】local |\n \n\n\n### 1.2 生成的项目结构如下\n\n```text\n# 模块名称纯英文小写，不要有特殊字符等\ndemo\n ├── README.md\n ├── demo-api # api 模块主要存放 实体、feign 调用接口\n │ ├── pom.xml\n │ └── src\n ├── demo-biz # biz 模块主要存放 controller、业务service、mapper\n │ ├── pom.xml\n │ └── src\n └── pom.xml\n```\n\n### 1.3 pigx-boot/pom.xml 新增 demo module 依赖\n\n\n新增的 demo-biz 模块必须放在 pigx-auth 模块之后，否则无法进行鉴权。\n\n\n- ① pigx-boot/pom.xml\n\n- ② 注意引入 demo-biz 在 pigx-auth 依赖之后\n\n- ③ Maven reload\n\n![\"模块依赖配置\"](\"https://minio.pigx.top/oss/202406/1717580585.png\")
\n\n## 2. 创建库表\n\n```sql\n-- 使用单体版本的核心库，pigxx_boot 库\nUSE pigxx_boot;\n\nSET NAMES utf8mb4;\nSET FOREIGN_KEY_CHECKS = 0;\n\n-- 创建测试表\nDROP TABLE IF EXISTS `demo`;\nCREATE TABLE `demo` (\n `id` bigint NOT NULL COMMENT '编号',\n `username` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin DEFAULT NULL COMMENT '用户名',\n `password` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin DEFAULT NULL COMMENT '密码',\n `del_flag` char(1) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin DEFAULT '0' COMMENT '删除标记',\n PRIMARY KEY (`id`)\n) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin ROW_FORMAT=DYNAMIC COMMENT='demo 表';\n```\n\n## 3. 代码生成\n\n### 3.1 数据源新增\n\n```yaml\njdbc:mysql://pigx-mysql:3306/pigxx_boot?characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=false&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=GMT%2B8&allowMultiQueries=true&allowPublicKeyRetrieval=true\n```\n\n![\"数据源配置\"](\"https://minio.pigx.vip/oss/202608/pigx-single-datasource-crud-flow-annotated-clean-tinified.png\")
\n\n### 3.2 生成代码\n\n代码生成配置项的详细使用说明，请参考 [代码生成基础配置](https://docs.pig4cloud.com/pig#/doc/pigx/use/pigx-codegen-base)。\n\n\n选择数据源生成代码时，请注意包名称和模块名称。\n\n\n\n\n### 3.3 菜单维护\n\n\n\n当代码生成基础信息中配置此功能的【所属菜单】时，会自动维护相关的菜单和按钮，不需要手动执行 SQL 脚本。\n\n\n\n\n执行代码生成包（3.2 中的 demo_menu.sql）中的 SQL 脚本（在 pigxx 数据库）。\n\n\n\n\n\n## 4. 角色分配权限\n\n\n进入“系统管理 > 权限管理 > 角色管理”，在【管理员】行点击“授权”，勾选“demo 表管理”并点击“修改”。重新启动前端并重新登录后，请强制刷新浏览器，查看 demo 功能是否生效。\n\n\n\n","url":"/doc/pigx/quick-start/pigx-boot-new-app"},{"lvl2":"2026-01-16 08:55:00.0","created_unix":1768524900000,"id":74,"lvl0":"【进阶】移动端小程序部署","content":"![\"新版移动端预览\"](\"https://minio.pigx.vip/oss/202605/s6bw8o.png\")
\n\n## 下载并安装依赖\n\n```bash\ngit clone https://git.pig4cloud.com/big/pigx-app-wot.git\ncd pigx-app-wot\nnpm install --registry=https://registry.npmmirror.com\n```\n\n\n新版移动端使用 `uni-app`、Vue 3、TypeScript、Wot UI 2.0、UnoCSS、Pinia 和 Alova。目录结构、开发命令和编码约定以 `pigx-app-wot/README.md` 为准。\n\n\n\n\n请使用 Node.js 20.20，其他版本可能导致 uni-app 编译异常。\n\n## 配置 H5 运行参数\n\n默认配置位于 `.env`。部署前按实际后端网关、PC 管理端地址和 H5 访问路径调整以下参数：\n\n```text\n# 后端是否是微服务架构，true 表示启用微服务相关逻辑。\nVITE_IS_MICRO=false\n\n# 是否以 H5 模式运行，H5 编译产物会自动识别运行时环境。\nVITE_IS_H5=false\n\n# 后端接口基础地址。\nVITE_APP_BASE_URL=http://127.0.0.1:9999\n\n# PC 管理端基础地址。\nVITE_APP_PC_BASE_URL=http://127.0.0.1:8888\n```\n\n## 本地运行小程序模式\n\n```bash\npnpm dev:mp-weixin\n```\n\n\n默认账号密码来自 `sys_user` 数据，示例为 `admin/123456`。\n\n\n## 导入微信开发工具\n\n- [下载微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)\n\n选择项目并导入 `pigx-app-wot/dist/dev/mp-weixin` 目录。\n\n![\"微信开发工具导入项目\"](\"https://minio.pigx.vip/oss/202606/fodVi0.png\")
\n\n\n注意在开发环境中配置不校验合法域名。\n\n\n![\"不校验合法域名\"](\"https://minio.pigx.top/oss/202306/1687533749.png\")
\n\n## 如果需要微信一键登录\n\n则需要配置小程序的 AppID 和 AppSecret。\n\n![\"配置小程序](\"https://minio.pigx.vip/oss/202608/miniprogram-appid-appsecret-flow-annotated-clean-tinified.png\")
\n\n## AI 开发辅助\n\n新版移动端基于 Wot UI 2.0 开发，组件选型、API 查询和页面生成可参考 [Wot UI 官方文档](https://wot-ui.cn/component/button.html)。\n\n如需在 AI 编程工具中安装 Wot UI 技能，可执行：\n\n```bash\nnpx skills add wot-ui/open-wot\n```\n\n该技能适合处理 Wot UI 2.0 日常开发，包括组件选型、API 查询、生成 Vue 3 + `uni-app` 页面代码，以及排查 Toast、Dialog 挂载等典型问题。\n","url":"/doc/pigx/quick-start/pigx-front-uniapp"},{"lvl2":"2026-05-28 09:58:00.0","created_unix":1779933480000,"id":2150,"lvl0":"【进阶】移动端 H5 部署","content":"\n\n## 下载并安装依赖\n\n```bash\ngit clone https://git.pig4cloud.com/big/pigx-app-wot.git\ncd pigx-app-wot\nnpm install --registry=https://registry.npmmirror.com\n```\n\n\n新版移动端使用 `uni-app`、Vue 3、TypeScript、Wot UI 2.0、UnoCSS、Pinia 和 Alova。目录结构、开发命令和编码约定以 `pigx-app-wot/README.md` 为准。\n\n\n\n\n请使用 Node.js 20.20，其他版本可能导致 uni-app 编译异常。\n\n## 配置 H5 运行参数\n\n默认配置位于 `.env`。部署前按实际后端网关、PC 管理端地址和 H5 访问路径调整以下参数：\n\n```text\n# 后端是否是微服务架构，true 表示启用微服务相关逻辑。\nVITE_IS_MICRO=false\n\n# 是否以 H5 模式运行，H5 编译产物会自动识别运行时环境。\nVITE_IS_H5=true\n\n# 后端接口基础地址。\nVITE_APP_BASE_URL=http://127.0.0.1:9999\n\n# PC 管理端基础地址。\nVITE_APP_PC_BASE_URL=http://127.0.0.1:8888\n```\n\n## 本地运行 H5 模式\n\n```bash\npnpm dev:h5\n```\n\n\n默认账号密码来自 `sys_user` 数据，示例为 `admin/123456`。\n\n\n## 构建 H5 生产资源\n\n```bash\npnpm build:h5\n```\n\n构建完成后，H5 产物位于 `dist/build/h5`：\n\n```text\ndist/build/h5\n├── assets\n├── index.html\n└── static\n```\n\n部署时将 `dist/build/h5` 中的内容放到 Nginx 静态目录的 `mobile` 子目录，例如 `/path/mobile/index.html`。\n\n## 使用 Nginx 发布\n\n以下示例保留 `/mobile/` context-path，后端网关地址按实际环境调整：\n\n```text\nserver {\n listen 28080;\n server_name localhost;\n\n # 将 H5 构建产物放在 /path/mobile/index.html。\n root /path/;\n\n location ^~ /api/ {\n proxy_pass http://pigx-gateway:9999/;\n proxy_connect_timeout 60s;\n proxy_read_timeout 120s;\n proxy_send_timeout 120s;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n proxy_set_header X-Forwarded-Proto http;\n proxy_http_version 1.1;\n proxy_set_header Upgrade $http_upgrade;\n proxy_set_header Connection \"upgrade\";\n proxy_set_header Host $http_host;\n }\n\n location /mobile/api/ {\n proxy_pass http://pigx-gateway:9999/;\n proxy_connect_timeout 60s;\n proxy_read_timeout 120s;\n proxy_send_timeout 120s;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n proxy_set_header X-Forwarded-Proto http;\n proxy_http_version 1.1;\n proxy_set_header Host $http_host;\n }\n\n location /mobile/ {\n try_files $uri $uri/ /mobile/index.html;\n }\n\n location / {\n try_files $uri $uri/ /mobile/index.html;\n }\n}\n```\n\n\n按上述配置发布后，移动端 H5 访问地址为 `http://服务器地址:28080/mobile/`。\n\n\n## AI 开发辅助\n\n新版移动端基于 Wot UI 2.0 开发，组件选型、API 查询和页面生成可参考 [Wot UI 官方文档](https://wot-ui.cn/component/button.html)。\n\n如需在 AI 编程工具中安装 Wot UI 技能，可执行：\n\n```bash\nnpx skills add wot-ui/open-wot\n```\n\n该技能适合处理 Wot UI 2.0 日常开发，包括组件选型、API 查询、生成 Vue 3 + `uni-app` 页面代码，以及排查 Toast、Dialog 挂载等典型问题。\n","url":"/doc/pigx/quick-start/pigx-app-new"},{"lvl2":"2026-06-07 07:02:13.0","created_unix":1780786933000,"id":2157,"lvl0":"【进阶】移动端应用打包","content":"\n\n\n\n## 前置条件：配置应用开启跨域\n\n- 请确保后端服务已经开启跨域支持，否则 APP 将无法正常访问后端服务\n- 跨域配置参考文档：[服务配置 CORS 跨域](https://docs.pig4cloud.com/pig#/doc/pigx/back-end/pigx-gateway-cors)\n\n## 下载 PIGX 移动端应用并安装依赖\n\n```bash\ngit clone https://git.pig4cloud.com/big/pigx-app-wot.git\ncd pigx-app-wot\nnpm install --registry=https://registry.npmmirror.com\n```\n\n请使用 Node.js 20.20，其他版本可能导致 uni-app 编译异常。\n\n## 安装 HBuilderX 开发工具\n\n### 下载并安装 HBuilderX\n\n打开 [HBuilderX 官方下载页](https://www.dcloud.io/hbuilderx.html)，根据操作系统和处理器架构选择 Windows、Mac Intel、Mac Arm 或 Linux x64 安装包。\n\n![\"HBuilderX](\"https://minio.pigx.vip/oss/202608/hbuilderx-mobile-packaging-flow-annotated-clean-16x9-tinified.png\")
\n\n### 导入项目\n\n将完整的 `pigx-app-wot` 目录导入 HBuilderX ，打开根目录下的 `.env` 文件。\n\n### 修改 `.env` 配置\n\nApp 调试或打包前，先按实际部署环境修改以下配置：\n\n```text title=\".env\"\n# 后端是否是微服务架构，true 表示启用微服务相关逻辑。\nVITE_IS_MICRO=false\n\n# App 打包不是 H5 模式，此处固定设置为 false。\nVITE_IS_H5=false\n\n# 后端接口地址，替换为手机可以访问的网关或 pigx-boot 地址。\nVITE_APP_BASE_URL=http://172.16.1.152:9999\n\n# PIGX UI 管理端地址，替换为手机可以访问的 PC 端地址。\nVITE_APP_PC_BASE_URL=http://172.16.1.152:8888\n```\n\n| 配置项 | 用途 | 设置方式 |\n| --- | --- | --- |\n| `VITE_IS_MICRO` | 后端架构开关 | 微服务架构设置为 `true`；`pigx-boot` 单体模式设置为 `false` |\n| `VITE_IS_H5` | H5 运行模式开关 | App 调试和打包设置为 `false` |\n| `VITE_APP_BASE_URL` | 后端接口基础地址 | 微服务填写网关地址；单体模式填写 `pigx-boot` 服务地址 |\n| `VITE_APP_PC_BASE_URL` | PIGX UI 管理端基础地址 | 填写 PC 管理端的协议、IP 或域名以及端口 |\n\n真机不能通过 `localhost` 或 `127.0.0.1` 访问电脑上的服务。请填写手机可以访问的局域网 IP 或公网域名，并确认对应端口已经放行。\n\n## 运行调试\n\n\n运行调试前，请确保通过 USB 连接安卓手机至电脑，并开启手机的 USB 调试模式。\n\n\n- 在 HBuilderX 中，选择 **运行** > **运行到手机或模拟器** > **运行到 Android App 基座**\n- 等待编译完成后，应用会自动安装到连接的安卓设备上\n\n![\"运行调试配置\"](\"https://minio.pigx.top/oss/202311/1700822213.png\")
\n\n![\"运行到](\"https://minio.pigx.vip/oss/202606/L0Ib8r.png\")
\n","url":"/doc/pigx/quick-start/pigx-app-wot-new"},{"lvl2":"2026-01-16 08:55:00.0","created_unix":1768524900000,"id":85,"lvl0":"浏览器兼容性","content":"## 浏览器支持情况\n\n![\"Edge](\"https://minio.pigx.vip/oss/202608/browser-compatibility-pig-3d-tinified.png\")
\n\n## 特别说明\n\n> **注意**：由于 [Vue3](https://v3.cn.vuejs.org/guide/introduction.html) 不再支持 IE11，故而 [ElementPlus](https://element-plus.gitee.io/zh-CN/guide/design.html) 也不支持 IE11 及之前版本。\n","url":"/doc/pigx/front-end/pigx-front-compatible"},{"lvl2":"2026-01-16 08:55:00.0","created_unix":1768524900000,"id":88,"lvl0":"前端配置项说明","content":"## 主题配置文件\n\n前端主题配置文件位于 `src/stores/themeConfig.ts`，用于管理全局主题、布局、界面显示等配置。\n\n修改 `themeConfig.ts` 后，如页面仍显示旧值，请清除 `window.localStorage`，或在布局配置抽屉底部点击「一键恢复默认」。\n\n\n 自 V5.12.1 起，网站 Logo、网站标题、备案/版权信息、隐私提示以及登录页相关开关，优先在「系统管理 → 权限管理 → 网站配置」中维护。修改后核对页面底部的变更提示，再保存配置。![\"网站配置流程\"](\"https://minio.pigx.vip/oss/202608/website-config-flow-tinified.png\")
\n 本文保留 `themeConfig.ts` 的本地配置说明，适用于未接入网站配置中心的历史版本或需要自定义布局主题的场景。\n\n\n## 配置项详细说明\n\n| 配置项 | 默认值 | 描述 |\n| --- | --- | --- |\n| isDrawer | false | 是否开启布局配置抽屉 |\n| primary | #2E5CF6 | 全局主题默认 primary 主题颜色 |\n| isDark | false | 是否开启深色模式 |\n| topBar | #2E5CF6 | 顶栏设置默认顶栏导航背景颜色 |\n| topBarColor | #FFFFFF | 顶栏设置默认顶栏导航字体颜色 |\n| isTopBarColorGradual | false | 顶栏设置是否开启顶栏背景颜色渐变 |\n| menuBar | #FFFFFF | 菜单设置默认菜单导航背景颜色 |\n| menuBarColor | #475569 | 菜单设置默认菜单导航字体颜色 |\n| menuBarActiveColor | #eff6ff | 菜单设置默认菜单高亮背景色 |\n| isMenuBarColorGradual | false | 菜单设置是否开启菜单背景颜色渐变 |\n| columnsMenuBar | #545c64 | 分栏设置默认分栏菜单背景颜色 |\n| columnsMenuBarColor | #e6e6e6 | 分栏设置默认分栏菜单字体颜色 |\n| isColumnsMenuBarColorGradual | false | 分栏设置是否开启分栏菜单背景颜色渐变 |\n| isColumnsMenuHoverPreload | false | 分栏设置是否开启分栏菜单鼠标悬停预加载（预览菜单） |\n| isCollapse | false | 界面设置是否开启菜单水平折叠效果 |\n| isUniqueOpened | true | 界面设置是否开启菜单手风琴效果 |\n| isFixedHeader | false | 界面设置是否开启固定 Header |\n| isFixedHeaderChange | false | 初始化变量，用于更新菜单 el-scrollbar 的高度，请勿删除 |\n| isClassicSplitMenu | true | 界面设置是否开启经典布局分割菜单（仅经典布局生效） |\n| isLockScreen | false | 界面设置是否开启自动锁屏 |\n| lockScreenTime | 30 | 界面设置开启自动锁屏倒计时（秒） |\n| isShowLogo | true | 界面显示是否开启侧边栏 Logo |\n| isShowLogoChange | false | 初始化变量，用于 el-scrollbar 的高度更新，请勿删除 |\n| isBreadcrumb | true | 界面显示是否开启 Breadcrumb，强制经典、横向布局不显示 |\n| isTagsview | true | 界面显示是否开启 Tagsview |\n| isBreadcrumbIcon | false | 界面显示是否开启 Breadcrumb 图标 |\n| isTagsviewIcon | false | 界面显示是否开启 Tagsview 图标 |\n| isCacheTagsView | true | 界面显示是否开启 TagsView 缓存 |\n| isSortableTagsView | true | 界面显示是否开启 TagsView 拖拽 |\n| isShareTagsView | false | 界面显示是否开启 TagsView 共用 |\n| isFooter | true | 界面显示是否开启 Footer 底部版权信息 |\n| isGrayscale | false | 界面显示是否开启灰色模式 |\n| isInvert | false | 界面显示是否开启色弱模式 |\n| isWartermark | true | 界面显示是否开启水印 |\n| isChat | false | 界面显示是否开启 AI 助手 |\n| isPageAgent | true | 界面显示是否开启超级助手 |\n| wartermarkText | PigX | 界面显示水印文案 |\n| quickLinkNum | 12 | 首页快捷导航数量上限 |\n| tagsStyle | tags-style-five | 其它设置 Tagsview 风格，默认 tags-style-five |\n| animation | slide-right | 其它设置主页面切换动画，默认 slide-right |\n| columnsAsideStyle | columns-round | 其它设置分栏高亮风格，默认 columns-round |\n| columnsAsideLayout | columns-vertical | 其它设置分栏布局风格 |\n| layout | classic | 布局设置，支持 defaults、classic、transverse、columns |\n| isRequestRoutes | true | 后端控制路由是否开启 |\n| globalI18n | zh-cn | 默认语言，支持 zh-cn、en、zh-tw |\n| globalComponentSize | 'default' | 默认组件大小，支持 large、default、small |\n| globalTitle | PIGX | 保留的本地兼容字段；当前页面标题读取网站配置 |\n| footerAuthor | pig4cloud.com | 保留的本地兼容字段；当前页脚内容读取网站配置 |\n\n配置项按功能分为主题颜色、菜单设置、界面设置、界面显示、其他设置和布局设置。\n\n## 重要配置项说明\n\n### 主题颜色配置\n\n- **primary** - 全局主题色，影响按钮、链接等元素的颜色\n- **isDark** - 深色模式开关，适配暗黑主题\n\n修改 `primary` 后，系统会自动生成对应的浅色和深色变体。\n\n### 菜单和顶栏配置\n\n- **menuBar** / **topBar** - 菜单和顶栏的背景颜色\n- **menuBarColor** / **topBarColor** - 菜单和顶栏的字体颜色\n- **isMenuBarColorGradual** / **isTopBarColorGradual** - 是否开启渐变背景\n\n### 界面设置\n\n- **isCollapse** - 菜单折叠开关\n- **isUniqueOpened** - 手风琴模式，同时只展开一个菜单\n- **isFixedHeader** - 固定顶栏，滚动时顶栏不动\n- **isLockScreen** - 自动锁屏功能\n- **lockScreenTime** - 自动锁屏倒计时（秒）\n\n开启手风琴模式后，系统同时只保留一个展开的菜单项。\n\n### TagsView 配置\n\n- **isTagsview** - 是否显示标签页\n- **isCacheTagsView** - 是否缓存标签页内容\n- **isSortableTagsView** - 是否允许拖拽排序\n- **isShareTagsView** - 是否共用详情页标签\n\n开启共用模式后，详情页在 TagsView 中只保留一个标签；关闭后可以打开多个详情页标签。\n\n### 布局和样式\n\n- **layout** - 布局类型（defaults、classic、transverse、columns）\n- **tagsStyle** - 标签页风格\n- **animation** - 页面切换动画\n- **columnsAsideStyle** - 分栏高亮风格\n\n### 水印配置\n\n- **isWartermark** - 是否开启水印\n- **wartermarkText** - 水印文案内容\n\n生产环境可按需开启水印，用于在页面截图中保留来源标识。\n\n## 图形化配置\n\n布局、主题色、菜单样式和界面显示等选项可以直接在布局配置抽屉中调整，并实时预览效果。点击右上角的「更多」图标，再选择「主题设置」打开抽屉。\n\n![\"布局配置流程\"](\"https://minio.pigx.vip/oss/202608/layout-config-flow-tinified.png\")
\n","url":"/doc/pigx/front-end/pigx-front-config-setting"},{"lvl2":"2026-01-16 08:55:00.0","created_unix":1768524900000,"id":91,"lvl0":"前端ENV环境配置","content":"## 环境变量配置\n\n前端项目使用 Vite 的环境变量配置系统，通过 `.env` 文件管理不同环境的配置项。\n\n\n环境变量配置文件位于项目根目录，包括 `.env`、`.env.development`、`.env.development.local`、`.env.local` 等文件。\n\n\n\n 自 V5.12.1 起，站点相关配置优先通过网站配置的图形化界面维护，包括网站 Logo、网站标题、备案/版权信息、隐私提示、Clarity ID、验证码模式、前端注册、国际化切换、亮暗模式、反调试保护、钉钉导入和企业微信导入等。\n 未接入网站配置中心的版本，仍按本文通过 `.env` 方式维护相关变量。\n\n\n## 配置项说明\n\n| 配置项 | 值 | 描述 |\n| --- | --- | --- |\n| **VITE_IS_MICRO** | `true` | 是否是微服务架构（重要），因为单体和微服务版本共用一套前端 |\n| **VITE_GLOBAL_TITLE** | `'PIGX ADMIN'` | 旧版网站主标题配置，新版请在网站配置中维护 |\n| **VITE_FOOTER_TITLE** | `'©2024 pig4cloud.com'` | 旧版页脚信息配置，新版请在网站配置中维护 |\n| **VITE_PUBLIC_PATH** | `/` | 前端访问前缀 |\n| **VITE_API_URL** | `/api` | 后端请求前缀 |\n| **VITE_ADMIN_PROXY_PATH** | `http://localhost:9999` | ADMIN 服务地址 |\n| **VITE_PWD_ENC_KEY** | `'pigxpigxpigxpigx'` | 前端加密密钥（16 位，具体参考文档前端报文加密） |\n| **VITE_OAUTH2_PASSWORD_CLIENT** | `'pig:pig'` | OAUTH2 密码模式客户端信息 |\n| **VITE_OAUTH2_MOBILE_CLIENT** | `'app:app'` | OAUTH2 短信客户端信息 |\n| **VITE_OAUTH2_SOCIAL_CLIENT** | `'social:social'` | OAUTH2 社交登录客户端信息 |\n| **VITE_VERIFY_ENABLE** | `true` | 旧版前端验证码开关，新版请在网站配置中选择验证码模式 |\n| **VITE_VERIFY_IMAGE_ENABLE** | `false` | 旧版前端图形验证码开关，新版请在网站配置中选择验证码模式 |\n| **VITE_WEBSOCKET_ENABLE** | `false` | 是否开启 WebSocket 消息接收 |\n| **VITE_REGISTER_ENABLE** | `true` | 旧版注册开关，新版请在网站配置中维护前端注册 |\n| **VITE_AUTO_TENANT** | `false` | 是否开启租户自动选择（根据租户域名） |\n| **VITE_I18N_ENABLE** | `true` | 旧版登录页多语言切换开关，新版请在网站配置中维护国际化切换 |\n| **VITE_DARK_MODE_ENABLE** | `true` | 旧版登录页暗黑模式切换开关，新版请在网站配置中维护亮暗模式 |\n| **VITE_ENABLE_ANTI_DEBUG** | `false` | 旧版反调试开关，新版请在网站配置中维护反调试保护 |\n| **VITE_ANTI_DEBUG_KEY** | `pig` | 旧版反调试绕过参数值，新版请在网站配置中维护绕过密钥（URL 中 `?ddtk=参数值`） |\n| **VITE_GRAY_VERSION** | 无 | 对应灰度路由的 header Version |\n| **VITE_API_ENC_ENABLED** | `false` | 是否开启请求加解密 |\n| **VITE_SM4_ENC_KEY** | 无 | SM4 请求加解密密钥，配置后自动使用 SM4（要求 32 位） |\n| **VITE_SYNC_DINGTALK_ENABLED** | `false` | 旧版钉钉同步功能开关，新版请在网站配置中维护钉钉导入 |\n| **VITE_SYNC_WECHAT_ENABLED** | `false` | 旧版企微同步功能开关，新版请在网站配置中维护企业微信导入 |\n| **VITE_CUSTOM_HOMEPAGE_ENABLE** | `false` | 是否开启自定义首页功能（v5.11） |\n\n\nLogo、网站标题、备案/版权信息、隐私提示和 Clarity ID 等站点信息也已经迁移到网站配置的图形化界面中维护。\n\n\n\n修改 `VITE_GLOBAL_TITLE` 或 `VITE_FOOTER_TITLE` 等配置项后，需要清空浏览器 localStorage 缓存才能生效。\n\n\n## 环境文件说明\n\n- `.env` - 所有环境的基础配置\n- `.env.development` - 开发环境配置\n- `.env.development.local` - 本地开发环境配置（优先级最高，不纳入版本控制）\n- `.env.local` - 本地环境配置（不纳入版本控制）\n\n\nVite 会按照优先级加载环境变量，`.env.development.local` > `.env.development` > `.env.local` > `.env`。\n\n\n## 常见配置示例\n\n### 微服务模式配置\n\n```text\nVITE_IS_MICRO=true\nVITE_ADMIN_PROXY_PATH=http://localhost:9999\n```\n\n### 单体模式配置\n\n```text\nVITE_IS_MICRO=false\nVITE_ADMIN_PROXY_PATH=http://localhost:8080\n```\n\n### 开启验证码\n\n```text\nVITE_VERIFY_ENABLE=true\nVITE_VERIFY_IMAGE_ENABLE=true\n```\n\n\n`VITE_PWD_ENC_KEY` 为 AES 前端加密密钥，生产环境请务必修改为自定义值，长度必须为 16 位。使用 SM4 时请配置 `VITE_SM4_ENC_KEY`，密钥必须为 32 位 HEX 字符串。\n\n","url":"/doc/pigx/front-end/pigx-front-env-config"},{"lvl2":"2026-01-16 08:55:00.0","created_unix":1768524900000,"id":95,"lvl0":"前端目录结构","content":"## 项目目录结构\n\n前端项目采用 Vite + Vue3 + TypeScript 技术栈，目录结构清晰，便于开发和维护。\n\n```text\n├── src/ # 源代码目录\n│ ├── api/ # API 接口定义\n│ ├── assets/ # 静态资源\n│ ├── components/ # 公共组件\n│ ├── directive/ # Vue 自定义指令\n│ ├── hooks/ # Vue Composition API hooks\n│ ├── i18n/ # 国际化相关\n│ ├── layout/ # 布局组件\n│ ├── locales/ # 语言包\n│ ├── router/ # Vue Router 配置\n│ ├── stores/ # Pinia 状态管理\n│ ├── theme/ # 主题相关\n│ ├── types/ # TypeScript 类型定义\n│ ├── utils/ # 工具函数\n│ ├── views/ # 页面组件\n│ ├── App.vue # 根组件\n│ └── main.ts # 应用入口文件\n├── public/ # 公共静态资源\n├── docker/ # Docker 相关配置\n├── index.html # HTML 入口文件\n├── vite.config.ts # Vite 配置\n├── tsconfig.json # TypeScript 配置\n├── tailwind.config.js # Tailwind CSS 配置\n├── postcss.config.js # PostCSS 配置\n├── package.json # 项目依赖配置\n├── .env # 环境变量\n├── .env.development # 开发环境变量\n├── .env.development.local # 本地开发环境变量\n├── .env.local # 本地环境变量\n├── .eslintrc.js # ESLint 配置\n└── .prettierrc.js # Prettier 配置\n```\n\n## 核心目录说明\n\n### api 目录\n\n存放所有 API 接口定义，按功能模块划分。\n\n\n建议按照后端模块划分文件，如 `user.ts`、`role.ts` 等，每个文件导出对应的接口方法。\n\n\n### components 目录\n\n存放全局公共组件，可在任意页面中复用。\n\n### layout 目录\n\n存放布局相关组件，包括菜单栏、顶栏、标签页、主内容区等。\n\n\n清空浏览器永久缓存或者点击 `布局配置 -> 一键恢复默认`，前提是修改了 `/src/stores/themeConfig.ts` 配置文件内容。添加或者修改功能，请前往 `/src/layout/navBars/breadcrumb/setings.vue` 组件位置修改。\n\n\n### stores 目录\n\n使用 Pinia 进行状态管理，按功能模块划分 store。\n\n### theme 目录\n\n存放主题相关样式文件，支持自定义全局主题。\n\n### views 目录\n\n存放页面组件，按功能模块划分目录。\n\n## 布局说明\n\n\n可视化操作：左上角 `icon` 图标点击打开布局配置，所有配置功能都在这个里面。\n代码操作：修改 `/src/stores/themeConfig.ts` 文件。\n\n\n包含：`菜单栏`、`顶栏`、`tagsView 标签页`、`主内容区`。\n\n## 全局主题\n\n### 目录结构\n\n```typescript\n├── theme (页面样式)\n ├── common (基础样式)\n │ ├── transition.scss (页面过渡动画)\n │ └── var.scss (全局主题样式，用于全局改变样式)\n │\n ├── media (媒体查询)\n │ ├── chart.scss (大数据图表)\n │ ├── cityLinkage.scss (Cascader 级联选择器城市选择)\n │ ├── dialog.scss (弹窗)\n │ ├── error.scss (404、401界面)\n │ ├── form.scss (表单)\n │ ├── home.scss (首页)\n │ ├── index.scss (媒体查询定义主样式)\n │ ├── layout.scss (框架布局)\n │ ├── login.scss (登录界面)\n │ ├── media.scss (媒体查询主出口)\n │ ├── pagination.scss (分页)\n │ ├── personal.scss (个人中心)\n │ ├── scrollbar.scss (页面滚动条)\n │ └── tagsView.scss (tagsView 标签页)\n │\n ├── mixins (scss混入)\n │ ├── element-mixins.scss (定义重置的element plus混入复用样式)\n │ ├── function.scss (全局主题颜色调用混入函数)\n │ └── mixins.scss (定义一些常用的全局混入样式)\n │\n ├── app.scss (页面主样式，用于重置浏览器默认样式)\n ├── base.scss (基础样式、过渡动画引入等)\n ├── dark.scss (深色主题)\n ├── element.scss (重置的element plus样式，用于改变主题)\n ├── iconSelector.scss (图标选择器)\n ├── index.scss (页面样式主出口)\n ├── loading.scss (loading样式)\n ├── other.scss (其它样式)\n └── waves.scss (按钮波浪样式)\n```\n\n### scss 部分函数说明\n\n#### scss @mixin\n\n定义：[scss 官方中文文档](https://www.sass.hk/docs/)，具体请查阅官方文档。使用方法：\n\n```text\n/* Button 按钮\n------------------------------- */\n@mixin Button($main, $c1, $c2) {\n color: set-color($main);\n background: set-color($c1);\n border-color: set-color($c2);\n}\n```\n\n页面中使用，先引入，然后在 `css` 类中通过 `@include` 使用：\n\n```text\n@import \"mixins/element-mixins.scss\";\n\n// default\n.el-button--default:hover,\n.el-button--default:focus {\n @include Button(primary, primary-light-8, primary-light-6);\n}\n```\n\n#### scss @function\n\n定义函数：\n\n```text\n/* 颜色调用函数\n------------------------------- */\n@function set-color($key) {\n @return var(--color-#{$key});\n}\n```\n\n不理解？请看这个 `css3 :root` [CSS var() 函数](https://www.runoob.com/cssref/func-var.html)：\n\n```css\n/* 定义一个名为 \"--main-bg-color\" 的属性，然后使用 var() 函数调用该属性： */\n:root {\n --main-bg-color: red;\n}\n\n#div1 {\n background-color: var(--main-bg-color);\n}\n\n#div2 {\n background-color: var(--main-bg-color);\n}\n```\n\n#### 为什么不使用这种写法放进 :root 中？\n\n\nSCSS 的 `mix`、`lighten`、`darken`、`saturate` 和 `desaturate` 等函数无法直接处理 CSS 变量嵌套。例如，`mix(var(--color-primary), var(--color-success), 10%)` 不能在编译阶段得出颜色值。因此，不能只靠 `document.documentElement.style.setProperty('--color-primary', 'blue')` 更新这类预计算样式。\n\n\n```text\n$colors: (\n primary: #409eff,\n success: #67c23a,\n info: #909399,\n warning: #e6a23c,\n danger: #f56c6c\n)\n\n:root {\n @each $key, $value in $colors {\n --color-#{$key}: #{$value};\n }\n}\n```\n\n### 自定义全局主题\n\n#### 实现方法\n\n以下方法不晓得会不会影响页面渲染性能：\n\n- 1、定义全局 :root 初始变量，路径：`src/theme/common/var.scss`\n- 2、编写覆盖 element plus 的样式：路径：`src/theme/element.scss`\n- 3、页面通过 `document.documentElement.style.setProperty` 方法改变 `:root` 中的值\n\n#### 具体实现\n\n\n第 1 第 2 步就不介绍了，直接去路径去看就懂了。接下来我们讲讲第 3 步：\n\n\n通过 `document.documentElement.style.setProperty` 改变颜色值 [setProperty 文档](https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleDeclaration/setProperty)：\n\n```vue\n\n```\n\ngetLightColor 颜色变浅方法，路径在：`src/utils/theme.ts`\n\n```typescript\n// 变浅颜色值，level为加深的程度，限0-1之间\nexport function getLightColor(color: any, level: number) {\n let reg = /^#?[0-9A-Fa-f]{6}$/;\n if (!reg.test(color)) return ElMessage.warning(\"输入错误的hex颜色值\");\n let rgb = hexToRgb(color);\n for (let i = 0; i < 3; i++)\n rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i]);\n return rgbToHex(rgb[0], rgb[1], rgb[2]);\n}\n```\n\n到此就完成了主题的全局变色了。\n\n\n总的来说，就是通过重新定义 `css` 样式，用来覆盖 [element-plus](https://element-plus.gitee.io/#/zh-CN/component/changelog) 默认的样式，从而实现全局主题变色。其它方法实现全局主题，请自行 [百度一下](https://www.baidu.com/)。\n\n\n### 框架中实现例子\n\n#### 全局主题改变时\n\n主题改变时，会调用 `onColorPickerChange` 方法进行重新的覆盖 css `:root` 定义的变量的值：\n\n```typescript\nconst onColorPickerChange = (color: string) => {\n document.documentElement.style.setProperty(\n color,\n getThemeConfig.value[color]\n );\n};\n```\n\n拿到的值会赋值给根节点上 `html`，`document.documentElement.style`。刷新的时再设置 `document.documentElement.style.cssText = Local.get('themeConfigStyle');`，防止数据丢失。\n\n#### 更改主题配置文件路径\n\n修改后不生效，请注意看下列文件顶部文字注释。\n\nvue3.x：`/src/stores/themeConfig.ts`\n\n\n1、需要每次都清理 `window.localStorage` 浏览器永久缓存\n2、或者点击布局配置最底部 `一键恢复默认` 按钮即可看到效果\n\n\n## 菜单 / 顶栏\n\n### 顶栏\n\n文件路径：`/@/layout/navBars/breadcrumb`\n\n**顶栏背景、顶栏默认字体颜色、顶栏背景渐变**\n\n功能说明：`设置顶栏的背景颜色、字体颜色、背景渐变`\n\n### 菜单\n\n文件路径：[/@/layout/navMenu](https://gitee.com/lyt-top/vue-next-admin/tree/master/src/layout/navMenu)\n\n**菜单背景、菜单默认字体颜色、菜单背景渐变、菜单字体背景高亮**\n\n功能说明：`设置菜单的背景颜色、字体颜色、背景渐变、字体高亮背景色（颜色跟随全局主题(primary)）`\n\n### 分栏\n\n文件路径：`/@/layout/component/columnsAside.vue`\n\n**分栏菜单背景、分栏菜单默认字体颜色、分栏菜单背景渐变**\n\n功能说明：`设置分栏菜单的背景颜色、字体颜色、背景渐变`\n\n## 界面设置\n\n### 菜单设置\n\n文件路径：[/@/layout/navMenu](https://gitee.com/lyt-top/vue-next-admin/tree/master/src/layout/navMenu)\n\n**菜单水平折叠、菜单手风琴、经典布局分割菜单**\n\n功能说明：`菜单水平折叠、手风琴（开启一个展开）、经典布局分割菜单（顶级在顶栏处，子级在菜单栏）`\n\n### 固定 Header\n\n文件路径：[/@/layout/main](https://gitee.com/lyt-top/vue-next-admin/tree/master/src/layout/main)\n\n**固定 Header**\n\n功能说明：`固定 Header（主内容区滚动，顶栏不跟随滚动）`\n\n### 锁屏\n\n文件路径：[/@/layout/lockScreen](https://gitee.com/lyt-top/vue-next-admin/tree/master/src/layout/lockScreen)\n\n**开启锁屏、自动锁屏（s/秒）**\n\n功能说明：`开启锁屏（类似于电脑屏保）、自动锁屏(s/秒)`\n\n## 界面显示\n\n### 侧边栏 Logo\n\n文件路径：[/@/layout/logo](https://gitee.com/lyt-top/vue-next-admin/tree/master/src/layout/logo)\n\n**侧边栏 Logo**\n\n功能说明：`显示/隐藏侧边栏 Logo`\n\n### Breadcrumb 面包屑\n\n文件路径：`/@/layout/navBars/Breadcrumb/breadcrumb.vue`\n\n**开启 Breadcrumb、开启 Breadcrumb 图标**\n\n功能说明：`开启 Breadcrumb、Breadcrumb 图标`\n\n### Tagsview 标签页\n\n文件路径：[/@/layout/navBars/tagsView](https://gitee.com/lyt-top/vue-next-admin/tree/master/src/layout/navBars/tagsView)\n\n**开启 Tagsview、开启 Tagsview 图标、开启 TagsView 缓存、开启 TagsView 拖拽、开启 TagsView 共用**\n\n功能说明：`开启 Tagsview、Tagsview 图标、TagsView 缓存、TagsView 拖拽、TagsView 共用（共用详情界面：tagsView只会出现一个；非共用详情界面：tagsView会出现多个）`\n\n### Footer 版权\n\n文件路径：[/@/layout/footer](https://gitee.com/lyt-top/vue-next-admin/tree/master/src/layout/footer)\n\n**开启 Footer 版权**\n\n功能说明：`显示/隐藏底部版权`\n\n### 颜色模式\n\n文件路径：`/@/layout/navBars/breadcrumb/setings.vue`\n\n**灰色模式、色弱模式、深色模式**\n\n功能说明：`开启灰色模式、色弱模式、深色模式`\n\n### 前端水印\n\n文件路径：`/@/utils/wartermark.ts`\n\n**开启水印、水印文案**\n\n功能说明：`开启开启水印、设置水印文案`，可通过修改前端配置项解决。\n\n## 其它设置\n\n\n可使用 el-option 的 `value` 值去对应的 `文件路径` 里搜索查看。\n\n\n### Tagsview 风格\n\n文件路径：[/@/layout/navBars/tagsView](https://gitee.com/lyt-top/vue-next-admin/tree/master/src/layout/navBars/tagsView)\n\n需注意 `value` 值需与定义的 `css 类名` 一致：\n\n```vue\n\n \n \n \n \n \n \n \n ...\n\n```\n\n### 主页面切换动画\n\n文件路径：`/@/theme/common/transition.scss`，内置 `slide-right`、`slide-left`、`opacitys` 切换风格。\n\n你可能需要了解 [进入过渡 & 离开过渡](https://v3.cn.vuejs.org/guide/transitions-enterleave.html)。新增动画时，需要在 `/@/layout/navBars/breadcrumb/setings.vue` 其它设置中添加如下：\n\n```vue\n\n \n \n \n \n \n \n ...\n\n```\n\n### 分栏高亮风格\n\n文件路径：`/@/layout/component/columnsAside.vue`\n\n需注意 `value` 值需与定义的 `css 类名` 一致：\n\n```vue\n\n \n \n \n \n \n ...\n\n```\n\n### 分栏布局风格\n\n文件路径：`/@/layout/component/columnsAside.vue`\n\n需注意 `value` 值需与定义的 `css 类名` 一致：\n\n```vue\n\n \n \n \n \n \n ...\n\n```\n\n## 布局切换\n\n此项目包含四个布局：默认、经典、横向、分栏。\n","url":"/doc/pigx/front-end/pigx-front-config"},{"lvl2":"2026-01-16 08:55:00.0","created_unix":1768524900000,"id":98,"lvl0":"前端首页组件开发","content":"## 首页组件开发\n\n自定义首页组件开发，可以在首页展示自定义的业务组件或数据展示卡片。\n\n![\"首页组件示例\"](\"https://minio.pigx.top/oss/202403/1711008130.png\")
\n\n## 开发组件\n\n在 `src/views/home/widgets/components` 目录下创建组件文件。\n\n![\"组件目录结构\"](\"https://minio.pigx.top/oss/202403/1711008491.png\")
\n\n\n建议使用小写字母和连字符命名组件文件，如 `test-demo.vue`，保持命名规范和统一。\n\n\n### 组件示例\n\n创建一个简单的组件文件 `test-demo.vue`：\n\n```vue\n\n \n\n\n\n\n\n```\n\n## 挂载组件\n\n在 `src/views/home/widgets/index.vue` 中挂载组件，将 `myGrid` 数组增加上一步创建的组件文件名称。\n\n```javascript\nconst myGrid = [\n 'test-demo',\n];\n```\n\n![\"挂载组件配置\"](\"https://minio.pigx.top/oss/202403/1711008679.png\")
\n\n\n确保 `myGrid` 数组中的组件名称与实际创建的组件文件名称完全一致，否则组件无法正常加载。\n\n\n## 完整示例\n\n### 创建组件\n\n```vue\n\n \n\n\n\n\n\n```\n\n### 注册组件\n\n在 `src/views/home/widgets/index.vue` 中注册：\n\n```javascript\nconst myGrid = [\n 'test-demo',\n 'custom-widget', // 新增的组件\n];\n```\n\n\n组件会自动动态加载，无需手动 import，框架会根据组件名称自动引入对应的组件文件。\n\n\n## 注意事项\n\n\n- 组件文件必须放在 `src/views/home/widgets/components` 目录下\n- 组件名称使用小写字母和连字符（kebab-case）\n- 组件必须是 Vue 单文件组件（.vue 文件）\n- 确保组件在 `myGrid` 数组中正确注册\n\n\n## 组件布局\n\n首页组件支持网格布局，可以通过配置调整组件的大小和位置。\n\n\n首页组件支持响应式布局，会自动适配不同屏幕尺寸，在移动端和桌面端都能良好展示。\n\n","url":"/doc/pigx/front-end/pigx-front-home-diy"},{"lvl2":"2026-01-16 08:55:00.0","created_unix":1768524900000,"id":100,"lvl0":"前端国际化配置","content":"框架内置中文简体和英文两种语言，支持前端和后端双重配置方式，满足不同场景的国际化需求。\n\n\n 自 V5.12.1 起，登录页 `国际化切换` 开关建议在网站配置的图形化界面中维护；本文主要说明国际化内容本身的配置方式和代码用法。\n 未接入网站配置中心的版本，登录页语言切换入口仍按历史前端配置方式控制，文中的 i18n 目录结构和代码写法保持不变。\n\n\n## 多国语言配置\n\n### 前端配置国际化\n\n页面国际化数据建议放在同级目录的 `i18n` 文件夹中。`/@/i18n` 目录为框架内置，为了便于后续升级，请勿直接在此目录中添加自定义配置。\n\n![\"前端国际化目录结构\"](\"https://minio.pigx.top/oss/202304/1681629726.png\")
\n\n\n自定义国际化文件应放在页面同级目录的 i18n 文件夹中，不要修改框架内置的 `/@/i18n` 目录。\n\n\n### 后端配置国际化\n\n后端国际化配置与前端 i18n 配置的 TypeScript 文件格式相同，可以通过后台的国际化管理模块进行配置和使用。\n\n![\"后端国际化管理界面\"](\"https://minio.pigx.top/oss/202304/1682143507.png\")
\n\n\n支持通过后台管理界面动态配置国际化内容，无需修改代码即可更新翻译文本。\n\n\n## 国际化使用\n\n### 在 Vue 模板中使用\n\n在 `.vue` 文件的模板中，使用 `$t('xxx.xxx')` 语法：\n\n```vue\n\n {{ $t('message.account.accountBtnText') }}\n\n\n\n {{ $t('message.layout.oneTitle') }}\n\n```\n\n### 在 TypeScript 中使用\n\n在 `.ts` 文件中，使用 `i18n.global.t(xxx)` 语法：\n\n```typescript\nimport { i18n } from '/@/i18n/index';\n\nconst webTitle = i18n.global.t(router.currentRoute.value.meta.title as any);\n```\n\n### 在 setup 中使用\n\n在组件的 `setup` 函数中，使用 `t(xxx)` 语法：\n\n```vue\n\n```\n\n\n根据不同的使用场景选择合适的方式：模板中使用 `$t()`，TypeScript 中使用 `i18n.global.t()`，setup 中使用 `useI18n()` 获取 `t` 函数。\n\n\n## 框架其他国际化\n\n### 菜单国际化\n\n![\"菜单国际化示例\"](\"https://minio.pigx.vip/oss/202510/FC7lef.png\")
\n\n菜单国际化配置位于 `/@/layout/navMenu`，读取 `/@/router/route.ts` 中的 `meta.title` 字段。格式为 `message.router.xxx`，需要提前在后台的国际化管理模块中维护中文菜单和英文菜单的对应关系。\n\n\n菜单的国际化键值必须在后台国际化管理模块中预先配置，否则会显示为键名。\n\n\n### 浏览器标题国际化\n\n浏览器标题国际化通过 `/@/utils/other.ts` 中的 `useTitle` 方法实现，使用时调用 `other.useTitle()`。\n\n```typescript\n/**\n * 设置浏览器标题国际化\n * @method const title = useTitle(); => title()\n */\nexport function useTitle() {\n const stores = useThemeConfig(pinia);\n const { themeConfig } = storeToRefs(stores);\n nextTick(() => {\n let webTitle = '';\n let globalTitle: string = themeConfig.value.globalTitle;\n const { path, meta } = router.currentRoute.value;\n if (path === '/login') {\n webTitle = meta.title;\n } else {\n webTitle = setTagsViewNameI18n(router.currentRoute.value);\n }\n document.title = `${webTitle} - ${globalTitle}` || globalTitle;\n });\n}\n```\n\n### 顶栏国际化\n\n顶栏组件位于 `/@/layout/navBars/breadcrumb`，包含面包屑、组件大小、语言切换、菜单搜索、布局配置、消息、全屏切换、用户下拉菜单等功能。基本都使用 `$t(xxx.xxx.xxx)` 语法。\n\n```vue\n{{ $t(v.meta.title) }}
\n```\n\n### 布局配置国际化\n\n布局配置组件位于 `/@/layout/navBars/breadcrumb/setings.vue`，国际化数据在 `/@/i18n/lang` 中的 `layout` 对象。基本使用 `$t('message.layout.xxx')` 语法。\n\n```vue\n\n {{ $t('message.layout.twoMenuBar') }}\n
\n```\n\n### 页面国际化\n\n页面中基本使用 `$t('message.xxx.xxx')` 语法进行国际化。\n\n\n建议将页面相关的国际化配置统一放在页面同级目录的 i18n 文件夹中，便于维护和管理。\n\n","url":"/doc/pigx/front-end/pigx-front-i18n"},{"lvl2":"2026-01-16 08:55:00.0","created_unix":1768524900000,"id":103,"lvl0":"前端字体图标配置","content":"框架支持三种图标使用方式：Element Plus 内置图标、阿里巴巴在线图标库、本地 SVG 图标，满足不同场景的图标需求。\n\n## Element Plus 图标\n\nElement Plus 提供了丰富的内置图标，可以直接在项目中使用。\n\n### 使用方式\n\n访问 [Element Plus 图标库](https://element-plus.org/zh-CN/component/icon.html) 选择所需图标，使用 `` 组件包裹图标组件。\n\n```vue\n\n \n \n \n\n```\n\n\nElement Plus 图标库提供了常用的基础图标，适合快速开发和保持统一风格。\n\n\n## 本地 SVG 图标\n\n本地 SVG 图标适合离线部署、私有图标管理和需要跟随项目一起版本控制的场景。\n\n### 使用前说明\n\n- 项目会自动读取 `pigx-ui/src/assets/icons/` 目录下的 `.svg` 文件\n- 支持在 `icons` 目录下继续按业务创建子目录\n- 图标引用名只取文件名，不包含目录名\n\n\n需要离线访问、自定义品牌图标，或希望图标资源跟随代码一起管理时，优先使用本地 SVG 图标。\n\n\n### 配置本地图标\n\n1. 访问 [iconfont 官网](https://www.iconfont.cn/) 或其他图标来源，下载所需的 `.svg` 文件\n2. 将图标文件放到 `pigx-ui/src/assets/icons/` 目录中\n3. 新增、删除或重命名图标后，重启前端项目，让图标重新注册\n\n\n组件通过 `local-文件名` 的方式引用图标。例如 `gitee.svg` 对应 `local-gitee`，`ai/db.svg` 对应 `local-db`。由于目录名不会参与生成图标名，不同目录下不要放置同名 SVG 文件。\n\n\n### 菜单图标选择器\n\n放在本地目录中的 SVG 图标，会自动出现在菜单图标选择器的 `local` 分组中，并根据文件名顺序加载。\n\n![\"菜单图标选择器\"](\"https://minio.pigx.vip/oss/202604/o9zDLV.png\")
\n\n### 使用本地图标\n\n使用 `local-` 前缀加文件名加载本地图标：\n\n```vue\n\n\n```\n\n## 阿里巴巴在线图标\n\n阿里巴巴图标库提供了海量的图标资源，支持在线引用和自定义图标集。\n\n### 创建图标项目\n\n1. 访问 [iconfont 官网](https://www.iconfont.cn/) 并登录\n2. 创建新项目，设置 `FontClass/Symbol 前缀` 为 `icon`，`Font Family` 为 `iconfont`\n3. 添加所需图标到项目，生成在线链接\n\n### 配置在线链接\n\n在 `/@/utils/setIconfont.ts` 文件的 `cssCdnUrlList` 数组中添加生成的在线链接。\n\n```typescript\n// 字体图标 URL\nconst cssCdnUrlList: Array = [\n '//at.alicdn.com/t/font_2298093_y6u00apwst.css',\n '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',\n];\n```\n\n\n每次在 iconfont 项目中添加或删除图标后，需要重新生成链接并更新配置文件。\n\n\n### 在界面中使用\n\n不同的图标库需要添加对应的前缀：\n\n\niconfont（阿里巴巴素材库）需要添加 `iconfont` 前缀，如：`iconfont xitongshezhi`；font-awesome 需要添加 `fa` 前缀，如：`fa xitongshezhi`。\n\n\n```vue\n\n\n\n\n\n\n\n```\n\n## SvgIcon 组件使用\n\n`SvgIcon` 组件提供了统一的图标使用接口，支持局部注册和全局注册两种方式。\n\n### 局部注册\n\n在单个组件中使用时，需要先导入 `SvgIcon` 组件：\n\n```vue\n\n\n\n\n```\n\n### 全局注册\n\n框架中使用全局注册方式，在 `/@/utils/other.ts` 的 `elSvg` 方法中注册：\n\n```typescript\n// 全局注册\nimport SvgIcon from '/@/components/svgIcon/index.vue';\napp.component('SvgIcon', SvgIcon);\n```\n\n注册后可以直接在页面中使用：\n\n```vue\n\n\n\n\n\n```\n\n\n使用 `SvgIcon` 组件可以统一管理图标，支持动态切换、自定义样式，代码更简洁易维护。\n\n\n## 自定义引入本地图标\n\n除了使用 `SvgIcon` 组件，也可以通过传统方式引入图标：\n\n```vue\n\n\n\n\n\n```\n\n## 进阶：阿里巴巴图标库离线使用\n\n为了提高系统的稳定性和加载速度，可以将阿里巴巴在线图标库转换为本地离线使用。\n\n### 下载图标资源包\n\n[点击下载 PIGX-UI 依赖的阿里巴巴图标](https://minio.pigx.vip/oss/202501/1737972483.zip)\n\n### 创建本地图标目录\n\n```bash\nmkdir -p pigx-ui/public/assets/iconfont\n```\n\n### 复制资源文件\n\n将下载的资源包中的以下文件复制到 `public/assets/iconfont/` 目录：\n\n- iconfont.css\n- iconfont.ttf\n- iconfont.woff\n- iconfont.woff2\n\n### 修改配置文件\n\n修改 `src/utils/setIconfont.ts` 文件中的图标引用路径：\n\n```typescript\nconst cssCdnUrlList: Array = [\n '/assets/iconfont/iconfont.css', // 本地图标文件\n '/assets/styles/font-awesome.min.css',\n];\n```\n\n### 验证\n\n1. 启动项目\n2. 检查图标是否正常显示\n3. 在断网情况下验证图标是否仍然可用\n\n\n确保复制的文件名与代码中引用的路径完全一致。如果后续需要添加新图标，重复以上步骤更新本地图标文件即可。\n\n\n\n离线部署可以避免外部 CDN 服务不可用的风险，提升系统稳定性和加载速度，特别适合内网环境部署。\n\n","url":"/doc/pigx/front-end/pigx-front-icon-new"},{"lvl2":"2026-01-16 08:55:00.0","created_unix":1768524900000,"id":106,"lvl0":"前端图表功能","content":"## 组件预览\n\n![\"图表组件示例\"](\"https://minio.pigx.top/oss/202311/1700887610.png\")
\n\nVue Echarts 是一个 Vue.js 的 ECharts 图表组件，对 EChart 进行了封装，简化了 Echart 图表的使用。\n\npigx-ui 默认引入 vue-echarts，业务页面可直接复用 ECharts 图表组件。\n\n## 快速使用\n\n### 步骤 1：获取图表配置\n\n访问 [ECharts 官网](https://echarts.apache.org/examples/zh/index.html#chart-type-bar)，选择目标类型的图表组件，获取图表的 option 配置 JSON。\n\n![\"ECharts](\"https://minio.pigx.top/oss/202311/1700888098.png\")
\n\n### 步骤 2：生成 Vue 代码\n\n访问 [vue-echarts 代码生成器](https://vue-echarts.dev/#codegen)，粘贴从 ECharts 官网复制的 option 配置，生成 Vue 代码。\n\n![\"vue-echarts](\"https://minio.pigx.top/oss/202311/1700888283.png\")
\n\n\nvue-echarts 官方提供的代码生成器可以自动将 ECharts option 转换为 Vue 组件代码，大大简化开发流程。\n\n\n## 业务页面使用\n\n将代码生成器生成的代码复制到业务页面中即可使用：\n\n```vue\n\n \n\n\n\n```\n\n\n为了减小打包体积，vue-echarts 采用按需引入的方式。需要使用哪些图表类型或组件，就在代码中 import 相应的模块。\n\n\n## 图表类型\n\n### 柱状图\n\n```vue\n\n```\n\n### 折线图\n\n```vue\n\n```\n\n### 饼图\n\n```vue\n\n```\n\n## 动态数据更新\n\n使用 reactive 或 ref 定义 option，可以实现图表数据的动态更新：\n\n```vue\n\n \n\n\n\n```\n\n\n使用 reactive 定义的 option 具有响应式特性，修改数据后图表会自动重新渲染。\n\n\n## 图表样式配置\n\n### 设置图表尺寸\n\n通过 class 或 style 设置图表容器的尺寸：\n\n```vue\n\n \n \n\n \n \n\n```\n\n### 主题配置\n\n可以通过 theme 属性设置图表主题：\n\n```vue\n\n \n\n```\n\n## 响应式图表\n\n图表会自动响应容器尺寸的变化，无需手动调用 resize 方法。\n\n```vue\n\n \n \n
\n\n\n\n```\n\n\nvue-echarts 内置了 ResizeObserver，可以自动监听容器尺寸变化并调整图表大小，无需手动处理。\n\n\n## 常用组件引入\n\n以下是常用的 ECharts 组件模块：\n\n```typescript\n// 图表类型\nimport {\n BarChart, // 柱状图\n LineChart, // 折线图\n PieChart, // 饼图\n ScatterChart, // 散点图\n RadarChart, // 雷达图\n MapChart, // 地图\n TreeChart, // 树图\n GraphChart, // 关系图\n GaugeChart, // 仪表盘\n FunnelChart, // 漏斗图\n ParallelChart, // 平行坐标\n SankeyChart, // 桑基图\n BoxplotChart, // 箱线图\n CandlestickChart, // K线图\n EffectScatterChart, // 涟漪散点图\n LinesChart, // 路径图\n HeatmapChart, // 热力图\n PictorialBarChart, // 象形柱图\n ThemeRiverChart, // 主题河流图\n SunburstChart, // 旭日图\n CustomChart // 自定义系列\n} from 'echarts/charts';\n\n// 组件\nimport {\n GridComponent, // 网格\n PolarComponent, // 极坐标系\n GeoComponent, // 地理坐标系\n TooltipComponent, // 提示框\n LegendComponent, // 图例\n TitleComponent, // 标题\n ToolboxComponent, // 工具栏\n DataZoomComponent, // 数据区域缩放\n VisualMapComponent, // 视觉映射\n TimelineComponent, // 时间线\n CalendarComponent, // 日历\n GraphicComponent, // 图形元素\n MarkPointComponent, // 标注点\n MarkLineComponent, // 标注线\n MarkAreaComponent, // 标注区域\n DatasetComponent, // 数据集\n TransformComponent, // 数据转换\n AriaComponent, // 无障碍\n ParallelComponent, // 平行坐标系\n RadarComponent, // 雷达坐标系\n SingleAxisComponent, // 单轴\n BrushComponent, // 刷选\n} from 'echarts/components';\n\n// 渲染器\nimport { CanvasRenderer } from 'echarts/renderers';\n// 或使用 SVG 渲染器\n// import { SVGRenderer } from 'echarts/renderers';\n```\n\n\n使用图表前必须先通过 use() 函数注册所需的组件和渲染器，否则图表无法正常显示。\n\n","url":"/doc/pigx/front-end/pigx-front-charts"},{"lvl2":"2026-01-16 08:55:00.0","created_unix":1768524900000,"id":110,"lvl0":"前端权限管理","content":"## 组件方式\n\n组件位置：`/@/components/auth`，您可能需要了解 [插槽 slot](https://v3.cn.vuejs.org/guide/component-slots.html)\n\n### 单个权限验证\n\n\n组件使用 `some` 方法进行权限验证，根据实际需求可以自行修改判断逻辑。\n\n\n```vue {23-25}\n\n \n\n\n\n```\n\n**页面中使用：**\n\n```vue {3,8}\n\n \n \n\n\n\n```\n\n### 多个权限验证（满足一个）\n\n当需要验证多个权限时，只要满足其中一个权限即可显示组件。\n\n```vue {3,9,14}\n\n \n \n\n\n\n```\n\n### 多个权限验证（全部满足）\n\n当需要验证多个权限时，必须全部满足才能显示组件。\n\n```vue {3,9,14}\n\n \n \n\n\n\n```\n\n## 指令方式\n\n\n指令位置：`/@/directive/authDirective.ts`，您可能需要了解 [自定义指令 directive](https://v3.cn.vuejs.org/guide/custom-directive.html)\n\n\n### 单个权限验证\n\n使用 `v-auth` 指令进行单个权限验证。\n\n```vue\n\n 新增\n
\n\n\n 编辑\n
\n\n\n 删除\n
\n\n\n 跳转\n
\n```\n\n### 多个权限验证（满足一个）\n\n使用 `v-auths` 指令进行多个权限验证，满足其中一个即可显示。\n\n```vue\n\n 新增\n
\n\n\n 编辑\n
\n```\n\n### 多个权限验证（全部满足）\n\n使用 `v-auth-all` 指令进行多个权限验证，必须全部满足才能显示。\n\n```vue\n\n 新增\n
\n\n\n 编辑\n
\n```\n\n## 函数方式\n\n\n方法位置：`/@/utils/authFunction.ts`，用于在方法逻辑中进行权限判断。\n\n\n### 基本使用\n\n导入权限验证函数，在方法中进行权限判断。\n\n```vue\n\n```\n\n### 在模板中使用\n\n也可以在模板中结合 `v-if` 指令使用。\n\n```vue\nimport { auth } from '/@/utils/authFunction';\n...
\n```\n","url":"/doc/pigx/front-end/pigx-front-permission"},{"lvl2":"2026-01-16 08:55:00.0","created_unix":1768524900000,"id":113,"lvl0":"前端数据状态管理","content":"## Pinia 状态管理\n\n\n框架使用 Pinia 进行数据状态管理，代码位置：`/src/stores`。详细信息请参考 [Pinia 官网](https://pinia.vuejs.org/)\n\n\n\n旧版本使用 Vuex Module 模块化管理，相关文档：[Vuex 3.x 官网](https://v3.vuex.vuejs.org/zh/)\n\n\n## 全局引入\n\n页面模块已做全局自动引入，代码位置：`/@/store/index.ts`。\n\n\n使用 [import.meta.globEager](https://vitejs.cn/guide/features.html#glob-import) 实现模块的自动导入。\n\n\n```typescript\nconst modulesFiles = import.meta.globEager(\"./modules/*.ts\");\nconst pathList: string[] = [];\n\nfor (const path in modulesFiles) {\n pathList.push(path);\n}\n\nconst modules = pathList.reduce(\n (modules: { [x: string]: any }, modulePath: string) => {\n const moduleName = modulePath.replace(/^./modules/(.*).w+$/, \"$1\");\n const value = modulesFiles[modulePath];\n modules[moduleName] = value.default;\n return modules;\n },\n {}\n);\n```\n\n## 定义接口\n\n### Interface 定义\n\n在 `/@/store/interface/index.ts` 中定义数据结构接口，例如路由缓存列表 `KeepAliveNamesState`：\n\n```typescript\n// 路由缓存列表\nexport interface KeepAliveNamesState {\n keepAliveNames: Array;\n}\n```\n\n### Interface 使用\n\n在 `/@/store/modules/` 目录下新增模块文件，例如 `keepAliveNames.ts`。\n\n\n需要开启 `namespaced: true`，文件名称即为模块名称。详见 [Vuex Module 命名空间](https://next.vuex.vuejs.org/zh/guide/modules.html#命名空间)\n\n\n```typescript {3,5}\nimport { Module } from \"vuex\";\n// 此处加上 `.ts` 后缀报错，具体原因不详\nimport { KeepAliveNamesState, RootStateTypes } from \"/@/store/interface/index\";\n\nconst keepAliveNamesModule: Module = {\n namespaced: true,\n state: {\n keepAliveNames: [],\n },\n mutations: {\n // 设置路由缓存（name字段）\n getCacheKeepAlive(state: any, data: Array) {\n state.keepAliveNames = data;\n },\n },\n actions: {\n // 设置路由缓存（name字段）\n async setCacheKeepAlive({ commit }, data: Array) {\n commit(\"getCacheKeepAlive\", data);\n },\n },\n};\n\nexport default keepAliveNamesModule;\n```\n\n## 定义模块\n\n在 `/@/store/modules/` 目录下新增模块文件（如 `keepAliveNames.ts`），并定义 `mutations`、`actions` 方法。\n\n## 使用模块\n\n### 在 TypeScript 中使用\n\n在 `.ts` 文件中导入 store 并使用 dispatch 或 commit 方法。\n\n```typescript\nimport { store } from \"/@/store/index.ts\";\n\n// dispatch\nstore.dispatch(\"keepAliveNames/setCacheKeepAlive\", cacheList);\n\n// 或者 commit\n// store.commit(\"keepAliveNames/getCacheKeepAlive\", cacheList);\n```\n\n### 在 Vue 组件中使用\n\n在 `.vue` 文件中通过 `useStore` 访问状态管理。\n\n```vue {7,11,14}\n\n 在 .vue 中使用
\n\n\n\n```\n","url":"/doc/pigx/front-end/pigx-front-pinia"},{"lvl2":"2026-01-16 08:55:00.0","created_unix":1768524900000,"id":116,"lvl0":"前端组件路由管理","content":"\n\n## 静态路由\n\n静态路由是指直接在前端代码中配置的路由，不需要通过后端接口动态获取。这些路由在项目编译时就已确定，适用于固定不变的页面导航结构。\n\n\n静态路由适合配置系统级别的页面（如登录、404 等），可以独立于后端菜单权限系统，不需要鉴权等配置。\n\n\n### 路由配置位置\n\n```text\nsrc/\n └── router/\n └── route.ts # 路由配置文件\n```\n\n![\"路由配置文件位置\"](\"https://minio.pigx.top/oss/202411/1730690892.png\")
\n\n### 属性配置说明\n\n路由配置项支持以下属性：\n\n| 配置项 | 说明 |\n|--------|------|\n| title | 菜单栏及 tagsView 栏、菜单搜索名称（支持国际化） |\n| isLink | 是否超链接菜单，开启外链条件：1. isLink 链接地址不为空 2. isIframe 为 false |\n| isHide | 是否隐藏此路由 |\n| isKeepAlive | 是否缓存组件状态 |\n| isAuth | 是否需要认证才能进入的页面 |\n| isAffix | 是否固定在 tagsView 栏上 |\n| isIframe | 是否内嵌窗口，开启条件：1. isIframe 为 true 2. isLink 链接地址不为空 |\n| icon | 菜单、tagsView 图标，阿里：加 `iconfont xxx`，fontawesome：加 `fa xxx` |\n\n## 动态路由\n\n\n点击页面上的按钮可以打开新的 Tagsview 标签页，同时也可以传递参数。\n\n\n### 使用场景\n\n以下是一个适用场景的例子，当点击\"新增文章\"按钮时，会打开一个新的发布文章页面，方便进行操作。\n\n![\"动态路由使用场景示例\"](\"https://minio.pigx.top/oss/202308/1692178174.png\")
\n\n## 代码实现方式\n\n### 1. 菜单管理中定义隐藏菜单\n\n\n注意为角色分配该菜单的权限。\n\n\n![\"菜单管理配置示例\"](\"https://minio.pigx.top/oss/202308/1692178433.png\")
\n\n### 2. 点击目标按钮触发路由跳转\n\n```typescript\nconst click = () => {\n router.push({\n path: \"/app/appArticle/form\",\n query: { tagsViewName: \"动态路由测试\", param1: \"123\" },\n });\n};\n```\n\n### 3. 在跳转的页面获取请求参数\n\n```typescript\nconst route = useRoute();\n\nonMounted(() => {\n console.log(route.query.tagsViewName);\n console.log(route.query.param1);\n});\n```\n\n## 菜单参数方式\n\n\n在多个菜单中引用同一个路由下的组件，通过路由参数进行区分。\n\n\n![\"菜单参数配置示例\"](\"https://minio.pigx.top/oss/202402/1709135366.png\")
\n\n### 1. 配置菜单（带参）\n\n指向 `/admin/test/index` 组件，通过路径参数区分不同菜单：\n\n```text\nAAA /admin/test/1\n\nBBB /admin/test/2\n```\n\n![\"菜单配置详情\"](\"https://minio.pigx.top/oss/202402/1709182037.png\")
\n\n### 2. 页面获取参数\n\n在 `admin/test/index.vue` 中获取路由参数：\n\n```typescript\nconst route = useRoute();\n\nonMounted(() => {\n // test/index/参数\n const parts = route.path.split(\"/\");\n const lastParam = parts[parts.length - 1];\n console.log(lastParam);\n});\n```\n","url":"/doc/pigx/front-end/pigx-front-route"}],"query":"","processingTimeMs":1,"limit":20,"offset":0,"estimatedTotalHits":199}