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```html\n{{ $t(v.meta.title) }}
\n```\n\n### 布局配置国际化\n\n布局配置组件位于 `/@/layout/navBars/breadcrumb/setings.vue`，国际化数据在 `/@/i18n/lang` 中的 `layout` 对象。基本使用 `$t('message.layout.xxx')` 语法。\n\n```html\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```html\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```ts\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```html\n\n\n\n\n\n\n\n```\n\n## SvgIcon 组件使用\n\n`SvgIcon` 组件提供了统一的图标使用接口，支持局部注册和全局注册两种方式。\n\n### 局部注册\n\n在单个组件中使用时，需要先导入 `SvgIcon` 组件：\n\n```html\n\n\n\n\n```\n\n### 全局注册\n\n框架中使用全局注册方式，在 `/@/utils/other.ts` 的 `elSvg` 方法中注册：\n\n```ts\n// 全局注册\nimport SvgIcon from '/@/components/svgIcon/index.vue';\napp.component('SvgIcon', SvgIcon);\n```\n\n注册后可以直接在页面中使用：\n\n```html\n\n\n\n\n\n```\n\n\n使用 `SvgIcon` 组件可以统一管理图标，支持动态切换、自定义样式，代码更简洁易维护。\n\n\n## 自定义引入本地图标\n\n除了使用 `SvgIcon` 组件，也可以通过传统方式引入图标：\n\n```html\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，业务代码中可以非常方便地使用相关的 EChart 图表组件，例如日志管理等页面。\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```html\n\n \n\n\n\n```\n\n\n为了减小打包体积，vue-echarts 采用按需引入的方式。需要使用哪些图表类型或组件，就在代码中 import 相应的模块。\n\n\n## 图表类型\n\n### 柱状图\n\n```html\n\n```\n\n### 折线图\n\n```html\n\n```\n\n### 饼图\n\n```html\n\n```\n\n## 动态数据更新\n\n使用 reactive 或 ref 定义 option，可以实现图表数据的动态更新：\n\n```html\n\n \n\n\n\n```\n\n\n使用 reactive 定义的 option 具有响应式特性，修改数据后图表会自动重新渲染。\n\n\n## 图表样式配置\n\n### 设置图表尺寸\n\n通过 class 或 style 设置图表容器的尺寸：\n\n```html\n\n \n \n\n \n \n\n```\n\n### 主题配置\n\n可以通过 theme 属性设置图表主题：\n\n```html\n\n \n\n```\n\n## 响应式图表\n\n图表会自动响应容器尺寸的变化，无需手动调用 resize 方法。\n\n```html\n\n \n \n
\n\n\n\n```\n\n\nvue-echarts 内置了 ResizeObserver，可以自动监听容器尺寸变化并调整图表大小，无需手动处理。\n\n\n## 常用组件引入\n\n以下是常用的 ECharts 组件模块：\n\n```ts\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```html {23-25}\n\n \n\n\n\n```\n\n**页面中使用：**\n\n```html {3,8}\n\n \n \n\n\n\n```\n\n### 多个权限验证（满足一个）\n\n当需要验证多个权限时，只要满足其中一个权限即可显示组件。\n\n```html {3,9,14}\n\n \n \n\n\n\n```\n\n### 多个权限验证（全部满足）\n\n当需要验证多个权限时，必须全部满足才能显示组件。\n\n```html {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```html\n\n 新增\n
\n\n\n 编辑\n
\n\n\n 删除\n
\n\n\n 跳转\n
\n```\n\n### 多个权限验证（满足一个）\n\n使用 `v-auths` 指令进行多个权限验证，满足其中一个即可显示。\n\n```html\n\n 新增\n
\n\n\n 编辑\n
\n```\n\n### 多个权限验证（全部满足）\n\n使用 `v-auth-all` 指令进行多个权限验证，必须全部满足才能显示。\n\n```html\n\n 新增\n
\n\n\n 编辑\n
\n```\n\n## 函数方式\n\n\n方法位置：`/@/utils/authFunction.ts`，用于在方法逻辑中进行权限判断。\n\n\n### 基本使用\n\n导入权限验证函数，在方法中进行权限判断。\n\n```ts\n\n```\n\n### 在模板中使用\n\n也可以在模板中结合 `v-if` 指令使用。\n\n```html\nimport { auth } from '/@/utils/authFunction';\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```html {7,11,14}\n\n 在 .vue 中使用
\n\n\n\n```","url":"/doc/pigx/front-end/pigx-front-pinia"}],"query":"","processingTimeMs":0,"limit":20,"offset":0,"estimatedTotalHits":187}![\"设置](\"https://minio.pigx.top/oss/202309/1695452559.png\")
\n\n2. 设置全局编译环境\n\n![\"全局编译环境设置\"](\"https://minio.pigx.top/oss/202309/1695452716.png\")
\n\n3. 设置模块的编译环境\n - 在 `File → Project Structure → Modules` 中，选中需要调整的模块\n - 将 **Language Level** 设置为 `17`（对应 Java SE 17）\n\n![\"设置模块编译环境\"](\"https://minio.pigx.top/oss/202309/1695452601.png\")
\n\n![\"Maven](\"https://minio.pigx.top/oss/202405/1715785671.png\")
\n\n## 二、配置数据库\n\n**参数说明**\n\n```bash\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![\"Nacos](\"https://minio.pigx.top/oss/202310/1697020422.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![\"工单系统搜索界面\"](\"https://minio.pigx.top/oss/1657674058.jpg\")
","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.top/oss/202307/1688310872.jpg\")
\n\n## 1. 使用 pigx archetype 初始化项目\n\n### 1.1 编译 pigx 项目\n\n![\"数据源配置界面\"](\"https://minio.pigx.vip/oss/202507/kBOc12.png\")
\n\n### 3.2 生成代码\n\n![\"代码生成配置界面\"](\"https://minio.pigx.top/oss/202310/1697019662.png\")
\n\n- 代码生成的包结构如下\n\n```\n├── demo_menu.sql # 新增模块对应的菜单 SQL\n├── pigx # 后端代码包含增删改查代码\n│ └── src\n└── pigx-ui # 前端代码包含页面\n └── src\n```\n\n### 3.3 菜单维护\n\n![\"自动维护菜单配置\"](\"https://minio.pigx.top/oss/202408/1723989187.png\")
\n![\"手动维护菜单\"](\"https://minio.pigx.top/oss/202312/1701610364.png\")
\n![\"自动创建路由配置\"](\"https://minio.pigx.top/oss/202408/1723988979.png\")
\n![\"手动添加路由设置\"](\"https://minio.pigx.top/oss/202408/1723988669.png\")
\n\n进入 \"基础工具\" > \"路由管理\"，添加 demo-biz 对应的路由规则。\n\n![\"路由管理界面\"](\"https://minio.pigx.top/oss/202507/O6B0yj.png\")
\n![\"角色权限分配界面\"](\"https://minio.pigx.top/oss/202310/1697018891.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":"![\"Maven](\"https://minio.pigx.top/oss/202405/1715785257.png\")
\n\n### ③ 初始化数据库\n\n**数据库脚本说明**\n\n```bash\nsource db/0pigxx_boot.sql\n```\n\n### ④ 修改代码中的数据库和 Redis 连接信息\n\n```bash\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.top/oss/1662380660.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![\"前端架构配置\"](\"https://minio.pigx.top/oss/202304/1681179463.png\")
\n\n### ③ 安装前端依赖\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.top/oss/202307/1688311202.png\")
\n\n### 3.2 生成代码\n\n![\"代码生成配置\"](\"https://minio.pigx.top/oss/202410/1728047595.png\")
\n\n### 3.3 菜单维护\n\n![\"微信小程序配置\"](\"https://minio.pigx.top/oss/202306/1687532116.png\")
\n\n- 在 APP 密钥管理中添加相应的小程序配置信息\n\n![\"APP](\"https://minio.pigx.top/oss/202306/1687532173.png\")
\n\n## ① 下载 PIGX 移动端并安装依赖\n\n```bash\ngit clone https://git.pig4cloud.com/big/pigx-app.git\ncd pigx-app\nnpm install --registry=https://registry.npmmirror.com\n```\n\n## ② 开发工具导入项目\n\n- 配置相应的服务端架构，并设置 pigx 网关地址\n\n![\"服务端架构配置\"](\"https://minio.pigx.vip/oss/202508/F0l20M.png\")
\n\n- 修改 src/manifest.json 文件的 APPID\n\n![\"配置](\"https://minio.pigx.top/oss/202306/1687531695.png\")
\n\n- 执行以下命令以编译项目源码\n\n```bash\nnpm run dev:mp-weixin\n```\n\n## ③ 微信开发者工具导入\n\n选择项目并导入 pigx-app/dist/dev/mp-weixin 目录\n\n![\"导入项目\"](\"https://minio.pigx.top/oss/202601/iSboFL.png\")
\n\n![\"不校验合法域名\"](\"https://minio.pigx.top/oss/202306/1687533749.png\")
\n\n## ④ 部署发布\n\n- 在微信开发者工具顶部点击 \"上传至微信小程序官方后台\"，然后提交官方审核\n\n![\"上传小程序\"](\"https://minio.pigx.top/oss/202306/1687589632.png\")
\n\n- 等待微信官方审核完毕后，在微信小程序官方后台点击 \"全量发布\"\n\n![\"域名配置\"](\"https://minio.pigx.top/oss/202306/1687589559.png\")
\n\n## C 端登录流程说明\n\n![\".env](\"https://minio.pigx.vip/oss/202603/51vpvm.png\")
\n\n`.env` 文件中 `VITE_APP_TOC` 默认值为 `true`，表示请求 C 端（`app_user`）用户体系。若需对接 B 端（`sys_user`）管理员用户，将该值修改为 `false` 即可，认证服务会自动路由到对应的用户详情服务。\n\n![\"H5](\"https://minio.pigx.vip/oss/202508/ugzJlN.png\")
\n\n- 执行以下命令编译项目源码\n\n```bash\nnpm run dev:h5\n```\n\n![\"构建产物\"](\"https://minio.pigx.top/oss/202306/1687841914.png\")
\n\n```bash\n├── assets\n├── index.html\n└── static\n```\n\n### 配置生产环境中的 nginx\n\n```sh\nserver {\n listen 28080;\n server_name localhost;\n\n # 将上述步骤构建的产物放在 /path/mobile/index.html，注意在 path 下新建 mobile路径\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 # 转发H5 请求后端静态资源的请求\n location /mobile/api/ {\n proxy_pass http://pigx-gateway:9999/; #注意/后缀\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 }\n\n location / {\n try_files $uri $uri/ /mobile/index.html;\n }\n}\n```","url":"/doc/pigx/quick-start/pigx-front-h5"},{"lvl2":"2026-01-16 08:55:00.0","created_unix":1768524900000,"id":80,"lvl0":"【进阶】移动端应用打包","content":"\n\n![\"HbuilderX](\"https://minio.pigx.top/oss/202311/1700822178.png\")
\n\n![\"运行调试配置\"](\"https://minio.pigx.top/oss/202311/1700822213.png\")
\n\n## 特别说明 - 苹果 M 系列芯片运行\n\n![\"微服务模式配置\"](\"https://minio.pigx.top/oss/202404/1713838469.png\")
\n\n- ① IDEA 导入源码后，点开右侧 Maven 面板\n\n- ② 勾选 cloud profile\n\n- ③ 选择 pigx 整个模块\n\n- ④ 执行 Maven reload\n\n部署运行参考：[系统快速上手部署](/data/doc/pigx/quick-start/pigx-deploy.html)\n\n## 单体模式运行\n\n![\"单体模式配置\"](\"https://minio.pigx.top/oss/202404/1713838699.png\")
\n\n- ① IDEA 导入源码后，点开右侧 Maven 面板\n\n- ② 勾选 boot profile\n\n- ③ 选择 pigx 整个模块\n\n- ④ 执行 Maven reload 至 ⑤ pigx-boot 显示为 Maven module\n\n### 数据库初始化\n\n- ① 创建 pigxx_boot 数据库\n\n```sql\n-- pigx 核心表\ncreate database `pigxx_boot` default character set utf8mb4 collate utf8mb4_general_ci;\n```\n\n- ② 将原有的数据库 SQL ，在 pigx-boot 数据库执行\n\n![\"数据库初始化\"](\"https://minio.pigx.top/oss/202404/1713839039.png\")
\n\n### 配置修改启动\n\n![\"配置修改\"](\"https://minio.pigx.top/oss/202404/1713839192.png\")
\n\n- 修改 pigx-boot/application-dev.yml 对应的数据库和 redis 链接信息\n\n- 运行 pigx-boot/PigxBootApplication 启动单体模式","url":"/doc/pigx/quick-start/pigx-snapshot"},{"lvl2":"2026-01-16 08:55:00.0","created_unix":1768524900000,"id":85,"lvl0":"浏览器兼容性","content":"## 浏览器支持情况\n\n| 浏览器 | Edge | Firefox | Chrome | Safari |\n| :----: | :--: | :-----: | :----: | :----: |\n| Logo |  |  |  |  |\n| 最低版本 | >=88 | >=78 | >=87 | >=13 |\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 及之前版本。","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![\"布局配置界面\"](\"https://minio.pigx.top/oss/202304/1681738432.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![\"首页组件示例\"](\"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![\"挂载组件配置\"](\"https://minio.pigx.top/oss/202403/1711008679.png\")
\n\n![\"前端国际化目录结构\"](\"https://minio.pigx.top/oss/202304/1681629726.png\")
\n\n![\"后端国际化管理界面\"](\"https://minio.pigx.top/oss/202304/1682143507.png\")
\n\n![\"菜单国际化示例\"](\"https://minio.pigx.vip/oss/202510/FC7lef.png\")
\n\n菜单国际化配置位于 `/@/layout/navMenu`，读取 `/@/router/route.ts` 中的 `meta.title` 字段。格式为 `message.router.xxx`，需要提前在后台的国际化管理模块中维护中文菜单和英文菜单的对应关系。\n\n