首页悬浮球看似只是一个小按钮，其实涉及了布局、事件、手势、层级和交互细节。全局稳定出现拖动顺手点击不误触层级不打架如果你也在做类似功能，推荐直接按“根组件挂载 + fixed 定位 + 拖拽边界限制 + 点击/拖动区分”这条路线来实现，基本就能一次做对。

data() {return {page: {total: 0},把列表页最常用的分页逻辑收口把重复代码从页面里拿掉把交互规范统一起来让页面只专注数据请求和展示和直接使用更少重复代码更一致的体验更好维护更适合后台管理系统更方便团队协作如果你的项目里有大量列表页，这种封装几乎是必做的。

输入文字时，组件通过统计纯文本长度，超长就。上传图片后，使用插入图片。上传附件时，通过自定义把文件渲染成可点击节点。上传视频时，先插入占位节点显示进度，上传成功后替换成。父组件只关心v-model里的 HTML 和返回的状态。提交前处理 URL，展示前还原 URL，保证多环境下数据稳定。最后提醒一句：如果内容来自用户输入，使用v-html前最好在后端或前端做 HTML 白名单清洗，避免 XSS。富

很多前端初学者会遇到一个困惑：我只是想写 HTML、CSS、JavaScript，为什么还要学 Node.js？为什么安装项目要用 npm、yarn、pnpm？为什么运行项目又会看到 Vite、Webpack？这些工具看起来很多，其实它们各自负责的事情并不一样。Node.js：让 JavaScript 可以运行在浏览器之外。：管理项目依赖和运行脚本。：负责前端项目的开发服务器、打包、构建和优化。N

很多前端初学者会遇到一个困惑：我只是想写 HTML、CSS、JavaScript，为什么还要学 Node.js？为什么安装项目要用 npm、yarn、pnpm？为什么运行项目又会看到 Vite、Webpack？这些工具看起来很多，其实它们各自负责的事情并不一样。Node.js：让 JavaScript 可以运行在浏览器之外。：管理项目依赖和运行脚本。：负责前端项目的开发服务器、打包、构建和优化。N

所以我整理了一些前端相关的 AI Skills，把我在实际工作里反复用到的流程固化下来。它们不是那种“泛泛而谈的提示词”，而是针对具体场景设计好的工作流：有的负责把模糊需求整理成规格，有的负责从 0 搭网站，有的负责按设计稿还原静态页面，还有的负责按既有风格体系生成前端界面。我会把 GitHub 地址放在文末，大家可以直接看仓库结构和说明。

所以我整理了一些前端相关的 AI Skills，把我在实际工作里反复用到的流程固化下来。它们不是那种“泛泛而谈的提示词”，而是针对具体场景设计好的工作流：有的负责把模糊需求整理成规格，有的负责从 0 搭网站，有的负责按设计稿还原静态页面，还有的负责按既有风格体系生成前端界面。我会把 GitHub 地址放在文末，大家可以直接看仓库结构和说明。

最近做了一个工单系统项目，采用前后端分离架构，前端使用 Vue 3 + Vite + Element Plus，后端使用 Spring Boot + MySQL。用户登录后提交反馈支持上传问题图片和附件支持在回复区插入图片和附件管理员查看工单、处理工单、回复用户用户和管理员都可以在个人中心修改信息支持头像上传到服务器支持账号登录、退出登录、角色区分这个项目不是只做了一个“展示页面”，而是把实际业务