前端

# 星禾语管理系统脚手架 [](https://vuejs.org/) [](https://spring.io/projects/spring-boot) [](https://element-plus.org/) [](https://sa-token.dev33.cn/) 一个基于 Vue 3 + Spring Boot + Element Plus 的现代化轻量级管理系统脚手架，提供完整的 RBAC 权限管理解决方案,没有过多的复杂功能,个人私活/二开利器。 ## ? 项目截图    ## ✨ 项目特色 ### ? 精心定制的UI设计 - **基于 Element Plus 深度定制**：在 Element Plus 基础上重新设计了色彩体系,以科技蓝为主色调进行配色 - **简约现代风格**：采用简约的视觉设计，避免华丽或刺眼的元素 - **表格自适应**：智能表格布局，大屏幕无空白，小屏幕可滚动 ### ?️ 纯净版脚手架 - **零业务代码**：专注于框架搭建，不包含具体业务逻辑 - **开箱即用**：提供完整的用户、角色、权限、菜单管理功能 - **模块化设计**：清晰的代码结构，便于二次开发 - **标准化规范**：遵循最佳实践，代码规范统一 ### ? 完善的权限体系 - **RBAC 权限模型**：基于角色的访问控制，权限管理清晰 - **菜单权限集成**：权限管理直接集成到菜单管理中，操作便捷 - **动态路由**：根据用户权限动态生成路由，安全可靠 - **状态验证**：完善的角色状态验证，禁用角色立即生效 ## ? 技术栈 ### 前端技术 - **Vue 3** - 渐进式 JavaScript 框架 - **Vite** - 下一代前端构建工具 - **Element Plus** - 基于 Vue 3 的组件库 - **Pinia** - Vue 的状态管理库 - **Vue Router** - Vue.js 官方路由管理器 - **Axios** - HTTP 客户端 - **SCSS** - CSS 预处理器 ### 后端技术 - **Spring Boot ** - Java 应用框架 - **Sa-Token** - 轻量级权限认证框架 - **MyBatis Plus** - MyBatis 增强工具 - **MySQL** - 关系型数据库 - **Maven** - 项目构建工具 ## ? 项目结构 ``` ├── xm-vue/ # 前端项目 │ ├── src/ │ │ ├── api/ # API 接口 │ │ ├── components/ # 公共组件 │ │ ├── layout/ # 布局组件 │ │ ├── router/ # 路由配置 │ │ ├── stores/ # 状态管理 │ │ ├── styles/ # 样式文件 │ │ ├── utils/ # 工具函数 │ │ └── views/ # 页面组件 │ └── package.json ├── xm-boot-huayi/ # 后端项目 │ ├── xm-api-business/ # 业务模块 │ ├── xm-common/ # 公共模块 │ ├── xm-model/ # 实体模块 │ └── sql/ # 数据库脚本 └── README.md ``` ## ? 核心功能 ### ? 用户管理 - 用户增删改查 - 用户状态管理（启用/禁用） - 密码重置功能 - 角色分配管理 - 批量操作支持 ### ? 角色管理 - 角色增删改查 - 角色状态管理 - 权限分配功能 - 菜单权限分配 - 操作权限分配 ### ? 菜单管理 - 菜单树形管理 - 菜单权限集成 - 动态路由生成 - 菜单状态控制 - 图标配置支持 ### ? 权限管理 - 权限增删改查 - 权限与菜单关联 - 权限状态管理 - 权限编码规范 - 权限描述管理 ### ?️ 安全特性 - JWT Token 认证 - 角色状态验证 - 权限实时验证 - 路由权限控制 - 接口权限校验 ## ? UI 设计特色 ### 色彩体系 - **主色调**：采用蓝色系，专业稳重 - **辅助色**：绿色（成功）、橙色（警告）、红色（错误） - **中性色**：灰色系，层次分明 - **背景色**：浅色背景，视觉舒适 ### 组件定制 - **按钮样式**：支持文本风格和边框风格 - **表格样式**：自适应宽度，响应式设计 - **表单样式**：统一的表单布局和验证 - **卡片样式**：简洁的卡片设计 ### 交互体验 - **加载状态**：优雅的加载动画 - **反馈提示**：及时的操作反馈 - **错误处理**：友好的错误提示 - **操作确认**：重要的操作确认机制 ## ? 快速开始 ### 环境要求 - Node.js >= 16.0.0 - Java >= 8 - MySQL >= 5.8 - Maven >= 3.6 ### 前端启动 ```bash # 进入前端目录 cd xm-vue # 安装依赖 npm install # 启动开发服务器 npm run dev ``` ### 后端启动 ```bash # 进入后端目录 cd xm-boot-huayi # 编译项目 mvn clean compile # 启动应用 mvn spring-boot:run ``` ### 数据库初始化 ```bash # 执行数据库脚本 mysql -u root -p < sql/sql.sql ``` ## ? 使用指南 ### 1. 用户登录 - 默认管理员账号：admin / 123456 - 支持用户名密码登录 - 登录后自动获取用户权限 ### 2. 权限配置 - 在菜单管理中创建菜单 - 在权限管理中创建权限 - 在角色管理中分配权限 - 在用户管理中分配角色 ### 3. 开发扩展 - 新增页面：在 `views` 目录下创建页面组件 - 新增接口：在 `api` 目录下创建接口文件 - 新增权限：在菜单管理中配置权限标识 - 新增路由：系统会根据菜单自动生成路由 ## ? 配置说明 ### 前端配置 ```javascript // vite.config.js export default defineConfig({ server: { port: 3000, proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } } }) ``` ### 后端配置 > 修改数据库信息 ```yaml # application.yml spring: datasource: url: jdbc:mysql://localhost:3306/xm_system username: root password: 123456 ``` > 修改Redis信息 ```yaml spring: redis: host: 127.0.0.1 port: 6379 database: 0 timeout: 10000ms lettuce: pool: max-active: 8 max-wait: -1ms max-idle: 8 min-idle: 0 password: ``` > 项目基于saToken-redis来实现缓存，如果不需要请移除 ```xml cn.dev33 sa-token-redis-template ${saToken.version} ``` ## ? 开源协议 本项目采用 [MIT](LICENSE) 开源协议。 ## ? 致谢 - [Vue.js](https://vuejs.org/) - 渐进式 JavaScript 框架 - [Element Plus](https://element-plus.org/) - 基于 Vue 3 的组件库 - [Spring Boot](https://spring.io/projects/spring-boot) - Java 应用框架 - [Sa-Token](https://sa-token.dev33.cn/) - 轻量级权限认证框架 ## ? 联系我们 - 邮箱：wodyiyi@163.com --- ⭐ 如果这个项目对您有帮助，请给我们一个 Star！

