[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8636":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":17,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":23,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":15,"starSnapshotCount":15,"syncStatus":28,"lastSyncTime":29,"discoverSource":30},8636,"jeesite","thinkgem\u002Fjeesite","thinkgem","👍Java 低代码, 轻量级, Spring Boot, MyBatis, Flowable, TypeScript, Vue, Antdv, 包括核心模块如：组织机构、角色用户、权限授权、数据权限、内容管理、工作流、Spring Cloud 微服务等。","http:\u002F\u002Fjeesite.com",null,"Vue",8042,5574,1098,0,1,5,9,71.4,"Apache License 2.0",false,"main",true,[],"2026-06-12 04:00:40","\n\n\u003Cp align=\"center\">\n \u003Cimg alt=\"JeeSite\" src=\"https:\u002F\u002Fjeesite.com\u002Fassets\u002Fimages\u002Flogo.png\" width=\"120\" height=\"120\" style=\"margin-bottom: 10px;\">\n\u003C\u002Fp>\n\u003Ch3 align=\"center\" style=\"margin:30px 0 30px;font-weight:bold;font-size:30px;\">\n  JeeSite Vue3 前端源码\u003Cbr>\n  使用 Turborepo、Monorepo、pnpm\u003Cbr>\n  快速构建、模块化、代码复用、高效管理\n\u003C\u002Fh3>\n\u003Cp align=\"center\">\n \u003Ca href=\"https:\u002F\u002Fv3.cn.vuejs.org\u002F\" target=\"__blank\">\u003Cimg alt=\"TypeScript-Vite8\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FTypeScript-Vite8-green.svg\">\u003C\u002Fa>\n \u003Ca href=\"https:\u002F\u002Fwww.antdv.com\u002F\" target=\"__blank\">\u003Cimg alt=\"Ant Design Vue-Vue3\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FAnt Design Vue-Vue3-brightgreen.svg\">\u003C\u002Fa>\n \u003Ca href=\"https:\u002F\u002Fjeesite.com\" target=\"__blank\">\u003Cimg alt=\"JeeSite-V5.x\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FJeeSite-V5.x-blue.svg\">\u003C\u002Fa>\n \u003Ca href=\"https:\u002F\u002Fgitee.com\u002Fthinkgem\u002Fjeesite5\" target=\"__blank\">\u003Cimg alt=\"star\" src=\"https:\u002F\u002Fgitee.com\u002Fthinkgem\u002Fjeesite5\u002Fbadge\u002Fstar.svg?theme=dark\">\u003C\u002Fa>\n \u003Ca href=\"https:\u002F\u002Fgitee.com\u002Fthinkgem\u002Fjeesite-vue\" target=\"__blank\">\u003Cimg alt=\"star\" src=\"https:\u002F\u002Fgitee.com\u002Fthinkgem\u002Fjeesite-vue\u002Fbadge\u002Fstar.svg?theme=dark\">\u003C\u002Fa>\n \u003Ca href=\"https:\u002F\u002Fgitee.com\u002Fthinkgem\u002Fjeesite\" target=\"__blank\">\u003Cimg alt=\"star\" src=\"https:\u002F\u002Fgitee.com\u002Fthinkgem\u002Fjeesite\u002Fbadge\u002Fstar.svg?theme=gvp\">\u003C\u002Fa>\n \u003Ca href=\"https:\u002F\u002Fgitcode.com\u002Fthinkgem\u002Fjeesite\" target=\"__blank\">\u003Cimg alt=\"star\" src=\"https:\u002F\u002Fgitcode.com\u002Fthinkgem\u002Fjeesite\u002Fstar\u002Fbadge.svg\">\u003C\u002Fa> \n\u003C\u002Fp>\n\n------\n\n\u003Cdiv align=\"center\">\n 如果你喜欢 JeeSite，请给她一个 ⭐️ Star，您的支持将是我们前行的动力。\n\u003C\u002Fdiv>\n\n------\n\n1. 单仓多包 pnpm + Turborepo 涡轮增压，提升编译速度，方便统一管理脚本任务\n2. 按功能模块进行拆分为不同的包，方便进行团队开发源码管理，可根据需要进行发包\n3. 模块之间松耦合，单依赖，公共模块，公共组件，公共工具，方便代码复用\n4. 可方便从传统架构版本，升级到 Monorepo 模块化、分包架构\n\n## 技术交流\n\n* 官方网站：\u003Chttps:\u002F\u002Fjeesite.com>\n* 使用文档：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs>\n* 问题反馈：[http:\u002F\u002Fjeesite.net](https:\u002F\u002Fgitee.com\u002Fthinkgem\u002Fjeesite5\u002Fissues\u002Fnew)  | \n          [gitcode](https:\u002F\u002Fgitcode.com\u002Fthinkgem\u002Fjeesite\u002Fissues\u002Fcreate\u002Fchoose)  | \n          [新手必读](https:\u002F\u002Fgitee.com\u002Fthinkgem\u002Fjeesite5\u002Fissues\u002FI18ARR)\n* 需求收集：\u003Chttps:\u002F\u002Fgitee.com\u002Fthinkgem\u002Fjeesite5\u002Fissues\u002Fnew>\n* 联系我们：\u003Chttp:\u002F\u002Fs.jeesite.com>\n* 关注微信公众号，了解最新动态：\n\n\u003Cp style=\"padding-left:40px\">\n　　\u003Cimg alt=\"JeeSite微信公众号\" src=\"https:\u002F\u002Fjeesite.com\u002Fassets\u002Fimages\u002Fmp.png\" width=\"200\">\n\u003C\u002Fp>\n\n* QQ 群：`127515876`、`209330483`、`223507718`、`709534275`、`730390092`、`1373527`、`183903863(外包)`\n* 微信群：如果二维码过期，请尝试点击图片并F5刷新，或者添加客服微信 jeesitex 邀请您进群\n\n\u003Cp style=\"padding-left:40px\">\u003Ca href=\"https:\u002F\u002Fjeesite.com\u002Fassets\u002Fimages\u002Fwxg_cur.png\" target=\"_blank\">\n　　\u003Cimg alt=\"JeeSite微信群\" src=\"https:\u002F\u002Fjeesite.com\u002Fassets\u002Fimages\u002Fwxg_cur.png\" width=\"200\"\u002F>\u003C\u002Fa>\n\u003C\u002Fp>\n\n* 后端源码仓库地址：\n  [Gitee](https:\u002F\u002Fgitee.com\u002Fthinkgem\u002Fjeesite5)、\n  [GitCode](https:\u002F\u002Fgitcode.com\u002Fthinkgem\u002Fjeesite5)、\n  [GitHub](https:\u002F\u002Fgithub.com\u002Fthinkgem\u002Fjeesite5)\n* 前端源码仓库地址：\n  [Gitee](https:\u002F\u002Fgitee.com\u002Fthinkgem\u002Fjeesite-vue)、\n  [GitCode](https:\u002F\u002Fgitcode.com\u002Fthinkgem\u002Fjeesite-vue)、\n  [GitHub](https:\u002F\u002Fgithub.com\u002Fthinkgem\u002Fjeesite-vue)\n* 源码合集仓库地址：\n  [GVP](https:\u002F\u002Fgitee.com\u002Fthinkgem\u002Fjeesite\u002Ftree\u002Fmain)、\n  [G-Star](https:\u002F\u002Fgitcode.com\u002Fthinkgem\u002Fjeesite\u002Ftree\u002Fmain)、\n  [GitHub](https:\u002F\u002Fgithub.com\u002Fthinkgem\u002Fjeesite\u002Ftree\u002Fmain)\n\n## 平台介绍\n\n* JeeSite 快速开发平台，低代码，轻量级，不仅仅是一个后台开发框架，它是一个企业级快速开发解决方案，后端基于经典组合 Spring Boot、Shiro、MyBatis，前端采用分离版 Vue3、Vite、Ant Design Vue、TypeScript、Vben Admin 最先进技术栈，或者 Beetl、Bootstrap、AdminLTE 经典开发模式。\n\n* 提供在线数据源管理、数据表建模、代码生成等功能，可自动创建业务模块代码工程和微服务模块代码工程，自动生成前端代码和后端代码；包括核心功能模块如：组织机构、用户、角色、岗位、管理员、权限审计、菜单及按钮权限、数据权限、模块管理、系统参数、字典管理、系统监控、数据监控等；扩展功能如：工作流引擎、内容管理、消息推送、单点登录、第三方登录、在线作业调度、对象存储、可视化数据大屏、报表设计器、在线文件预览、国际化、全文检索、统一认证服务等。\n\n* 本平台采用松耦合设计，真正的轻量级，微内核，快速部署，插件架构，模块增减便捷，支持扩展 SaaS 架构、集群部署、读写分离、分库分表、Spring Cloud 微服务架构；并内置了众多账号安全设置、密码策略、系统访问限制等安全解决方案，支持等保评测。\n\n* 本平台专注于为初级研发人员提供强大的支持，使他们能够高效、快速地开发出复杂的业务功能，同时为中高级人员腾出宝贵的时间，专注于更具战略性和创新性的任务。我们致力于让开发者能够全心投入业务逻辑中，而将繁琐的技术细节交由平台来封装处理。这不仅降低了技术实现的难度，还确保了系统架构的稳定性和安全性，进而帮助企业节省人力成本、缩短项目周期，并提高整体软件的安全性和质量。\n\n* 2013 年发布以来已被广大爱好者用到了企业、政府、医疗、金融、互联网等各个领域中，拥有：精良架构、易于扩展、大众思维的设计模式，工匠精神，用心打磨每一个细节，深入开发者的内心，并荣获开源中国《最受欢迎中国开源软件》多次奖项，期间也帮助了不少刚毕业的大学生，教师作为入门教材，快速的去实践。\n\n* 2019 年换代升级，我们结合了多年总结和经验，以及各方面的应用案例，对架构完成了一次全部重构，也纳入很多新的思想。不管是从开发者模式、底层架构、逻辑处理还是到用户界面，用户交互体验上都有很大的进步，在不忘学习成本、提高开发效率的情况下，安全方面也做和很多工作，包括：身份认证、密码策略、安全审计、日志收集等众多安全选项供您选择。努力为大中小微企业打造全方位企业级快速开发解决方案。\n\n* 2021 年终发布 Vue3 的前后分离版本，使得 JeeSite 拥有同一个后台服务 Web 来支撑分离版和全栈版两套前端技术栈。\n\n* 对接 OpenAPI、Ollama、DeepSeek 等热门 AI 大模型，凭借检索增强生成 RAG 技术，为企业知识库打造专属智能对话。\n\n* 提供大模型 Tool 本地工具调用及 MCP 服务端和客户端工具调用，助力大模型与您的业务深度融合，实现高效交互。\n\n* 支持国产化软件和硬件环境，如国产芯片、操作系统、数据库、中间件、国密算法等。\n\n## 核心优势\n\n* JeeSite 非常易于二次开发，可控性强。整体架构清晰、技术栈稳定且先进，源代码规范严谨。所采用的均为业界通用、社区活跃的经典技术，经典技术会的人多、学习成本低、无论是维护还是扩展都十分便捷，系统安全性和稳定性也得到了充分保障。\n\n* JeeSite 功能全面，知识点非常多，也非常少。这看似矛盾，实则源于其“大道至简”的设计理念：功能模块和组件的设计，使用的都是一些通用的技术，通俗直观的设计风格，绝大多数开发者都能轻松掌握，所以只要掌握这些组件用法，即可高效完成业务系统的开发。\n\n* JeeSite 在架构设计、工具调用、操作体验、代码整洁、技术规范以及系统安全等方面投入了大量精力。这些往往属于“隐形投入”——虽然用户未必一眼可见，却对系统的稳定性、可维护性和长期发展至关重要。然而，许多产品更倾向于追求表面光鲜的界面和看似炫目的功能，不愿意在用户看不见的地方投入较多的研发经费，而忽视了这些深层次的基础建设。\n\n* JeeSite 是一个低代码开发平台，具备高度的封装性与出色的扩展能力。这里的“封装”并非限制您的自由，而是在提供开箱即用便捷性的同时，保留了充分的灵活性。当平台暂未覆盖某些特定功能时，JeeSite 会通过清晰的扩展接口和原生调用方式，让您轻松实现自定义需求。\n\n* 许多开发者都在使用 Spring 框架，并学习其优秀的设计理念——尤其是它强大的扩展机制。但试想一下：有多少人真正去修改过 Spring 的源码？即便有人这么做了，一旦框架升级，往往就会陷入兼容性困境，甚至导致系统难以维护。这样的例子屡见不鲜。\n\n* 正因如此，JeeSite 在设计之初就高度重视这一点：我们坚持“不侵入、可扩展”的原则，确保您在享受高效开发的同时，无需担心未来升级带来的麻烦。JeeSite 的扩展能力，正是为了帮您彻底摆脱这类后顾之忧。\n\n* 为什么说 JeeSite 比较易于学习？JeeSite 很好的把握了设计的 “度”，避免过度设计的情况。过度设计是在产品设计过程中忽略了产品和用户的实际需求，反而带来了不必要的复杂性，而忽略了系统的学习、开发和维护成本。\n\n* JeeSite 商业版基于社区版扩展，我们维护一套代码库，有效避免资源浪费和重复造轮子，不仅加速了功能迭代与优化、保障版本稳定性输出，还能快速反哺社区，推动创新与生态共赢，确保项目健康发展；即便您使用社区版，也无需担忧版本停滞及相关衍生问题。\n\n------\n\n* 至今 JeeSite 平台架构已经非常稳定，我们持续升级，并不失架构的先进性。\n* JeeSite 精益求精，用心打磨每一个细节，界面 UI 操作便捷，体验性好。\n* JeeSite 是一个专业的平台，是一个可以让您，用着省心的平台。\n* 社区版基于 Apache License 2.0 开源协议，永久免费使用。\n\n### 架构特点及安全方面的优势：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Ffeature\u002F>\n\n## Vue 前端简介\n\n基于 Vue3、Vite、Ant-Design-Vue、TypeScript 和 Vue Vben Admin 等前沿技术栈构建，本软件采用最先进的技术架构，\n帮助初学者快速上手并融入团队开发。内置组织机构、角色用户、菜单授权、数据权限、系统参数等核心模块，结合强大的组件封装\n与数据驱动视图设计，为微小、中大型项目提供开箱即用的解决方案和丰富的示例，助力高效开发。\n\n用户界面专为信息化管理后台量身打造，在界面设计上精益求精，每一处细节都彰显着精致，为用户带来优雅且直观的操作体验。\n它提供多样化的菜单布局、智能的页签管理、高效的树表操作体验、强大的表格组件、灵活的表单组件设计，具备强大的扩展能力，\n同时支持黑暗布局风格，为用户提供高效、灵活且美观的操作体验，满足各类管理后台的复杂需求。\n\n支持 Turborepo + Monorepo 快速构建、模块化、代码复用、支持分包开发，\n详见：\u003Chttps:\u002F\u002Fgitee.com\u002Fthinkgem\u002Fjeesite-vue>\n\n## 前端技术特点\n\n定义众多组件，非常贴心的组件属性及小功能，符合 JeeSite 以往的设计思想，列表和表单以数据驱动视图，\n极大简化了业务功能开发， 注释分解详见【[源码解析](https:\u002F\u002Fjeesite.com\u002Fdocs\u002Fvue-crud-view)】\n\n为什么做数据驱动视图？前端向下兼容一直是最大的问题，有了一套相应的标准，会对框架升级帮助很大。\n比如你可以非常小的成本，业务代码改动非常小的情况下，去升级前端；数据驱动视图可以为未来自定义拖拽表单做更好的铺垫，\n数据存储结构更清晰化，更利于维护。\n\n提示：请仔细阅读源码解析，表单视图和列表视图上的注释哦，支持复杂表单以及多表单联合使用。\n\n## 学习准备\n\n- [VSCode](https:\u002F\u002Fcode.visualstudio.com\u002F) - 推荐 IDE 集成开发工具\n- [Node.js 20](https:\u002F\u002Fnodejs.org\u002Fdist\u002Flatest-v20.x\u002F) 和 [git](https:\u002F\u002Fgit-scm.com\u002F) - 开发环境\n- [Vite](https:\u002F\u002Fvitejs.dev\u002F) - 熟悉 Vite 特性\n- [Vue-v3](https:\u002F\u002Fcn.vuejs.org\u002F) - 熟悉 Vue 基础语法\n- [TypeScript](https:\u002F\u002Fwww.typescriptlang.org\u002F) - 熟悉 TS 基本语法\n- [ES6+](http:\u002F\u002Fes6.ruanyifeng.com\u002F) - 熟悉 ES6 基本语法\n- [Vue-Router-v4](https:\u002F\u002Fnext.router.vuejs.org\u002F) - 熟悉 vue-router 基本使用\n- [Vue-Vben-Admin](https:\u002F\u002Fjeesite.com\u002Ffront\u002Fvben-admin\u002F) - 熟悉 UI 及表单列表及常用组件使用\n- [Ant-Design-Vue](https:\u002F\u002Fantdv.com\u002Fcomponents\u002Foverview-cn\u002F) - 熟悉 UI 基本使用\n\n## 快速体验\n\n### 在线演示\n\n1. 地址：\u003Chttp:\u002F\u002Fvue.jeesite.com\u002F>\n\n### 快速运行\n\n1. 环境准备：[Docker](https:\u002F\u002Fwww.docker.com)\n2. 根据您的操作系统，选择以下对应命令一键拉取 Docker 镜像并启动 JeeSite：\n\n* Linux 或 macOS\n```sh\ndocker pull crpi-u3zm0t8trv68xpyx.cn-qingdao.personal.cr.aliyuncs.com\u002Fthinkgem\u002Fjeesite:latest && docker run --name js5 -p 8980:8980 -d -v ~\u002Fjeesite-data:\u002Fdata crpi-u3zm0t8trv68xpyx.cn-qingdao.personal.cr.aliyuncs.com\u002Fthinkgem\u002Fjeesite:latest && docker logs -f js5\n```\n\n* Windows\n```cmd\ncmd \u002Fc \"docker pull crpi-u3zm0t8trv68xpyx.cn-qingdao.personal.cr.aliyuncs.com\u002Fthinkgem\u002Fjeesite:latest && docker run --name js5 -p 8980:8980 -d -v %USERPROFILE%\\jeesite-data:\u002Fdata crpi-u3zm0t8trv68xpyx.cn-qingdao.personal.cr.aliyuncs.com\u002Fthinkgem\u002Fjeesite:latest && docker logs -f js5\"\n```\n\n> 容器启动后，系统数据将持久化保存在本地 ~\u002Fjeesite-data（Linux\u002FmacOS）或 %USERPROFILE%\\jeesite-data（Windows）目录中。\n\n3. Vue分离版本地址：\u003Chttp:\u002F\u002F127.0.0.1:8980\u002Fvue\u002Flogin>\n4. 全栈版本地址：\u003Chttp:\u002F\u002F127.0.0.1:8980\u002Fa\u002Flogin>\n5. 初始登录账号：（管理员）`system`，密码：`admin`\n\n### 本地编译运行\n\n- 如果没有安装 Node.js 20+，下载地址：\u003Chttps:\u002F\u002Fnodejs.org>\n\n```bash\n# 验证\nnode -v\n# 配置国内源\nnpm config set registry https:\u002F\u002Fregistry.npmmirror.com\n```\n\n- 如果没有安装 Pnpm 执行安装\n\n```bash\nnpm i -g pnpm\n# 验证\npnpm -v\n# 配置国内源\npnpm config set registry https:\u002F\u002Fregistry.npmmirror.com\n```\n\n- 获取源代码\n\n```bash\n# 注意：不要在带有中文或空格的目录下执行。\ngit clone https:\u002F\u002Fgitee.com\u002Fthinkgem\u002Fjeesite-vue.git\ncd jeesite-vue\n```\n\n- 安装依赖\n\n```bash\npnpm install\n```\n\n- 开发环境运行访问（方式一）\n\n```bash\npnpm dev\n```\n开发环境会加载文件较多，便于调试，请耐心等待。\n\n- 编译打包后运行访问（方式二）\n\n```bash\npnpm preview\n```\n编译打包后，会整合这些文件，所以访问性能会大大提高，生产环境可以开启 gzip\n\n- 打包发布程序\n\n```bash\npnpm build\n```\n打包完成后，会在根目录生成 dist 文件夹，发布 nginx。\n\n详见文档：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fvue-install-deploy\u002F#部署到正式服务器>\n\n### 安装后端服务\n\n- 安装后台服务 [JeeSite v5.x](https:\u002F\u002Fgitee.com\u002Fthinkgem\u002Fjeesite5\u002Ftree\u002Fv5.springboot3\u002F)\n- 打开 [.env.development](https:\u002F\u002Fjeesite.com\u002Fdocs\u002Fvue-settings\u002F#env-development-详解) 文件，修改后台接口：\n\n```bash\n# 代理设置，可配置多个，不能换行，格式：[访问接口的根路径, 代理地址, 是否保持Host头]\n# VITE_PROXY = [[\"\u002Fjs\",\"https:\u002F\u002Fvue.jeesite.com\u002Fjs\",true]]\nVITE_PROXY = [[\"\u002Fjs\",\"http:\u002F\u002F127.0.0.1:8980\u002Fjs\",false]]\n\n# 访问接口的根路径（例如：https:\u002F\u002Fvue.jeesite.com）建议为空\nVITE_GLOB_API_URL = \n\n# 访问接口的前缀，在根路径之后\nVITE_GLOB_API_URL_PREFIX = \u002Fjs\n```\n\n## 如果您使用的 VSCode 的话，推荐安装以下插件：\n\n* [UnoCSS](https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=antfu.unocss) - UnoCSS 提示插件\n* [Iconify](https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=antfu.iconify) - Iconify 图标插件\n* [I18n-ally](https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=Lokalise.i18n-ally) - i18n 插件\n* [Volar](https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=johnsoncodehk.volar) - Vue3 开发必备（Vetur禁用）\n* [ESLint](https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=dbaeumer.vscode-eslint) - 脚本代码检查\n* [Prettier](https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=esbenp.prettier-vscode) - 代码格式化\n* [Stylelint](https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=stylelint.vscode-stylelint) - CSS 格式化\n* [DotENV](https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=mikestead.dotenv) - .env 文件高亮\n\n## 常见问题\n\n* Vue 版本的浏览器支持情况：支持所有现代浏览器，Vue3 已不再支持 IE 浏览器。\n* 为什么使用抽屉作为表单组件，因为抽屉空间更大，可以展示更多内容，且操作更友好。\n* 如何将表单抽屉改为弹窗，替换 list 和 form 页面的 Drawer 为 Modal 即可，V5.6增加了路由表单和弹窗表单的代码生成。\n* 打不开代码生成工具怎么办？提示 404，请检查 .env.development 中的代理配置 VITE_PROXY 最后一个参数（是否保持Host头），本地服务 127.0.0.1 应设置为 false，远程服务设置为 true。\n* 更多文档详见：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fvue-faq\u002F#常见问题>\n\n## 软件截图\n\n\u003Cimg src=\"https:\u002F\u002Foscimg.oschina.net\u002Foscnet\u002Fup-db83c334daab05d89a0930d8497816da6a4.png\"\u002F>\n\u003Cimg src=\"https:\u002F\u002Foscimg.oschina.net\u002Foscnet\u002Fup-685134ad2a721e0a7818efe4201d476e332.png\"\u002F>\n\u003Cimg src=\"https:\u002F\u002Foscimg.oschina.net\u002Foscnet\u002Fup-3ac1f31bdb399431cd0f6af479acc7f2e58.png\"\u002F>\n\u003Cimg src=\"https:\u002F\u002Foscimg.oschina.net\u002Foscnet\u002Fup-6a4c84696b589ba2a3bd034c2b9026b40e1.png\"\u002F>\n\u003Cimg src=\"https:\u002F\u002Foscimg.oschina.net\u002Foscnet\u002Fup-b85f44704e4a8c1e3a50f1c10e7e413341a.png\"\u002F>\n\u003Cimg src=\"https:\u002F\u002Foscimg.oschina.net\u002Foscnet\u002Fup-f03d07d58b351e1f2fc9931ea2dba550429.png\"\u002F>\n\u003Cimg src=\"https:\u002F\u002Foscimg.oschina.net\u002Foscnet\u002Fup-a36a005290cb95bc625e0933c867edc7e6f.png\"\u002F>\n\n## 附录\n\n### 表单视图\n\n```html\n\u003Ctemplate>\n  \u003C!-- 弹出抽屉组件，如果想改为弹窗，Drawer 换为 Modal 即可快速替换 -->\n  \u003CBasicDrawer\n    v-bind=\"$attrs\"    -- 传递来自父组件的属性\n    :showFooter=\"true\" -- 显示弹窗底部按钮组\n    :okAuth=\"'test:testData:edit'\" -- 提交按钮权限，控制按钮是否显示\n    @register=\"registerDrawer\"     -- 弹窗后的回调方法\n    @ok=\"handleSubmit\" -- 提交按钮调用方法\n    width=\"60%\"        -- 弹窗宽度，支持按比例\n  >\n    \u003C!-- 弹窗标题 -->\n    \u003Ctemplate #title>\n      \u003CIcon :icon=\"getTitle.icon\" class=\"pr-1 m-1\" \u002F> -- 图标\n      \u003Cspan> {{ getTitle.value }} \u003C\u002Fspan>  -- 标题名称\n    \u003C\u002Ftemplate>\n    \u003C!-- 表单组件 -->\n    \u003CBasicForm @register=\"registerForm\">\n      \u003C!-- 定义表单控件插槽、个性化表单控件，如：这是一个表单子表插槽 -->\n      \u003Ctemplate #testDataChildList>\n        \u003CBasicTable\n          @register=\"registerTestDataChildTable\"\n          @row-click=\"handleTestDataChildRowClick\"\n        \u002F>\n        \u003C!-- 子表新增按钮 -->\n        \u003Ca-button class=\"mt-2\" @click=\"handleTestDataChildAdd\">\n          \u003CIcon icon=\"i-ant-design:plus-circle-outlined\" \u002F> {{ t('新增') }}\n        \u003C\u002Fa-button>\n      \u003C\u002Ftemplate>\n    \u003C\u002FBasicForm>\n  \u003C\u002FBasicDrawer>\n\u003C\u002Ftemplate>\n\u003C!-- script name: 当前组件名称（与路由名一致，如果不一致会页面缓存失效）-->\n\u003Cscript lang=\"ts\" setup name=\"ViewsTestTestDataForm\">\n\n  \u002F\u002F 导入当前用到的对象，部分省略\n  import { ref, unref, computed } from 'vue';\n  import { officeTreeData } from '\u002F@\u002Fapi\u002Fsys\u002Foffice';\n\n  \u002F\u002F 页面事件定义\n  const emit = defineEmits(['success', 'register']);\n\n  \u002F\u002F 国际化方法调用，参数是国际化编码的根路径\n  const { t } = useI18n('test.testData');\n\n  \u002F\u002F 消息弹窗方法\n  const { showMessage } = useMessage();\n\n  \u002F\u002F 路由meta信息\n  const { meta } = unref(router.currentRoute);\n\n  \u002F\u002F 当前页面数据记录\n  const record = ref\u003CRecordable>({});\n\n  \u002F\u002F 当前页面标题定义，来自菜单管理定义\n  const getTitle = computed(() => ({\n    icon: meta.icon || 'ant-design:book-outlined',\n    value: record.value.isNewRecord ? t('新增数据') : t('编辑数据'),\n  }));\n\n  \u002F\u002F 输入表单控件定义\n  const inputFormSchemas: FormSchema[] = [\n    {\n      label: t('单行文本'), \u002F\u002F 控件前面的页签\n      field: 'testInput',  \u002F\u002F 字段提交参数名\n      component: 'Input',  \u002F\u002F 控件类型（可自定义，更多查看 componentMap.ts ）\n      componentProps: {    \u002F\u002F 组件属性定义\n        maxlength: 200,\n      },\n      required: true,      \u002F\u002F 表单验证，是否必填（快速定义）\n      rules: [             \u002F\u002F 如果不只是必填，需要通过 rules 定义，举例：\n        { required: true },\n        { min: 4, max: 20, message: t('请输入长度在 4 到 20 个字符之间') },\n        { pattern: \u002F^[\\u0391-\\uFFE5\\w]+$\u002F, message: t('不能输入特殊字符') },\n        {\n          validator(_rule, value) {\n             return new Promise((resolve, reject) => {\n              if (!value || value === '') return resolve();\n              \u002F\u002F 远程验证，访问后台校验数据是否重复\n              checkTestInput(record.value.testInput || '', value)\n                .then((res) => (res ? resolve() : reject(t('数据已存在'))))\n                .catch((err) => reject(err.message || t('验证失败')));\n            });\n          },\n          trigger: 'blur', \u002F\u002F 如果是远程验证，可以减少请求频率\n        },\n      ],\n      colProps: { lg: 24, md: 24 }, \u002F\u002F 栅格布局（遵循 Ant Design 风格）\n    },\n    {\n      label: t('下拉框'),\n      field: 'testSelect',\n      component: 'Select',    \u002F\u002F 选择框还有 RadioGroup、CheckboxGroup\n      componentProps: {\n        dictType: 'sys_menu_type', \u002F\u002F 下拉框选项数据（支持直接指定字典类型）\n        allowClear: true,          \u002F\u002F 启用空选项，可清空选择\n        mode: 'multiple',          \u002F\u002F 下拉框模块，启用多选\n      },\n    },\n    {\n      label: t('日期选择'),\n      field: 'testDate',\n      component: 'DatePicker',\n      componentProps: {\n        format: 'YYYY-MM-DD',      \u002F\u002F 日期选择\n        showTime: false,           \u002F\u002F 关闭时间选择\n      },\n    },\n    {\n      label: t('日期时间'),\n      field: 'testDatetime',\n      component: 'DatePicker',\n      componentProps: {\n        format: 'YYYY-MM-DD HH:mm',    \u002F\u002F 日期时间选择\n        showTime: { format: 'HH:mm' }, \u002F\u002F 设置时间的格式\n      },\n    },\n    {\n      label: t('用户选择'),\n      field: 'testUser.userCode',\n      fieldLabel: 'testUser.userName', \u002F\u002F【支持返回，如下拉框或树选择的节点名】\n      component: 'TreeSelect',         \u002F\u002F 树选择控件\n      componentProps: {\n        api: officeTreeData,           \u002F\u002F 数据源 API 定义，支持 ztree 格式\n        params: { isLoadUser: true, userIdPrefix: '' }, \u002F\u002F API 参数\n        canSelectParent: false,        \u002F\u002F 是否允许选择父级\n        allowClear: true,\n      },\n    },\n    {\n      label: t('子表数据'),\n      field: 'testDataChildList',\n      component: 'Input',\n      colProps: { lg: 24, md: 24 },\n      slot: 'testDataChildList',      \u002F\u002F 指定插槽、个性化控件内容\n    },\n  ];\n\n  \u002F\u002F 当前表单的参数定义\n  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({\n    labelWidth: 120,                  \u002F\u002F 控件前面的标签宽度\n    schemas: inputFormSchemas,        \u002F\u002F 控件定义列表\n    baseColProps: { lg: 12, md: 24 }, \u002F\u002F 控件默认栅格布局方式（响应式）\n  });\n\n  \u002F\u002F 当前表单子表格定义\n  const [registerTestDataChildTable, testDataChildTable] = useTable({\n    actionColumn: {  \u002F\u002F 子表的操作列定义\n      width: 60,     \u002F\u002F 操作列宽度\n      actions: (record: Recordable) => [\n        {\n          icon: 'i-ant-design:delete-outlined',\n          color: 'error',\n          popConfirm: { \u002F\u002F 是否需要启用确认框\n            title: '是否确认删除',\n            confirm: handleTestDataChildDelete.bind(this, record),\n          },\n          auth: 'sys:empUser:edit',  \u002F\u002F 按钮权限（可控制按钮是否显示）\n        },\n      ],\n    },\n    rowKey: 'id',     \u002F\u002F 子表主键名\n    pagination: false,\u002F\u002F 关闭分页\n    bordered: true,   \u002F\u002F 开启表格边框\n    size: 'small',    \u002F\u002F 单元格间距\n    inset: true,      \u002F\u002F 是否内嵌（去除一些边距）\n  });\n\n  \u002F\u002F 当前表单子表自动定义\n  async function setTestDataChildTableData(_res: Recordable) {\n    testDataChildTable.setColumns([\n      {\n        title: t('单行文本'),\n        dataIndex: 'testInput',\n        width: 230,\n        align: 'left',\n        editRow: true,          \u002F\u002F 是否启用编辑\n        editComponent: 'Input', \u002F\u002F 编辑控件（可自定义，更多查看 componentMap.ts ）\n        editRule: true,         \u002F\u002F 控件验证（是否必填）\n      },\n      {\n        title: t('下拉框'),\n        dataIndex: 'testSelect',\n        width: 130,\n        align: 'left',\n        dictType: 'sys_menu_type',   \u002F\u002F 指定字典类型，自动显示字典标签\n        editRow: true,\n        editComponent: 'Select',\n        editComponentProps: {        \u002F\u002F 控件属性\n          dictType: 'sys_menu_type', \u002F\u002F 下拉框的字段类型\n          allowClear: true,\n        },\n        editRule: false,\n      },\n      \u002F\u002F 更多组件控件不举例了，同表单控件 ...\n    ]);\n    \u002F\u002F 设定子表数据\n    testDataChildTable.setTableData(record.value.testDataChildList || []);\n  }\n\n  \u002F\u002F 点击行，启用编辑\n  function handleTestDataChildRowClick(record: Recordable) {\n    record.onEdit?.(true, false);\n  }\n\n  \u002F\u002F 添加编辑行，可指定初始数据\n  function handleTestDataChildAdd() {\n    testDataChildTable.insertTableDataRecord({\n      id: new Date().getTime(),\n      isNewRecord: true,\n      editable: true,\n    });\n  }\n\n  \u002F\u002F 删除编辑行方法\n  function handleTestDataChildDelete(record: Recordable) {\n    testDataChildTable.deleteTableDataRecord(record);\n  }\n\n  \u002F\u002F 获取子表数据（支持返回删除未提交的数据）\n  async function getTestDataChildList() {\n    let testDataChildListValid = true;\n    let testDataChildList: Recordable[] = [];\n    for (const record of testDataChildTable.getDataSource()) {\n      \u002F\u002F 验证控件内容，并取消行的编辑状态（如果验证失败返回false）\n      if (!(await record.onEdit?.(false, true))) {\n        testDataChildListValid = false;\n      }\n      testDataChildList.push({\n        ...record,\n        id: !!record.isNewRecord ? '' : record.id,\n      });\n    }\n    for (const record of testDataChildTable.getDelDataSource()) {\n      if (!!record.isNewRecord) continue;\n      testDataChildList.push({\n        ...record,\n        status: '1',\n      });\n    }\n    \u002F\u002F 子表验证事件，抛出异常消息\n    if (!testDataChildListValid) {\n      throw { errorFields: [{ name: ['testDataChildList'] }] };\n    }\n    return testDataChildList;\n  }\n\n  \u002F\u002F 弹窗后的回调事件，进行一些表单数据初始化等操作\n  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {\n    resetFields(); \u002F\u002F 重置表单数据\n    setDrawerProps({ loading: true }); \u002F\u002F 显示加载框\n    const res = await testDataForm(data); \u002F\u002F 查询表单数据\n    record.value = (res.testData || {}) as Recordable;\n    setFieldsValue(record.value);  \u002F\u002F 设置字段值\n    setTestDataChildTableData(res);  \u002F\u002F 设置子表数据（没有子表可不写）\n    setDrawerProps({ loading: false }); \u002F\u002F 隐藏加载框\n  });\n\n  \u002F\u002F 表单提交按钮方法\n  async function handleSubmit() {\n    try {\n      const data = await validate(); \u002F\u002F 验证表单，并返回数据\n      setDrawerProps({ confirmLoading: true }); \u002F\u002F 显示提交加载中\n      \u002F\u002F 设置提交的参数（QueryString，后台 Controller 的 get 接受）\n      const params: any = {\n        isNewRecord: record.value.isNewRecord,\n        id: record.value.id,\n      };\n      \u002F\u002F 获取并设置子表数据\n      data.testDataChildList = await getTestDataChildList();\n      \u002F\u002F console.log('submit', params, data, record);\n      \u002F\u002F 将数据提交给后台（如果失败跳转到 catch）\n      const res = await testDataSave(params, data);\n      showMessage(res.message); \u002F\u002F 显示提交结果\n      setTimeout(closeDrawer);  \u002F\u002F 隐藏抽屉弹窗\n      emit('success', data);    \u002F\u002F 触发事件，列表数据刷新\n    } catch (error: any) {\n      if (error && error.errorFields) {\n        showMessage(t('您填写的信息有误，请根据提示修正。'));\n      }\n      console.log('error', error);\n    } finally {\n      setDrawerProps({ confirmLoading: false }); \u002F\u002F 隐藏提交加载中\n    }\n  }\n\u003C\u002Fscript>\n```\n\n### 列表视图\n\n```html\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!-- 表格组件 -->\n    \u003CBasicTable @register=\"registerTable\">\n      \u003C!-- 表格标题插槽 -->\n      \u003Ctemplate #tableTitle>\n        \u003CIcon :icon=\"getTitle.icon\" class=\"m-1 pr-1\" \u002F>\n        \u003Cspan> {{ getTitle.value }} \u003C\u002Fspan>\n      \u003C\u002Ftemplate>\n      \u003C!-- 表格右侧按钮插槽，其中 v-auth 是按钮权限控制 -->\n      \u003Ctemplate #toolbar>\n        \u003Ca-button type=\"primary\" @click=\"handleForm({})\" v-auth=\"'test:testData:edit'\">\n          \u003CIcon icon=\"i-fluent:add-12-filled\" \u002F> {{ t('新增') }}\n        \u003C\u002Fa-button>\n      \u003C\u002Ftemplate>\n      \u003C!-- 首列插槽 -->\n      \u003Ctemplate #firstColumn=\"{ record }\">\n        \u003Ca @click=\"handleForm({ id: record.id })\">\n          {{ record.testInput }}\n        \u003C\u002Fa>\n      \u003C\u002Ftemplate>\n    \u003C\u002FBasicTable>\n    \u003C!-- 点击表格行进入的输入表单弹窗 -->\n    \u003CInputForm @register=\"registerDrawer\" @success=\"handleSuccess\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\u003C!-- script name: 当前组件名称（与路由名一致，如果不一致会页面缓存失效）-->\n\u003Cscript lang=\"ts\" setup name=\"ViewsTestTestDataList\">\n\n  \u002F\u002F 导入当前用到的对象，部分省略\n  import InputForm from '.\u002Fform.vue';\n\n  \u002F\u002F 国际化方法调用，参数是国际化编码的根路径\n  const { t } = useI18n('test.testData');\n\n  \u002F\u002F 消息弹窗方法\n  const { showMessage } = useMessage();\n\n  \u002F\u002F 路由meta信息\n  const { meta } = unref(router.currentRoute);\n\n  \u002F\u002F 当前页面标题定义，来自菜单管理定义\n  const getTitle = {\n    icon: meta.icon || 'ant-design:book-outlined',\n    value: meta.title || t('数据管理'),\n  };\n\n  \u002F\u002F 表格搜索表单控件定义\n  const searchForm: FormProps = {\n    baseColProps: { lg: 6, md: 8 }, \u002F\u002F 表单栅格布局\n    labelWidth: 90,                 \u002F\u002F 表单标签宽度\n    schemas: [\n      {\n        label: t('单行文本'),        \u002F\u002F 表单标签\n        field: 'testInput',         \u002F\u002F 字段提交参数名\n        component: 'Input',         \u002F\u002F 表单控件\n      },\n      {\n        label: t('下拉框'),\n        field: 'testSelect',\n        component: 'Select',    \u002F\u002F 选择框还有 RadioGroup、CheckboxGroup\n        componentProps: {\n          dictType: 'sys_menu_type', \u002F\u002F 下拉框选项数据（支持直接指定字典类型）\n          allowClear: true,          \u002F\u002F 启用空选项，可清空选择\n          mode: 'multiple',          \u002F\u002F 下拉框模块，启用多选\n        },\n      },\n      \u002F\u002F 更多控件，再次不展示了，和上一节表单视图一致\n    ],\n  };\n\n  \u002F\u002F 表格列定义\n  const tableColumns: BasicColumn[] = [\n    {\n      title: t('单行文本'),    \u002F\u002F 表头标题\n      dataIndex: 'testInput', \u002F\u002F 表列实体属性名\n      key: 'a.test_input',    \u002F\u002F 排序数据库字段名\n      sorter: true,           \u002F\u002F 点击表头是否可排序\n      width: 230,             \u002F\u002F 列宽\n      align: 'left',          \u002F\u002F 列的对齐方式\n      \u002F\u002F 个性化列，可定义插槽（如样式，增加控件等）\n      slot: 'firstColumn',\n    },\n    {\n      title: t('下拉框'),\n      dataIndex: 'testSelect',\n      key: 'a.test_select',\n      sorter: true,\n      width: 130,\n      align: 'center',\n      dictType: 'sys_menu_type', \u002F\u002F 字典列，快速显示字典标签\n    },\n  ];\n\n  \u002F\u002F 表格操作列定义\n  const actionColumn: BasicColumn = {\n    width: 160, \u002F\u002F 操作列宽\n    actions: (record: Recordable) => [\n      {\n        icon: 'i-clarity:note-edit-line',\n        title: t('编辑数据'),\n        onClick: handleForm.bind(this, { id: record.id }),\n        \u002F\u002F 按钮权限控制，指定权限字符串\n        auth: 'test:testData:edit',\n      },\n      {\n        icon: 'i-ant-design:stop-outlined',\n        color: 'error',\n        title: t('停用数据'),\n        \u002F\u002F 是否需要启用确认框\n        popConfirm: {\n          title: t('是否确认停用数据'),\n          confirm: handleDisable.bind(this, { id: record.id }),\n        },\n        \u002F\u002F 按钮权限控制，指定权限字符串\n        auth: 'test:testData:edit',\n        \u002F\u002F 控制按钮是否显示（区别：show 是显示或隐藏；ifShow 是显示或移除）\n        show: () => record.status === '0',\n        ifShow: () => record.status === '0',\n      },\n    ],\n    \u002F\u002F 操作列更多按钮定义\n    dropDownActions: (record: Recordable) => [\n      {\n        icon: 'i-ant-design:reload-outlined',\n        label: t('重置密码'),\n        onClick: handleResetpwd.bind(this, { userCode: record.userCode }),\n        auth: 'sys:empUser:resetpwd',\n      },\n    ],\n  };\n\n  \u002F\u002F 点击首列或编辑按钮是的抽屉弹窗定义\n  const [registerDrawer, { openDrawer }] = useDrawer();\n\n  \u002F\u002F 表格定义\n  const [registerTable, { reload }] = useTable({\n    api: testDataListData,     \u002F\u002F 表格数据源 API\n    beforeFetch: (params) => {\n      return params;           \u002F\u002F API 提交之前的参数修改\n    },\n    columns: tableColumns,     \u002F\u002F 表格列\n    actionColumn: actionColumn,\u002F\u002F 操作列\n    formConfig: searchForm,    \u002F\u002F 搜索表单\n    showTableSetting: true,    \u002F\u002F 是否显示右上角的设置按钮\n    useSearchForm: true,       \u002F\u002F 是否显示搜索表单\n    canResize: true,           \u002F\u002F 是否自适应表单高度\n  });\n\n  \u002F\u002F 弹窗操作方法\n  function handleForm(record: Recordable) {\n    openDrawer(true, record);\n  }\n\n  \u002F\u002F 操作列停用按钮方法\n  async function handleDisable(record: Recordable) {\n    const res = await testDataDisable(record);\n    showMessage(res.message);\n    handleSuccess();\n  }\n\n  \u002F\u002F 刷新表格数据（含表单回调）\n  function handleSuccess() {\n    reload();\n  }\n\u003C\u002Fscript>\n```\n\n## 更多介绍\n\n* 架构特点：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Ffeature\u002F>\n* 内置功能：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Ffunction\u002F>\n* 目录结构：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fcatalog\u002F>\n* 参数配置：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fconfig\u002F>\n* 开发规范：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fstandard\u002F>\n* 数表设计：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Ftreetable\u002F>\n\n## 产品列表\n\n* JeeSite 源码仓库：\u003Chttps:\u002F\u002Fgitee.com\u002Fthinkgem\u002Fjeesite5>\n* JeeSite Vue 前端源码：\u003Chttps:\u002F\u002Fgitee.com\u002Fthinkgem\u002Fjeesite-vue>\n* JeeSite Cloud 微服务：\u003Chttps:\u002F\u002Fgitee.com\u002Fthinkgem\u002Fjeesite-cloud>\n* JeeSite 跨平台手机端：\u003Chttps:\u002F\u002Fgitee.com\u002Fthinkgem\u002Fjeesite-uniapp>\n* JeeSite 客户端安装程序：\u003Chttps:\u002F\u002Fgitee.com\u002Fthinkgem\u002Fjeesite-client>\n* 内外网中间件：\u003Chttps:\u002F\u002Fmy.oschina.net\u002Fthinkgem\u002Fblog\u002F4624519>\n* 统一认证平台：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Foauth2-server>\n\n## 学习文档\n\n* 库表生成、代码生成：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fcode-gen\u002F>\n* 菜单权限、按钮权限：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fpermi-shiro\u002F>\n* 数据权限、库事务：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fservice-datascope\u002F#数据权限>\n* 表结构、数据字典：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fcode-gen\u002F#表结构数据字典>\n* 持久层框架、SQL：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fdao-mybatis\u002F>\n* 后端常用工具：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fsys-utils\u002F>\n\n**分离版**\n\n* 版本介绍：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fjeesite-vue\u002F>\n* 源码解析：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fvue-crud-view\u002F>\n* 表单组件：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fvue-basic-form\u002F>\n* 表格组件：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fvue-basic-table\u002F>\n* 参数配置：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fvue-settings\u002F>\n* 常用组件：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fvue-comp\u002F>\n* 前端权限：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fvue-auth\u002F>\n* 图标组件：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fvue-icon\u002F>\n* 前端样式库：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fvue-style\u002F>\n* 多语言国际化：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fvue-i18n\u002F>\n\n**经典版**\n\n* 表单组件：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fviews-beetl\u002F>\n* 表格组件：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fdatagrid\u002F>\n* 常用工具：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fjeesite-js\u002F>\n* 自定义主题：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fcustom-views\u002F>\n\n## 更多文档\n\n* AI、CMS、RAG、Tool、MCP 人工智能助手：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fai-cms>\n* BPM 业务流程引擎（Flowable）：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fbpm\u002F>\n* CMS 多站点内容管理模块：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fcms\u002F>\n\n* 消息推送消息提醒：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fmsg-push-use\u002F>\n* 对象存储模块：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Foss-client>\n* 单点登录模块：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fsso-cas>\n* 在线任务调度：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fjob\u002F>\n\n* 大屏设计器：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fvisual\u002F>\n* 报表设计器：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fureport\u002F>\n* 文件管理分享：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Ffilemanager\u002F>\n* 文件在线预览：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Ffilepreview\u002F>\n\n* 集群、高可用架构：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fcluster\u002F>\n* SaaS 多租户架构：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fsaas-corp-use\u002F>\n* 读写分离分片分表：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fsharding\u002F>\n* Spring监控系统：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fwebadmin\u002F>\n* 分布式跨应用事务：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fseata\u002F>\n* 追踪系统集成：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Fskywalking\u002F>\n* ELK 日志收集：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Felk-log\u002F>\n\n* MybatisPlus: \u003Chttps:\u002F\u002Fgitee.com\u002Fthinkgem\u002Fjeesite-mybatisplus>\n* 接口快速开发：\u003Chttps:\u002F\u002Fgitee.com\u002Fthinkgem\u002Fjeesite-magic-api>\n* 内外网中间件：\u003Chttps:\u002F\u002Fmy.oschina.net\u002Fthinkgem\u002Fblog\u002F4624519>\n* 统一认证平台：\u003Chttps:\u002F\u002Fjeesite.com\u002Fdocs\u002Foauth2-server>\n\n## 授权许可协议条款\n\n1. 基于 Apache License Version 2.0 协议发布，可用于商业项目，但必须遵守以下补充条款。\n2. 不得将本软件应用于危害国家安全、荣誉和利益的行为，不能以任何形式用于非法为目的的行为。\n3. 在使用本软件时，由于它集成了众多第三方开源软件，请共同遵守这些开源软件的使用许可条款规定。\n4. 在延伸的代码中（修改和有源代码衍生的代码中）需要带有原来代码中的协议、版权声明和其他原作者\n   规定需要包含的说明（请尊重原作者的著作权，不要删除或修改文件中的`Copyright`和`@author`信息）\n   更不要，全局替换源代码中的 jeesite 或 ThinkGem 等字样，否则你将违反本协议条款承担责任。\n5. 基于本软件的作品，只能使用 JeeSite5 作为后台服务，除外情况不可商用且不允许二次分发或开源。\n6. 您若套用本软件的一些代码或功能参考，请保留源文件中的版权和作者，需要在您的软件介绍明显位置\n   说明出处，举例：本软件基于 JeeSite Vue 快速开发平台，并附带链接：https:\u002F\u002Fjeesite.com\n7. 任何基于本软件而产生的一切法律纠纷和责任，均于我司无关。\n8. 如果你对本软件有改进，希望可以贡献给我们，共同进步。\n9. 本项目已申请软件著作权，请尊重开源，感谢阅读。\n\n## 技术支持与服务\n\n* 本软件免费，我们也提供了相应的收费服务，因为：\n* 没有资金的支撑就很难得到发展，特别是一个好的产品，如果 JeeSite 帮助了您，请为我们点赞。支持我们，您可以获得更多回馈，我们会把公益事业做的更好，开放更多资源，回报社区和社会。请给我们一些动力吧，在此非常感谢已支持我们的朋友！\n* **联系我们**：请访问技术支持与服务页面：\u003Chttp:\u002F\u002Fs.jeesite.com> \n\n## 专业版增加的功能\n\n1. 主题标签页的五种风格自由切换\n2. 业务流程、流程设计、流程办理\n3. 文件管理、上传秒传、文件预览\n4. 高级折叠表单和个性化本地存储\n5. 表格个性化设置参数本地存储\n6. 租户管理功能、租户切换\n7. 动态设置页面字体大小\n8. 页签右键，在新窗口打开\n9. 消息推送、消息提醒\n10. 语言国际化、本地化\n11. 快速升级到 Monorepo 脚本\n12. 更多功能详见文档\n","JeeSite 是一个基于 Java 的低代码、轻量级企业级应用开发平台，集成了 Spring Boot、MyBatis、Flowable 等技术栈，并采用 Vue 和 Ant Design Vue 作为前端框架。其核心功能包括组织机构管理、角色用户权限控制、数据权限设置、内容管理及工作流处理等，支持快速构建模块化、可复用的微服务架构。通过使用 Turborepo 和 Monorepo 结合 pnpm 的方式，项目实现了高效的编译速度与统一的任务管理，特别适合需要快速搭建且易于维护的企业管理系统或中大型 Web 应用场景。",2,"2026-06-11 03:19:01","top_language"]