import{_ as s,c as n,a as r,o as e}from"./app-CDlLWk6N.js";const a=""+new URL("custom_page_pc_1-CXjVoBOn.png",import.meta.url).href,o=""+new URL("custom_page_pc_2-8e_g1uGT.png",import.meta.url).href,p=""+new URL("custom_page_pc_3-PVAgZmk6.png",import.meta.url).href,g=""+new URL("custom_page_pc_4-BJ6TU5rW.png",import.meta.url).href,i=""+new URL("custom_page_pc_5-67hJreQO.png",import.meta.url).href,c=""+new URL("custom_page_pc_6-D0qmIZZb.png",import.meta.url).href,l=""+new URL("custom_page_app_1-7IYO8Eyo.png",import.meta.url).href,h=""+new URL("custom_page_app_2-BSYSeOjb.png",import.meta.url).href,m=""+new URL("custom_page_app_3-B3tOwhE2.png",import.meta.url).href,_=""+new URL("custom_page_app_4-2qED3-kx.png",import.meta.url).href,d=""+new URL("custom_page_app_5-DVBTSAZJ.png",import.meta.url).href,u={};function f(v,t){return e(),n("div",null,t[0]||(t[0]=[r('自定义页面，需要在 /src/views 文件夹下新建你所需开发的页面，并且尽量规范化，比如：你新建页面的路由为: /custom/index，则你新建的页面的路径则为：src -> views -> custom -> index.vue。 如下图，我在 /src/views 下，新建了一个文件夹为custom，并且里面有一个index.vue的文件
自定义路由，需要在 /src/router/routes 文件夹下的 basic.ts 和 index.ts 下进行自定义，如下图，我在 basic.ts 中新建了一个自定义路由 CUSTOMFORM_ROUTE，并在 index.ts 中引入了这个自定义路由。
配置路由（菜单）权限需要用管理员账号登录，在 菜单管理 页面 新增菜单 进行操作，其中 菜单名称、组件名称、编码、上级菜单、所属系统 根据实际情况填写或者选择，路由地址 则必须与第二步中 自定义路由 一致，否则会找不到页面的。组件路径 则与第一步中的 新建页面 新建的页面的路径一致。
要显示 自定义页面 还需在特定的角色分配权限，在 角色管理 页面选择对应的角色，点击 功能授权 -> 菜单 进行配置
选择你新建的页面，点击 确定 按钮进行配置即可，如下图：
经过上面的操作，点击你新建的路由，即可显示你自定义的页面
自定义页面，需要在 pages 文件夹下新建你所需开发的页面，比如：我在 pages 下新建了一个文件夹 custom，并且里面新建两个文件 list.vue 和 detail.vue，并在根目录下的 pages.json 下的配置了这两个文件的路由 pages/custom/list 和 pages/custom/detail
由于APP端的权限与PC端的分开，所以配置APP端的路由权限，需要在数据库中找到表名为： xjr_app_menu 的表，并在表中插入你新建页面的相关信息。如下图，我插入了一条name为“自定义页面”，url为“/pages/custom/list”（必须以/开头，否则跳转会有问题），create_user_id填写一般为管理员的id，其他字段根据实际情况填写。
经过第三步后，APP端并不会显示新建的页面，要显示则需要在PC端的 角色管理 页面选择对应的角色，点击 移动端功能授权 进行配置。
选择你在数据库插入的数据，点击 确定 按钮进行配置即可，如下图：
经过上面的操作，点击你新建的路由，即可显示你自定义的页面
',34)]))}const b=s(u,[["render",f]]),P=JSON.parse('{"path":"/front_dev/adv/custom_page.html","title":"自定义页面","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"PC端","slug":"pc端","link":"#pc端","children":[{"level":3,"title":"第一步：新建页面","slug":"第一步-新建页面","link":"#第一步-新建页面","children":[]},{"level":3,"title":"第二步：自定义路由","slug":"第二步-自定义路由","link":"#第二步-自定义路由","children":[]},{"level":3,"title":"第三步：配置路由权限（菜单权限）","slug":"第三步-配置路由权限-菜单权限","link":"#第三步-配置路由权限-菜单权限","children":[]},{"level":3,"title":"第四步：配置角色权限","slug":"第四步-配置角色权限","link":"#第四步-配置角色权限","children":[]},{"level":3,"title":"第五步： 查看效果","slug":"第五步-查看效果","link":"#第五步-查看效果","children":[]}]},{"level":2,"title":"APP端","slug":"app端","link":"#app端","children":[{"level":3,"title":"第一步：新建页面","slug":"第一步-新建页面-1","link":"#第一步-新建页面-1","children":[]},{"level":3,"title":"第二步：配置路由权限","slug":"第二步-配置路由权限","link":"#第二步-配置路由权限","children":[]},{"level":3,"title":"第三步：分配权限","slug":"第三步-分配权限","link":"#第三步-分配权限","children":[]},{"level":3,"title":"第五步： 查看效果","slug":"第五步-查看效果-1","link":"#第五步-查看效果-1","children":[]}]}],"git":{"updatedTime":1744701845000,"contributors":[{"name":"chen_junior","username":"","email":"chen_junior@163.com","commits":2}],"changelog":[{"hash":"9a7f9b39198bf7daa0ccccc7958891d8a3d3c982","time":1744701845000,"email":"chen_junior@163.com","author":"chen_junior","message":"feat: 新增高级二开关于APP端自定义页面的文档"},{"hash":"d15190d832ce06fe71b004d3de70455a08f87aec","time":1744108134000,"email":"chen_junior@163.com","author":"chen_junior","message":"feat: 新增高级二开关于PC端自定义页面的文档"}]},"filePathRelative":"front_dev/adv/custom_page.md"}');export{b as comp,P as data};