项目特色 ? 全栈解决方案：后端API + Web管理端 + 移动端小程序，三端统一 ? 技术前沿：基于Spring Boot 3 + Vue 3 + UniApp最新技术栈 ? 现代化UI：Web端基于Ant Design Vue 4，移动端采用毛玻璃设计风格 ? 安全可靠：Sa-Token权限认证，Redis会话管理，完善的RBAC权限模型 ? SQL监控：彩色SQL日志，性能监控，慢SQL检测，实时监控系统 ?️ 开发友好：代码规范，注释完整，易于二次开发 ? 多端支持：支持微信小程序、H5、App等多平台部署 ? 任务调度：集成Snail-Job分布式任务调度平台

1. 本项目解决了什么问题（30%） 个人网站建设主要解决三类核心问题： 个人品牌展示碎片化：整合个人信息（简历、作品、博客等），避免分散在社交平台、招聘网站等多个渠道，形成统一的个人品牌窗口。 信息传递低效：通过结构化设计，让访客快速获取核心信息（如职业技能、项目经验、联系方式），减少信息筛选成本。 个性化表达受限：突破第三方平台模板限制，通过自定义设计和功能，展现个人风格与专业特质，增强记忆点（如设计师的作品展示页、开发者的技术博客）。 2. 本项目的技术选型与特点（40%） 技术选型： 核心框架：WordPress（快速搭建）或 Next.js（定制化开发） 前端技术：HTML5 + CSS3（Tailwind CSS） + JavaScript（React/Vue） 后端支持：PHP（WordPress）或 Node.js（Next.js） 部署方案：云服务器（阿里云 / 腾讯云）或静态托管（Vercel/GitHub Pages） 技术特点与性能表现： 轻量化架构：静态页面占比高，减少服务器请求，加载速度提升 30%+，适配移动端（响应式设计）。 模块化设计：可按需添加功能模块（博客系统、作品画廊、联系表单等），后期扩展成本低。 SEO 友好：内置结构化数据标记，配合动态路由（Next.js），提升搜索引擎收录效率。 维护便捷：WordPress 后台支持可视化编辑，非技术人员也能更新内容；代码仓库（Git）管理确保版本可控。 3. 如何快速上手本项目（30%） 基础版（无代码 / 低代码）： 选择工具：注册 WordPress 账号（https://wordpress.com）或使用模板平台（如 Wix、Squarespace）。 搭建框架：选择个人主题（推荐「Astra」「Divi」），设置基础页面（首页、关于我、作品、联系方式）。 填充内容：上传头像、简历 PDF、作品图片，配置导航菜单和社交链接。 上线发布：绑定域名（可选免费二级域名或购买自定义域名），开启 SSL 证书确保安全访问。

该平台是一个基于全栈技术的网页版 Windows 11 模拟器，主要还原了 Windows 11 的界面和常用交互体验。项目采用前后端分离架构，并通过 Docker 容器化进行部署，内置静态 Markdown 文档阅读器等应用。后续计划持续扩展，作为个人网站使用。 项目时间： 2025.07.15 - 至今 项目主页： http://115.29.179.225:3000/ 技术栈： Next.js、TypeScript、Zustand、Tailwind CSS、React-Rnd、NestJS、MySql 项目亮点： - 实现桌面操作系统的核心功能：窗口管理、桌面图标系统、自定义应用程序等 - 优化性能：虚拟滚动技术处理大量条目渲染 - 自创方案：后端目录保存文档，自动生成文件索引和目录树，提供完整的编辑和阅读API，通过nodejs API执行文件操作。 项目成果： - 实现Windows 11 核心交互高度还原 - 达到 Lighthouse 性能评分 95+，页面加载时间 < 1s - 成为前端架构设计和技术实现的展示案例

智能文稿分析：支持大段文本输入，自动提取关键词并高亮显示，实时统计字数与关键词数量。 智能图片搜索：点击关键词即可搜索相关图片，支持多关键词切换，图片以网格形式展示，支持全屏预览。 图片选择管理：图片卡片配备勾选框，支持跨关键词选择，选中图片高亮显示，实时统计已选数量。 批量下载打包：一键将所选图片打包为 ZIP 文件，智能命名，支持多种图片格式。

resy 是 react state easy 的英文单词首字母拼写而成的组合词，显然它是针对 react 状态管理的库，并且它表明了自身的简洁性。 resy 天然支持 react-devtools 开发调试工具插件，具备完善的开发调试的功能； 1、友好 JS 直觉：按照 不创造 (不创造没有过的使用方式) 不扭曲 (不扭曲编程语言原有的使用方式) 不混杂 (不滥用开发搭配导致配置心智负担) 的 三不原则 来设计使用规范， 在符合编程语言特性合理化的基础之上进行完备的使用规范设计，是给予开发者直观易用的核心初衷。 2、TypeScript 类型安全：基于 TypeScript 开发，严谨的类型推断为开发者提供了更完善的自动完成功能， 也辅助开发者程序编码对于类型安全的可维护性得以持续完善。 3、模块化设计：针对模块化的使用，减轻开发者的全局配置管理的心智负担。

项目概述 Lorn.OpenAgenticAI是一款面向企业和个人的桌面端智能体AI应用，通过整合大语言模型能力与桌面软件操作，打造全新一代的办公自动化解决方案。本项目旨在消除传统自动化工具的技术门槛，让用户通过自然语言或简单的可视化编排即可实现复杂的办公流程自动化。 产品价值 提升效率：将重复性、繁琐的办公任务自动化，释放人力资源 降低门槛：无需编程知识，通过自然语言或拖拽式界面即可创建自动化流程 灵活扩展：插件化架构支持快速接入新的桌面应用 智能协作：大模型赋能的上下文理解，使自动化流程更加智能和上下文感知 Director核心调度引擎 Director作为系统的中枢神经，负责协调大语言模型与各类桌面应用之间的交互。它提供两种主要的工作模式： 提示词驱动模式（智能助手模式） 用户通过自然语言描述任务需求 系统自动解析任务意图，规划执行路径 智能调度相关Agents执行具体操作 适合非技术用户和临时性任务 流程编排模式（专业工作流模式） 提供可视化流程设计界面，类似流程图的拖拽体验 精确控制各Agents的调用顺序、参数和条件分支 支持保存、编辑和共享工作流模板 适合固定流程和批量处理场景 外围Agents生态 Agents是封装了特定桌面软件操作能力的功能模块，通过标准化的MCP协议与Director进行通信： 文档处理Agents：Word文档编辑、PDF解析与生成 数据处理Agents：Excel数据分析、数据库操作 演示制作Agents：PowerPoint幻灯片创建与美化 网络交互Agents：浏览器自动化、网页信息提取 通信协作Agents：邮件收发、即时通讯工具交互 每个Agent都专注于特定领域的操作，可独立迭代升级，形成丰富的插件生态。

MyFast-Admin 后端采用 FastAPI 框架开发，提供高性能、易于使用的 RESTful API 接口，支持前端各项功能的数据处理和业务逻辑。系统采用现代化的异步处理方式，保证高并发场景下的稳定性和响应速度。 核心特性 高性能框架：基于 FastAPI 和 Pydantic，提供极速的 API 响应 完整的权限系统：基于 RBAC 模型的权限控制 用户认证：使用 JWT 令牌的安全认证机制 ORM 支持：基于 SQLAlchemy 2.0 的数据库访问层 自动文档：集成 Swagger UI 和 ReDoc 的 API 文档 数据验证：严格的请求和响应数据验证 异步支持：支持异步数据库操作和请求处理 系统配置：灵活的系统参数和字典管理 日志管理：基于 loguru 的高效日志记录 定时任务：支持 APScheduler 的定时任务管理 国际化支持：多语言系统配置

Mall电商项目简介： Mall电商项目是一个功能全面的开源电商解决方案，专为中小企业打造。它涵盖了前端、后端、移动应用（App）以及小程序，旨在提供一个易于维护且可扩展的电商平台。 ‌前端‌： ‌技术选型‌：主要使用Vue.js进行开发，确保用户界面的响应式设计和高性能表现。 ‌特点‌：界面友好，用户体验流畅，支持多种设备和屏幕尺寸。 ‌后端‌： ‌技术选型‌：基于Spring Boot框架构建，结合Spring Cloud实现微服务架构，支持高并发和分布式部署。 ‌特点‌：提供了丰富的API接口，支持多用户管理、订单处理、库存管理、支付集成等功能。同时，采用前后端分离的设计，提高了系统的灵活性和可维护性。 ‌移动应用（App）与小程序‌： ‌技术实现‌：App端可能采用原生开发或跨平台框架（如React Native、Flutter等），小程序则基于微信小程序平台开发。 ‌功能‌：与后端系统无缝对接，提供商品浏览、搜索、购买、支付等核心电商功能。同时，支持个性化推荐、用户中心、订单管理等附加功能。

我这个开源低代码项目是一种可视化应用开发工具，帮助用户通过拖拽组件、配置参数、少量代码即可快速构建业务系统。它降低了传统开发门槛，加快了软件交付速度，广泛应用于数据管理、流程审批、报表可视化等场景，重点是事件，对整个页面的数据流向做控制。但现在该低代码平台暂支持数据建模，适合个人的应用开发，但目前还不够成熟，我再修改并升级它。

1. 负责Hexo主题的整体开发，确保主题风格与功能符合明日方舟罗德岛阵营的特色。 2. 集成数学公式支持，优化用户阅读体验，提供丰富的学术表现能力。 3. 实现Valine、Gitalk及Waline评论系统的无缝对接与优化，增强用户互动性。 4. 引入Mermaid图表工具，支持流程图、序列图等多种图表的生成与展示，提升内容表现力。 5. 进行代码优化与性能测试，确保主题运行稳定，加载速度快，兼容各类设备与浏览器。

这是一个基于深度学习的图像真伪识别系统，能够区分真实图像和伪造图像。系统使用PyQt5构建了用户友好的界面，支持图片和视频的实时分析。 支持图片和视频的真伪识别 实时视频分析功能 友好的图形用户界面 多种深度学习模型支持（ResNet50, VGG, DenseNet121等） 结果统计和历史记录功能

mallerp外贸流程管理系统是针对ebay paypal 速卖通等外贸平台开发的一款流程管理系统，包括13个模块近百个功能项目，采用基于php的CI框架+mysql开发。扩展性极强。适合15人左右的团队使用。

我开发了一个背单词网站，包含卡片记忆、选择题和单词拼写功能。在开发过程中，遇到移动端和PC端在拼写环节出现多输/漏输字符的问题。通过针对性检测和分别调试，最终解决了这一兼容性问题。整个项目让我积累了前端开发和跨设备适配的宝贵经验。

我的个人博客致力于为用户提供一个简洁、高效且交互友好的内容展示平台，主要解决以下核心问题： 内容的结构化呈现：通过清晰的页面布局和导航设计，帮助读者快速定位感兴趣的内容； 性能与加载速度：优化页面加载效率，减少用户等待时间，提升整体使用流畅度。 技术架构与选型 博客采用 HTML、CSS、JavaScript 三位一体的前端技术架构，具体选型及原因如下： HTML5：作为内容的基础骨架，利用语义化标签（如 、、）提升页面结构的可读性与搜索引擎优化（SEO）； CSS3 + 原生布局：通过 Flexbox、Grid 等现代布局技术实现响应式设计，结合 CSS 动画和过渡效果增强页面动态感； 原生 JavaScript：轻量级实现页面交互逻辑（如菜单动态展开、图片懒加载），避免引入第三方框架带来的额外性能开销，同时保证代码的可维护性。 技术特点 轻量级与高效性：纯前端技术栈减少了服务器渲染压力，页面加载速度更快； 灵活的样式控制：CSS 预处理器（如未使用则强调原生 CSS 的模块化与可复用性）确保样式统一且易于修改； 动态内容实时更新：通过 JavaScript 异步获取数据（如评论列表），实现无刷新页面更新，提升用户体验； 跨浏览器兼容性：遵循 Web 标准编写代码，确保博客在主流浏览器（Chrome、Firefox、Edge 等）中正常运行。 性能表现 加载速度优化： 通过图片压缩、CSS/JS 代码合并与压缩，减少资源体积； 利用浏览器缓存策略，缓存静态资源（如 CSS、JS 文件），降低重复加载耗时； 首屏加载时间控制在 1.5 秒以内（视网络环境略有差异）。 交互流畅性： 原生 JavaScript 逻辑轻量高效，避免复杂框架的性能损耗，确保页面滚动、按钮点击等交互操作无卡顿； 动态内容采用懒加载技术，仅在用户需要时加载相关资源，进一步提升性能。 可扩展性： 模块化的代码结构为后续功能扩展（如添加博客分类、用户系统）预留了灵活空间，便于未来迭代升级。

面向群体与核心价值 本工具主要服务开发者、办公用户及多媒体创作者，解决数字内容处理中的三大核心痛点： 工具割裂化：集成图像批量处理（格式转换、批量缩放、批量水印）、文档批量格式转换、批量音视频处理（转码、分割、音轨提取） 隐私风险：通过本地化运算架构，规避云端处理导致的数据泄露风险 核心层：Avalonia 开发高性能处理内核，集成 FFmpeg / pandoc 等底层库

企业级中后台管理系统（Vue2） 为某大型国企定制的数据可视化管理系统，日均访问量10W+，承载核心业务数据处理与实时监控。 核心需求：多角色权限控制、大数据表格渲染性能优化、跨平台兼容性（需支持IE11）。 二、技术亮点：工程化与性能优化 1. 深度定制打包配置（Webpack/Vite） 构建效率提升： 引入 DLLPlugin 预编译Element-Plus/ECharts等稳定依赖，构建耗时减少40%； 使用 thread-loader 并行处理TypeScript编译，冷启动速度提升35%。 缓存与更新策略（Vue中台系统） 版本指纹 + Service Worker： // vue.config.js filenameHashing: true, chainWebpack: config => { config.output.filename('[name].[contenthash:8].js') } 结果：二次访问加载速度提升至0.8秒，接口请求复用率超90%。 2. 网络性能解决方案 首屏加载优化（React流程管理项目） 资源压缩： 开启 Brotli 压缩（Nginx配置 + compression-webpack-plugin），JS文件体积平均减少68%； 图片使用 Sharp 自动转WebP格式，CDN分发节省45%带宽成本。 三、代码规范与协作 统一技术栈管理： Vue项目使用 ESLint + Prettier + Husky 约束代码风格，Git提交规范遵循Angular Convention； React项目采用 TypeScript 严格模式（strict: true），类型覆盖率100%。 目前就职于国企，欢迎交流！

这是一个专注于为开发者提供高质量开源组件的资源库，涵盖了丰富的前端和UI组件，适用于各种项目场景。所有组件均经过精心设计和优化，支持快速集成，帮助开发者提升效率。无论是个人项目还是企业级应用，都能在这里找到合适的解决方案。开源免费，社区驱动，欢迎贡献和反馈，共同打造更强大的工具生态！

该项目旨在对腾讯旗下类似 switch 相关官网进行复刻，运用 Bootstrap 框架重新搭建，力求在布局、交互上达到与原官网相近的效果。素材直接引用腾讯官网，在还原视觉风格的同时，展现对 Bootstrap 技术的实践运用，助力深入理解 Web 开发与页面构建。

1.本项目是用于购买一对一私人教学的滑轮课程平台，同等类型的教育型平台均可使用，多处按钮都有动态的效果实现 2.使用的是前端的基础三件套以及bootstrap技术和express来完成部分后端数据，以及使用了mysql 3.本项目仅用于展示